Cycle2 carousel creating a responsive layout using media queries

Question

I've been playing with Cycle2 carousel and I wish to have the number of slides displayed change depending on a media query.

I'm not 100% sure the best way to do this as if I don't specify the number of slides visible it will display all possible for my container. I'd like to have this number change depending on a media query .. ie large devices we display 7 slides, small we display 3.

Any recommendations on how to proceed ?

Thanks Will

<div class='main'>

<div class="caro">
    <img src="http://placehold.it/230x190"  alt="">
    <img src="http://placehold.it/130x130" alt="">
    <img src="http://placehold.it/130x130" alt="">
    <img src="http://placehold.it/130x130" alt="">
    <img src="http://placehold.it/130x130" alt="">
    <img src="http://placehold.it/130x130" alt="">
</div>

function buildCarousel() {
    $('.caro').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'img',
        carouselVisible: 3

    });
}


$(document).ready(function () {
    buildCarousel();
});

ref jsfiddle

Answer 1

I hope you might already be having media queries for different screens sizes. You can achieve the above using the following trick.

-Set a default CSS property for state-indicator(I have used z-index)

-Have media query code to set the property for different width.(Number of slides you want)

-Upon screen resize rebuild the carousel.

Please find below the fiddle for the same

DEMO

.state-indicator { z-index: 7; }


@media all and (max-width: 768px) {
  .state-indicator { z-index: 6; }
}

@media all and (max-width: 500px) {
  .state-indicator { z-index: 5; }
}

@media all and (max-width: 350px) {
  .state-indicator { z-index: 4; }
}

@media all and (max-width: 260px) {
   .state-indicator { z-index: 3; }
}