时间戳

首页 > 解决方案 > 如何使用一个导航滑动 2 个 Owl 旋转木马

jquery - 如何使用一个导航滑动 2 个 Owl 旋转木马

问题描述

我正在使用Owl-Carousel 2.3.4 版本，我需要使用一个滑块上的导航同时滑动 2 个轮播的内容，我需要所有类型（上一个/下一个按钮、点、触摸滑动）。

对于 Owl-carousel v1.3.3，我在这里找到了一个可行的解决方案：http:
//jsfiddle.net/m3n2q60d/40/ 

$(document).ready(function(){
    var o2 = $('#c1')
    o2.owlCarousel({
        items:1,
        singleItem:true,
        loop:true,
        margin:10,    
        navigation :true,
        touchDrag: true,
        mouseDrag: true,
        afterMove: function (elem) {
           var current = this.currentItem;
           o1.trigger('owl.goTo',current);
        }
    });

    var o1 = $('#c2');
    o1.owlCarousel({
        items:1,
        singleItem:true,
        loop:true,
        margin:10,   
        pagination:false,
        navigation :false,
        touchDrag: true,
        mouseDrag: false,
        afterMove: function (elem) {
           var current = this.currentItem;
           o2.trigger('owl.goTo',current);
        }
    });
});

但它不适用于 v2.3.4，因为“afterMove”选项在新版本中不可用。
http://jsfiddle.net/m3n2q60d/18/

有人可以为 Owl-carousel 2 提出解决方案吗？

标签： jquerycssowl-carousel

解决方案

我认为您需要编写单独的 onclick 函数，如下所示。

 $(document).ready(function() {
     var o1 = $('#c1'), o2 = $('#c2');

     //Sync o2 by o1
     o1.on('click', '.owl-next', function () {
         o2.trigger('next.owl.carousel')
     });
     o1.on('click', '.owl-prev', function () {
         o2.trigger('prev.owl.carousel')
     });
     //Sync o1 by o2
     o2.on('click', '.owl-next', function () {
         o1.trigger('next.owl.carousel')
     });
     o2.on('click', '.owl-prev', function () {
         o1.trigger('prev.owl.carousel')
     });

     //Carousel settings
     o1.owlCarousel({
         center : true,
         loop : true,
         items : 1,
         margin:0,
         nav : true
     });
    o2.owlCarousel({
         center : true,
         loop : true,
         items : 1,
         margin:0,
         nav : true
     });
 });

请检查我创建的小提琴。

JS小提琴

推荐阅读