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);
}
});

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

P.S。请将类“ .container”更改为“ .owl-wrapper”是必要的，因为我们应该将CSS样式和JS逻辑分开

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

Answer 2

适当的解决方案：：

a
g
t
a

在两个转盘上添加ID。

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

2 个答案: