Owl Carousel - 仅用一个圆点轮播幻灯片滑动多个轮播

Question

我有两个我想使用的旋转木马，它们都有相同数量的项目，所以没问题，但我只想有一个导航 dots 并且能够触发多个 dots具有相同的属性。

$('.div_main .owl-dots').each(function(index) {
    $(this).attr('data-index','dot-'+index);
});
$('.owl-dots[data-index="dot-0"] button').each(function(index) {
    $(this).attr('data-index','dot-'+index);
});
$('.owl-dots[data-index="dot-1"] button').each(function(index) {
    $(this).attr('data-index','dot-'+index);
});
$('.div_main .owl-dot').click(function(e) {
    e.preventDefault();
    var idx = $(this).data('index');



    $('.div_main').each(function() {
        $(this).find('button.owl-dot').eq(0).attr('data-index',idx).click();
    });
});

第一个功能是获取所有的owl点，加上index属性就可以知道哪个是哪个。第二个和第三个是为了使它们相同，比如如果这个 button 有 data-index="dot-0" 另一个 owl.dots 将是 button[data-index="dot-0"] 所以这次，我要么触发其中之一，我会发现另一个 button 具有相同的 data-index，但它会导致错误。

  Uncaught RangeError: Maximum call stack size exceeded

我认为我的第四个功能有问题。或者是否有任何情况表明一个 dots 会触发另一个 dots 和 owl-carousel?

Answer 1

这个这个点击处理程序：

$('.div_main .owl-dot').click(function(e) {
  e.preventDefault();

  if(!$(this).is(".active"){
   var idx = $(this).data('index');
   $("[data-index='"+idx+"']").not(this).click();
  }
});

注意 .not(this)!

你有错误，主要是因为你说：«点击我，点击我。»...这导致最大堆栈错误。

所以同时检查点是否已经激活将停止无限循环。

Owl Carousel - 仅用一个圆点轮播幻灯片滑动多个轮播

Owl Carousel - Slide multiple carousels with just one dots carousel slide

javascript

jquery

owl-carousel

owl-carousel-2