如何用一个导航滑动2个猫头鹰旋转木马-Java 学习之路

我正在使用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" Option在新版本中不可用 .
http://jsfiddle.net/m3n2q60d/18/

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

1 回答

我想你需要编写单独的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 Fiddle

回复于 2024-04-20T12:43:12+08:00

如何用一个导航滑动2个猫头鹰旋转木马

1 回答

相关问题