Question

我正在使用Owl Carousel 2 jquery滑块，我正在尝试检索一些基本信息，特别是我想在“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>

在文档中，它说明了添加“信息”选项：

信息

类型：功能

默认值：false

回调以检索基本信息（当前项目/页面/宽度）。 Info函数的第二个参数是Owl DOM对象引用。

我需要一些关于这个“信息”功能的帮助，因为我是jquery的新手。

提前致谢

Answer 1

传递给回调的事件对象包含您需要的所有信息： (see: Docs/Events/Data)

因此，您只需要在某个事件上添加回调... translated.owl.carousel在您的情况下可能效果最佳。

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

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

...您可能还想添加initialized.owl.carousel回调。

Answer 2

解决方案来自这里： http://www.jq22.com/demo/OwlCarousel2/demos/info.html

使用＆＃34; info：getInfo＆＃34;，以下函数列出所有参数，所以只需选择一个：

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);
    }
  }
}

如何使用Owl Carousel 2检索基本信息

2 个答案: