Javascript 猫头鹰转盘上影响其他滑块的导航按钮

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

这是我的

这是我的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);
}
});

这又是我的

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

---

我认为这与按钮点击有关，它找不到它的父div，我想适当的解决方案是：

    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。

您应该分别初始化每个owl。如果您可以使用jQuery中的每一个。例如，对于您的案例：

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逻辑

---

另外，它将在页面上为“N”carousel工作

在owl carosel的主div上添加ID，如：var owl=jQuery'owl-carouselone'；var owltow2=jQuery'.owl carouseltwo'；我不认为这是可以做到的，因为每个滑块都是动态使用ACF的，所以可能有两个以上，可能还有10个以上，您将不得不为evey carousal使用不同的carousal初始值设定项。检查这里嗨，滑块是动态的，添加一个ID不会有帮助，因为它可能会更多，而且它是使用ACFyou中的灵活内容动态添加的。您可以使用循环添加ID，尝试一次，我认为这很有帮助。