add active class to owl-item in owl carousel

Question

I'm using owl carousel as a thumbnail viewer and trying to add an active class to "owl-item". I Have tried afterAction and afterInit as per the owl carousel docs, both add an active class to the first item but none of the others when selected.

owldemo.owlCarousel({
items : 4,
responsive:false,
pagination: false,
navigation: true,
afterAction: function(el){
//afterinit: function(el)//same results

   this
   .$owlItems
   .removeClass('active')

   this
   .$owlItems 
   .eq(this.currentItem)
   .addClass('active')

 }
 });

I can't give an answer without complete HTML code which reproduces the problem. Have you seen this demo? http://owlgraphic.com/owlcarousel/demos/click.html — Brett Donald, Mar 07 '16 at 05:14

score 0 · Answer 1 · edited Feb 21 '18 at 00:21

0

https://codepen.io/OwlFonk/pen/dnEga/

<button id="btn">Check Current Item</button>

$("#btn").click(function(){

  var active = carousel.find(".owl-item.active");

  alert(active.text())

})

edited Feb 21 '18 at 00:21

Andrew Myers

2,754
5
32
40

answered Feb 15 '18 at 07:04

Bharath N

11

add active class to owl-item in owl carousel

1 Answers1