猫头鹰轮播上的导航按钮会影响其他滑块

Question

我这里有两个带有自定义导航的猫头鹰旋转木马，当只有一个旋转木马时工作，但当我添加多个旋转木马时，所有旋转木马的功能相同，而不是独立

这是我的FIDDLE

这是我的 JS 代码

jQuery(function(){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
    autoplay: 2000,
    items:1,
    nav:false,
    autoplay:true,
    autoplayTimeout:5000,
    autoplayHoverPause:true, 
    loop: true,
    dots: false,
    onInitialized  : counter, //When the plugin has initialized.
    onTranslated : counter //When the translation of the stage has finished.
});
jQuery('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
jQuery('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})
function counter(event) {
   var element   = event.target;         // DOM element, in this example .owl-carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index + 1;     // Position of the current item

  // it loop is true then reset counter from 1
  if(item > items) {
    item = item - items
  }
  jQuery(element).parent().find('.counter').html(item + " / " + items);
}
});

这里又是我的FIDDLE

我只需要让它们独立工作。它们在拖动图像时工作，但是当您使用箭头时，它只会移动所有滑块

我认为它与按钮点击有关，我猜它没有找到它的父 div

Answer 1

您应该分别初始化每只猫头鹰。如果你可以使用 jQuery 中的each。例如你的情况：

jQuery(function(){
var owlContainers = jQuery('.container');

owlContainers.each(function(index, owlItem) {
  var $owlContainer = jQuery(owlItem);
  var $owl = $owlContainer.find('.owl-carousel');
  $owl.owlCarousel({
    autoplay: 2000,
    items:1,
    nav:false,
    autoplay:true,
    autoplayTimeout:5000,
    autoplayHoverPause:true, 
    loop: true,
    dots: false,
    onInitialized  : counter, //When the plugin has initialized.
    onTranslated : counter //When the translation of the stage has finished.
  });
  $owlContainer.find('.customNextBtn').click(function() {
    $owl.trigger('next.owl.carousel');
  })
  // Go to the previous item
  $owlContainer.find('.customPrevBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    $owl.trigger('prev.owl.carousel', [300]);
  })
})

function counter(event) {
   var element   = event.target;         // DOM element, in this example .owl-carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index + 1;     // Position of the current item

  // it loop is true then reset counter from 1
  if(item > items) {
    item = item - items
  }
  jQuery(element).parent().find('.counter').html(item + " / " + items);
}
});

效果很好，因为我们为每个轮播使用了不同的上一个和下一个按钮。

附：请将类 '.container' 更改为 '.owl-wrapper' 这是必要的，因为我们应该划分 css 样式和 JS 逻辑

P.S.S 它将适用于页面上的“N”轮播

Answer 2

寻找合适的解决方案::

    jQuery(function(){
    var owl1 = jQuery('#owl-carousel1');
    var owl2 = jQuery('#owl-carousel2');
    owl1.owlCarousel({
        autoplay: 2000,
        items:1,
        nav:false,
        autoplay:true,
        autoplayTimeout:5000,
        autoplayHoverPause:true, 
        loop: true,
        dots: false,
        onInitialized  : counter, //When the plugin has initialized.
        onTranslated : counter //When the translation of the stage has finished.
    });

owl2.owlCarousel({
        autoplay: 2000,
        items:1,
        nav:false,
        autoplay:true,
        autoplayTimeout:5000,
        autoplayHoverPause:true, 
        loop: true,
        dots: false,
        onInitialized  : counter, //When the plugin has initialized.
        onTranslated : counter //When the translation of the stage has finished.
    });
    jQuery('.customNextBtn').click(function() {
        owl1.trigger('next.owl.carousel');
    })
    // Go to the previous item
    jQuery('.customPrevBtn').click(function() {
        // With optional speed parameter
        // Parameters has to be in square bracket '[]'
        owl1.trigger('prev.owl.carousel', [300]);
    })
    function counter(event) {
       var element   = event.target;         // DOM element, in this example .owl-carousel
        var items     = event.item.count;     // Number of items
        var item      = event.item.index + 1;     // Position of the current item

      // it loop is true then reset counter from 1
      if(item > items) {
        item = item - items
      }
      jQuery(element).parent().find('.counter').html(item + " / " + items);
    }
    });

在两个轮播上添加 ID。