CODEWITHSUNDEEP
javascriptjqueryeach
Shoebox
Shoebox

Reputation: 601

jQuery each function for multiple carousels next, prev identifier issue

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

Upvotes: 0

Views: 7185

Answers (2)

grow
grow

Reputation: 687

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

Upvotes: 5

RossG
RossG

Reputation: 434

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
});

Upvotes: 0

Related Questions