Question

我在同一页面上有2 x 2同步猫头鹰旋转木马这里可以看到1 x 2同步的演示：http://www.owlgraphic.com/owlcarousel/demos/sync.html

现在我有2 x 2同步的旋转木马，我修改了一些代码，以便推荐2套。

然而！ “nav__item - active”类仅适用于最后一个旋转木马，即使我点击第一个旋转木马也是如此。

您可以在此处查看我在上面提供的链接的完整修改代码：

记住！只有活跃的类才能解决问题！除了活动类未应用于第一个幻灯片放映之外，2 x 2幻灯片完美地工作。

        // FUNCTION THAT SYNCS TWO OWL CAROUSELS.
    var sync1 = $("#sync1");
    var sync2 = $("#sync2");

    sync1.owlCarousel({
        singleItem: true,
        slideSpeed: 1000,
        autoPlay: 4000,
        navigation: false,
        pagination: false,
        afterAction: syncPosition,
        responsiveRefreshRate: 200,
    });

    sync2.owlCarousel({
        itemsMobile: 4,
        items: 4,
        pagination: false,
        responsiveRefreshRate: 100,
        afterInit: function(el){
          el.find(".owl-item").eq(0).addClass("nav__item--active");
        }
    });

    function syncPosition(el){
        var current = this.currentItem;
        $("#sync2").find(".owl-item").removeClass("nav__item--active").eq(current).addClass("nav__item--active")
        if($("#sync2").data("owlCarousel") !== undefined){
          center(current)
        }
    }

    $("#sync2").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync1.trigger("owl.goTo",number);
    });

    function center(number){
        var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;

        for(var i in sync2visible){
          if(num === sync2visible[i]){
            var found = true;
          }
        }

        if(found===false){
          if(num>sync2visible[sync2visible.length-1]){
            sync2.trigger("owl.goTo", num - sync2visible.length+2)
          }else{
            if(num - 1 === -1){
              num = 0;
            }
            sync2.trigger("owl.goTo", num);
          }
        } else if(num === sync2visible[sync2visible.length-1]){
          sync2.trigger("owl.goTo", sync2visible[1])
        } else if(num === sync2visible[0]){
          sync2.trigger("owl.goTo", num-1)
        }
    }

    var sync3 = $("#sync3");
    var sync4 = $("#sync4");

    sync3.owlCarousel({
        singleItem: true,
        slideSpeed: 1000,
        autoPlay: 4000,
        navigation: false,
        pagination: false,
        afterAction: syncPosition,
        responsiveRefreshRate: 200,
    });

    sync4.owlCarousel({
        itemsMobile: 6,
        items: 6,
        pagination: false,
        responsiveRefreshRate: 100,
        afterInit: function(el){
          el.find(".owl-item").eq(0).addClass("nav__item--active");
        }
    });

    function syncPosition(el){
        var current = this.currentItem;
        $("#sync4")
          .find(".owl-item")
          .removeClass("nav__item--active")
          .eq(current)
          .addClass("nav__item--active")
        if($("#sync4").data("owlCarousel") !== undefined){
          center(current)
        }
    }

    $("#sync4").on("click", ".owl-item", function(e){
        e.preventDefault();
        var number = $(this).data("owlItem");
        sync3.trigger("owl.goTo",number);
    });

    function center(number){
        var sync4visible = sync4.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;

        for(var i in sync4visible){
          if(num === sync4visible[i]){
            var found = true;
          }
        }

        if(found===false){
          if(num>sync4visible[sync4visible.length-1]){
            sync4.trigger("owl.goTo", num - sync4visible.length+2)
          }else{
            if(num - 1 === -1){
              num = 0;
            }
            sync4.trigger("owl.goTo", num);
          }
        } else if(num === sync4visible[sync4visible.length-1]){
          sync4.trigger("owl.goTo", sync4visible[1])
        } else if(num === sync4visible[0]){
          sync4.trigger("owl.goTo", num-1)
        }
    }

非常感谢你！：d

Answer 1

我自己找到了答案：D

使用相同名称的2 x 2几乎相同的javascript函数真的是一个坏主意，所以它们互相覆盖：P只需调用2个顶部的syncPosition1和center1：）

使用2 x 2同步猫头鹰转盘时未应用活动类

1 个答案: