title: Responsive Carousel using Cycle2
body: <p>I'm working on a carousel using the <a href="http://jquery.malsup.com/cycle2/" rel="nofollow">cycle2</a> and <a href="http://jquery.malsup.com/cycle2/demo/carousel.php" rel="nofollow">cycle2-carousel</a> plugins. </p>
  
  <p>Found a <a href="https://github.com/malsup/cycle2/issues/68" rel="nofollow">solution here</a> to display variable number of items depending on resized window width.</p>
  
  <p>Problem is the carousel breaks due to another slideshow.</p>
  
  <p>Everything is working until the main slideshow cycles it's first slide, then on page resize the carousel only displays one slide.</p>
  
  <p><strong>Demo</strong></p>
  
  <p><a href="http://jsfiddle.net/yDRj4/1/" rel="nofollow">http://jsfiddle.net/yDRj4/1/</a></p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>function buildCarousel(visibleSlides) {
      $('.caro').cycle({
          fx: 'carousel',
          speed: 600,
          slides: 'img',
          carouselVisible: visibleSlides,
          carouselFluid: true
      });
  }
  function buildSlideshow() {
      $('.home-slideshow').cycle({
          fx: 'fade',
          slides: 'img',
          timeout: 12000
      });
  }
  
  function initCycle() {
      var width = $(document).width();
      var visibleSlides = 5;
  
      if ( width &lt; 400 ) {visibleSlides = 1}
      else if(width &lt; 700) {visibleSlides = 3}
      else {visibleSlides = 5};
  
      buildSlideshow();
      buildCarousel(visibleSlides);
  }
  
  function reinit_cycle() {
      var width = $(window).width();
      var destroyCarousel = $('.caro').cycle('destroy');
  
      if ( width &lt; 400 ) {destroyCarousel;reinitCycle(1);} 
      else if ( width &gt; 400 &amp;&amp; width &lt; 700 ) {destroyCarousel; reinitCycle(3);} 
      else {destroyCarousel;reinitCycle(5);}
  }
  
  function reinitCycle(visibleSlides) {
      buildCarousel(visibleSlides);
  }
  var reinitTimer;
  $(window).resize(function() {
      clearTimeout(reinitTimer);
      reinitTimer = setTimeout(reinit_cycle, 100);
  });
  
  $(document).ready(function(){
      initCycle();    
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='main' style="max-width: 950px;margin: auto;"&gt;
      &lt;div class="home-slideshow" style="margin-bottom: 150px;"&gt;
          &lt;img style="width: 100%" src="http://placehold.it/950x250" alt=""&gt;
          &lt;img style="width: 100%" src="http://placehold.it/950x250" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="caro" &gt;
          &lt;img src="http://placehold.it/300x300" alt=""&gt;
          &lt;img src="http://placehold.it/300x300" alt=""&gt; 
          &lt;img src="http://placehold.it/300x300" alt=""&gt;
          &lt;img src="http://placehold.it/300x300" alt=""&gt; 
          &lt;img src="http://placehold.it/300x300" alt=""&gt;
          &lt;img src="http://placehold.it/300x300" alt=""&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>