Mutlple Owl Carousel in One Page With Different Setting

$('.owl-carousel').owlCarousel({    loop:true,    margin:10,    items:1,    nav: true})

.owl-carousel .item {    background: #4DC7A0;    padding: 1rem;}
body{  padding: 10px;}.flex-container {  display: flex;  flex-wrap: nowrap;  background-color: DodgerBlue;}
.flex-container > div {  background-color: #f1f1f1;  width: 100px;  margin: 10px;  text-align: center;  line-height: 75px;  font-size: 30px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">    <div class="item">      <div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div><div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div>          </div>    <div class="item">      <div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div><div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>    <div>4</div>  <div>5</div>  <div>6</div>    <div>7</div>  <div>8</div></div>          </div></div>

Using multiple (owl) carousel on a single page

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.

---

Related Topics