Разные коллбэки для разных слайдов в owlCarousel?

Question

[Джон Голт]

Хочу запилить крутой слайдер, в котором при попадании на различный слайд, его внутренние элементы анимируются. Пытаюсь делать это с помощью owlCarousel и все бы неплохо, но вот застрял на одном моменте: в документации (owlgraphic.com/owlcarousel/#how-to ) есть описание для использование коллбэка в целом для всего слайдера, мол давай я вызову вот эту функцию, например после пагинации слайда. И я ее беру и вызываю:

(function(){
  $(document).ready(function(){
    $(".header-carousel").owlCarousel({

    		navigation : false, // Show next and prev buttons
    		slideSpeed : 300,
    		paginationSpeed : 900,
    		singleItem: true,
    		items : 1,
        afterMove: callback
    });

    function callback(){
      $('.cd-element').addClass("cd-add");
      $('.cd-element-2').addClass("cd-add");
      $('.cd-element-3').addClass("cd-add");
      $('.cd-element-4').addClass("cd-add");
    }
  });
})();

Разметка такая:

<div class="header-carousel">
			<div class="inner-element">
				<div class="cd-element"></div>
			</div>
			<div class="inner-element">
				<div class="cd-element-2"></div>
			</div>
			<div class="inner-element">
				<div class="cd-element-3"></div>
			</div>
			<div class="inner-element">
				<div class="cd-element-3"></div>
			</div>
		</div>

То есть я хочу, чтобы для элементов cd-element-n происходило добавление класса. Но, как можно было догадаться, после пагинации уже первого слайда, добавление класса происходит для всех остальных. Вопрос: как же описать это так, чтобы добавление класса к слайду происходило только когда он становится активным?

Answer 1

[Cyrilca]

this.owl.visibleItems возвращает видимые элементы. Добавляйте класс только на них.

Пример: owlgraphic.com/owlcarousel/demos/owlStatus.html