Nidhi Vij Nidhi Vij - 2 months ago 19
Javascript Question

Using multiple (owl) carousel on a single page

I have been looking at ways on google to use multiple carousel on a single page and yet did not find any of the solutions working for me. Can anyone of you please help.

Here is the code:

HTML

<!-- Carousel 1 -->
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<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>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
<!-- Carousel 2 -->
<div id="demo1">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo-1" class="owl-carousel">
<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>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>


I have named the carousel as as owl-demo and owl-demo-1

Javascript

$(document).ready(function() {

var owl = $("#owl-demo");
owl.owlCarousel({

items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option

});

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


});


On JsFiddle

Answer

Updated code should look like this: https://jsfiddle.net/wtg76spd/1/

JavaScript:

$(document).ready(function() {

  $("#owl-demo, #owl-demo-1").each(function() {
    $(this).owlCarousel({
      items : 6, //10 items above 1000px browser width
      itemsDesktop : [1000,6], //5 items between 1000px and 901px
      itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
      itemsTablet: [600,2], //2 items between 600 and 0;
      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
    });
  });
  // Custom Navigation Events
  $(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
  $(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});

CSS (just first line changed):

//before
 #owl-demo .item{
//after
 #owl-demo .item, #owl-demo-1 .item{
//class "owl-demo" would do better in this case

1) Use .each() instead of copying code.

2) It'd be better to use class instead of #owl-demo and #owl-demo-1 - let's say you had not 2 but 100 sliders. Would you still give them IDs? However I didn't change it in example.

3) I used closest() and find() methods for next/prev buttons. This way I have 2 callback functions instead of 4.