I'm using the Owl Carousel for my site and want to use the carousel multiple times on one page, i have successfully achieved this using the .each, however the jQuery code i'm using, when clicking the previous or next buttons to show the item in the carousel it triggers all the carousels. Clicking the next/prev button moves the item in all the carousels.

jQuery(document).ready(function($) {        
    $(".owlcarousel-slider").each( function() {     
        var $this = $(this);
        var autoscroll = $this.attr("data-autoscroll"); 
        if(autoscroll == 1) {autoscroll = true;} else {autoscroll = false;}

        $this.owlCarousel({
            autoPlay: autoscroll
        });      

        $(".next").click(function(){
            $this.trigger('owl.next');
        })

        $(".prev").click(function(){
            $this.trigger('owl.prev');
        })             
    });
});

I believe the incorrect code has to be this bit,

$(".next").click(function(){
    $this.trigger('owl.next');
})

$(".prev").click(function(){
    $this.trigger('owl.prev');
})

Unfortunaltly my jQuery isn't my strongest, i believe i'm almost there.

Thankyou

I'm using the Owl Carousel for my site and want to use the carousel multiple times on one page, i have successfully achieved this using the .each, however the jQuery code i'm using, when clicking the previous or next buttons to show the item in the carousel it triggers all the carousels. Clicking the next/prev button moves the item in all the carousels.

jQuery(document).ready(function($) {        
    $(".owlcarousel-slider").each( function() {     
        var $this = $(this);
        var autoscroll = $this.attr("data-autoscroll"); 
        if(autoscroll == 1) {autoscroll = true;} else {autoscroll = false;}

        $this.owlCarousel({
            autoPlay: autoscroll
        });      

        $(".next").click(function(){
            $this.trigger('owl.next');
        })

        $(".prev").click(function(){
            $this.trigger('owl.prev');
        })             
    });
});

I believe the incorrect code has to be this bit,

$(".next").click(function(){
    $this.trigger('owl.next');
})

$(".prev").click(function(){
    $this.trigger('owl.prev');
})

Unfortunaltly my jQuery isn't my strongest, i believe i'm almost there.

Thankyou

• javascript
• jquery
• each

• To begin with, take out your click listeners out of $.each – martynas Commented Feb 26, 2014 at 22:22
• Hi, thankyou for your response, heres the updated code but still the same issue, pastie/8794785 – Shoebox Commented Feb 26, 2014 at 22:37
• Could you create a jsFiddle? jsfiddle – martynas Commented Feb 26, 2014 at 22:40

2 Answers 2

If someone else still got this issue, here is a working example:

HTML Markup

<div id="owl-demo" class="owl-carousel owl-theme">
   <div class="item"><h1>1</h1></div>
   <div class="item"><h1>2</h1></div>
   <div class="item"><h1>3</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
   <div class="item"><h1>4</h1></div>
   <div class="item"><h1>5</h1></div>
</div>
<div class="customNavigation">
   <a class="btn prev">Previous</a>
   <a class="btn next">Next</a>
</div>

Javascript

$(".owl-carousel").each(function() {
  var $this = $(this);
  $this.owlCarousel({
    items : 5
  });
  // Custom Navigation Events
  $this.parent().find(".next").click(function(){
    $this.trigger('owl.next');
  });
  $this.parent().find(".prev").click(function(){
    $this.trigger('owl.prev');
  });
});

Wasn't able to test it myself, but try this.

Remove the part you said you think is wrong:

$(".next").click(function(){
    $this.trigger('owl.next');
})

$(".prev").click(function(){
    $this.trigger('owl.prev');
})

And add "navigation : true" to your carousel properties:

$this.owlCarousel({
    autoPlay: autoscroll,
    navigation : true
});