title: Disabling Owl Carousel at a specific viewport width
body: <p>I'm currently using Owl Carousel to show a gallery on desktop/laptop sized devices. However on smaller devices I'd like to disable the plugin and show each image stacked underneath one another.</p>
  
  <p>Is this possible? I'm aware you can tweak Owl Carousel to show a certain number of images on screen at certain breakpoints. But I would like to be able to turn it off completely, removing all the divs etc.</p>
  
  <p>Here's a pen of what i'm currently working with at the moment: <a href="http://codepen.io/abbasinho/pen/razXdN" rel="noreferrer">http://codepen.io/abbasinho/pen/razXdN</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="carousel"&gt;
    &lt;div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg);"&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg);"&gt;
    &lt;/div&gt;
    &lt;div class="carousel-item" style="background-image: url(http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg);"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#carousel {
    width: 100%;
    height: 500px;
  }
  
  .carousel-item {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$("#carousel").owlCarousel({
        navigation : true,
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem: true
  });
  </code></pre>
  
  <p>Any help is gratefully received as ever!</p>