title: Using multiple (owl) carousel on a single page
body: <p>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.</p>
  
  <p>Here is the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Carousel 1 --&gt;
  &lt;div id="demo"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span12"&gt;
                  &lt;div id="owl-demo" class="owl-carousel"&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;1&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;2&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;3&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;4&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;5&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;6&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;7&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;8&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;9&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;10&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="customNavigation"&gt; &lt;a class="btn prev"&gt;Previous&lt;/a&gt; &lt;a class="btn next"&gt;Next&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Carousel 2 --&gt;
  &lt;div id="demo1"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="span12"&gt;
                  &lt;div id="owl-demo-1" class="owl-carousel"&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;1&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;2&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;3&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;4&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;5&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;6&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;7&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;8&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;9&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;h1&gt;10&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="customNavigation"&gt; &lt;a class="btn prev"&gt;Previous&lt;/a&gt; &lt;a class="btn next"&gt;Next&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have named the carousel as as owl-demo and owl-demo-1</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(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');})
  
  
  });
  </code></pre>
  
  <p>On <a href="https://jsfiddle.net/wtg76spd/" rel="nofollow">JsFiddle</a> </p>