How to change the number of items displayed for different screen sizes
<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>