如何通过一个导航滑动2个猫头鹰轮播

时间:2018-08-10 08:07:48

标签: jquery css owl-carousel

我使用的是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解决方案吗?

1 个答案:

答案 0 :(得分:0)

我认为您需要编写以下单独的onclick函数。

function transitionText(text){
  squareText.innerHTML = ""
  $(text).hide().appendTo(".square-text").fadeIn(800);
}

请检查我创建的小提琴。

JS Fiddle