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

【问题标题】：How do I retrieve basic info with Owl Carousel 2如何使用 Owl Carousel 2 检索基本信息
【发布时间】：2015-01-03 02:09:00
【问题描述】：

我正在使用 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>

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

信息

类型：函数

默认值：假

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

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

提前致谢

【问题讨论】：

标签： jquery owl-carousel

【解决方案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 回调。

【讨论】：

【解决方案2】：

解决方案取自这里： 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);
    }
  }
}

【讨论】：