导航使两个div都滚动

Question

我在我的网页上使用Owl Graphics sliders。

预期工作

我的页面上有多个div，我希望每个div在单击相应的下一个或上一个按钮时滚动。

万阿英，蒋达清

现在它只滚动一个div

这里是jsFiddle和我的代码

$(document).ready(function() {
         var owl = $("#owl-featured");
        owl.owlCarousel({
            pagination: false,
            autoPlay : false,
            items: 3, //10 items above 1000px browser width
            itemsDesktop: [1000, 5], //5 items between 1000px and 901px
            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
            itemsTablet: [600, 2], //2 items between 600 and 0
            itemsMobile: false // itemsMobile disabled - inherit from itemsTablet option
        });
        owl.owlCarousel();

        // Custom Navigation Events
        $(".next").click(function() {
            owl.trigger('owl.next');
        })
        $(".prev").click(function() {
            owl.trigger('owl.prev');
        })

Answer 1

为滑块变量使用不同的名称

$(document).ready(function() {
         var owl1 = $("#owl-featured");
        owl1.owlCarousel({
            pagination: false,
            autoPlay : false,
            items: 3, //10 items above 1000px browser width
            itemsDesktop: [1000, 5], //5 items between 1000px and 901px
            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
            itemsTablet: [600, 2], //2 items between 600 and 0
            itemsMobile: false // itemsMobile disabled - inherit from itemsTablet option
        });
        owl1.owlCarousel();

        // Custom Navigation Events
        $(".next1").click(function() {
            owl1.trigger('owl.next');
        })
        $(".prev1").click(function() {
            owl1.trigger('owl.prev');
        })
        var owl2 = $("#owl-popular");
        owl2.owlCarousel({
            pagination: false,
            autoPlay : false,
            items: 3, //10 items above 1000px browser width
            itemsDesktop: [1000, 5], //5 items between 1000px and 901px
            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
            itemsTablet: [600, 2], //2 items between 600 and 0
            itemsMobile: false // itemsMobile disabled - inherit from itemsTablet option
        });
        owl2.owlCarousel();

        // Custom Navigation Events
        $(".next2").click(function() {
            owl2.trigger('owl.next');
        })
        $(".prev2").click(function() {
            owl2.trigger('owl.prev');
        })
    });

http://jsfiddle.net/q8tre/1/