title: multiple responsive owl carousel
body: <p>i need to create multiple responsive owl carousel in some page, i need to works with Data Attributes. I work like this but i cant do responsive my carousel,</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>var $carousel = $('.data-carousel[data-carousel]');
  if ($carousel.length) {
      $carousel.each(function() {
          $(this).owlCarousel($(this).data('carousel'));
      });
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="owl-carousel data-carousel" data-carousel='{"margin": 10, "items": 4, "center": "true", "loop": true}'&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&gt;
  </code></pre>
  
  <p>now i need to responsive my owl carousel , and i do like this ...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="owl-carousel data-carousel" data-carousel='{"margin": 10, "items": 4, "center": "true", "loop": true, "responsive": "{0:{items:1},768:{items:2},992:{items:3}"}'&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&gt;
  </code></pre>
  
  <p>but responsive option, dose't works. i see in owl carousel documentation and there is this :</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      responsiveClass:true,
      responsive:{
          0:{
              items:1,
              nav:true
          },
          600:{
              items:3,
              nav:false
          },
          1000:{
              items:5,
              nav:true,
              loop:false
          }
      }
  });
  </code></pre>
  
  <p>i need to create some dynamic and responsive carousel in my page and i should be use Data Attributes ...</p>