时间戳

首页 > 解决方案 > Owl Carousel - 只需一个点旋转木马幻灯片即可滑动多个旋转木马

javascript - Owl Carousel - 只需一个点旋转木马幻灯片即可滑动多个旋转木马

问题描述

我有两个我想使用的轮播，它们都有相同数量的项目，所以没问题，但我只想有一个导航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会触发其他dots实例owl-carousel？

标签： javascriptjqueryowl-carouselowl-carousel-2

解决方案

这个点击处理程序：

$('.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)！

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

因此，检查点是否已经处于活动状态也将停止无限循环。

推荐阅读