title: How to change the number of items displayed for different screen sizes
body: <p>I'm trying to find a way to change the number of <code>carouselVisible</code> items for different screen sizes. I want in a screen resolution of 768px to show 3 items and when you scale down in 360 to have 1 item.</p>
  
  <p>Is that possible?    </p>
  
  <p><a href="http://jsfiddle.net/sb_satchitanand/r29A9/8/" rel="nofollow"><strong>Demo</strong></a>              </p>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>$('#carousel').cycle({
  allowWrap: true,
  carouselVisible: 5,
  prev: '#prev',
  next: '#next',
  carouselFluid: true,
  timeout: 0,
  slides: 'article',
  fx: 'carousel'
  });
  
  var slideshows1 = $('#carousel').on('cycle-next cycle-prev', function (e, opts) {
  slideshows1.not(this).cycle('goto', opts.currSlide);
  });
  var slideshows2 = $('#carousel1').on('cycle-next cycle-prev', function (e, opts) {
  slideshows2.not(this).cycle('goto', opts.currSlide);
  });
  $('#carousel article').click(function () {
  var count = $("#carousel1 .readmore").length - 1;
  var selectedIndex = $('#carousel').data('cycle.API').getSlideIndex(this);
  var index = selectedIndex&lt;count ? selectedIndex: (selectedIndex-count)%count;
  slideshows1.cycle('goto', index);
  slideshows2.cycle('goto', index);
  });
  </code></pre>
  
  <p><strong>Html</strong>    </p>
  
  <pre><code>        &lt;div class="service"&gt;
           &lt;h1&gt;Lead1&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  &lt;article&gt;
      &lt;div class="service"&gt;
           &lt;h1&gt;Lead2&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  &lt;/div&gt;
  &lt;div id="carousel1" data-allow-wrap="true" data-cycle-prev="#prev" data-cycle-next="#next" class="cycle-slideshow" data-cycle-timeout="0" data-cycle-manual-fx="scrollHorz" data-cycle-slides=".readmore"&gt;
  &lt;div class="readmore"&gt;
       &lt;h2 class="lead"&gt;Lead&lt;/h2&gt;
  
      &lt;p&gt;Testing some text right here&lt;/p&gt; &lt;a class="cta" href="#"&gt;Läs mer&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;div class="readmore"&gt;
       &lt;h2 class="lead"&gt;Lead1&lt;/h2&gt;
  
      &lt;p&gt;Testing some text right here&lt;/p&gt; &lt;a class="cta" href="#"&gt;Läs mer&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;div class="readmore"&gt;
       &lt;h2 class="lead"&gt;Lead2&lt;/h2&gt;
  
      &lt;p&gt;Testing some text right here&lt;/p&gt; &lt;a class="cta" href="#"&gt;Läs mer&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="next"&gt;next&lt;/div&gt;
  &lt;div id="prev"&gt;prev&lt;/div&gt;
  </code></pre>