javascript - Owl Carousel 上的导航按钮影响其他 slider

Question

我这里有两个带有自定义导航的 Owl Carousel ，仅在一个旋转木马时工作，但当我添加多个旋转木马时，所有旋转木马的功能相同且不独立

这是我的 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再次

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

我认为这与按钮点击有关，我猜它找不到它的父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);
}
});

它工作得很好，因为我们为每个轮播使用不同的上一个和下一个按钮。

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

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