Навигация делает оба div для прокрутки

Question

Навигация делает оба div для прокрутки

0

Я использую ползунки Owl Graphics на моей веб-странице.

Ожидаемая работа

У меня есть несколько div на моей странице, и я хочу, чтобы каждый div прокручивался при нажатии соответствующей следующей или предыдущей кнопки.

Probelm

Пока он прокручивает только один 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');
        })

baig 19 дек. 2013, в 17:33

Источник

Теги:

javascript

jquery

css

slider

1 ответ

Ещё вопросы

Sam Battat · Accepted Answer · 2013-12-19T13-22-00.000Z

используйте разные имена для переменных ползунка

$(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/