CODEWITHSUNDEEP
javascriptjquerycssslider
user2704289
user2704289

Reputation:

Navigation makes both divs to scroll

I am using Owl Graphics sliders on my webpage.

Expected Work

I have multiple divs on my page and I want each div to scroll when respective next or previous button is clicked.

Probelm

For now it scrolls only one div

here is jsFiddle and my code

$(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');
        })

Upvotes: 0

Views: 256

Answers (1)

Sam Battat
Sam Battat

Reputation: 5745

use different names for the slider variables

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

Upvotes: 1

Related Questions