Как получить основную информацию с помощью Owl Carousel 2

Я использую слайдер jquery Owl Carousel 2 и пытаюсь получить некоторую базовую информацию, в частности, я хочу отобразить номер текущего слайда в тегах абзаца над ползунком с классом «currentSlide».

Вот моя разметка:

<p class="currentSlide"></p>

<div id="slider" class="owl-carousel">
  <div class="item"><h3>Slider 1</h3></div>
  <div class="item"><h3>Slider 2</h3></div>
  <div class="item"><h3>Slider 3</h3></div>
  <div class="item"><h3>Slider 4</h3></div>
  <div class="item"><h3>Slider 5</h3></div>
  <div class="item"><h3>Slider 6</h3></div>
</div>

И вот мой javascript:

<script type="text/javascript">
$(document).ready(function() {
  $('.owl-carousel').owlCarousel({
      items: 3,
      center : true,
      loop : true,
      //info: ??Function??
  });
});
</script>

В документации говорится о добавлении опции «информация»:

Информация

Тип: Функция

По умолчанию: ложь

Обратный вызов для получения основной информации (текущий элемент/страницы/ширина). Вторым параметром информационной функции является ссылка на объект Owl DOM.

Мне нужна помощь с этой функцией «информация», так как я новичок в jquery.

заранее спасибо


jquery owl-carousel
person Scott    schedule 06.11.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Объект событий, переданный в обратные вызовы, содержит всю необходимую информацию: (см. Документы /События/Данные)

Таким образом, вам просто нужно добавить обратный вызов на какое-то событие... translated.owl.carousel может работать лучше всего в вашей ситуации.

var owl = $('.owl-carousel');
owl.owlCarousel();

owl.on('translated.owl.carousel', function(event) {
    $('.currentSlide').text( event.item.index );
});

... и вы также можете добавить обратный вызов initialized.owl.carousel.

person aleroy    schedule 11.05.2015

arrow_upward
0
arrow_downward

Решение взято отсюда: http://www.jq22.com/demo/OwlCarousel2/demos/info.html

используйте «info: getInfo», следующая функция перечисляет все параметры, поэтому просто выберите один:

function getInfo(i){
  var owlInfo = i,prop,value,name;
  for(prop in owlInfo){
    if(owlInfo.hasOwnProperty(prop)){
      value = owlInfo[prop];
      name = prop;
      $('.'+name).text(value);
    }
  }
}
person Martin Zrcek    schedule 04.10.2016