owl 轮播上的导航按钮影响其他滑块

Question

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

这是我的 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(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。

Answer 2

您应该分别初始化每个 owl。因为如果你可以使用 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);
}
});

它运行良好，因为我们为每个轮播使用不同的上一个和下一个按钮。

P.S。请把class '.container' 改成 '.owl-wrapper' 这是必须的，因为我们要划分css 样式和JS 逻辑

P.S.S 它将用于页面上的 'N' 轮播

owl 轮播上的导航按钮影响其他滑块

nav buttons on owl carousel affecting other sliders

javascript

jquery

owl-carousel