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-dots并添加index属性来知道哪个是哪个。第二个和第三个是使它们相同，例如如果这个button 有data-index="dot-0" 另一个owl.dots 将是button[data-index="dot-0"] 所以这一次，我要么想触发其中一个，但我只是找到另一个button 与data-index 相同，但会导致错误。

  Uncaught RangeError: Maximum call stack size exceeded

我认为我的第四个函数有问题。或者在任何情况下，一个dots 会用owl-carousel 触发另一个dots？

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)！

你有这个错误，基本上是因为你在哪里说：«点击我，点击我。»...这导致最大堆栈错误。

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