# How to create a responsive carousel

Responsive carousels are quite easy to implement with jCarousel.

We simply listen to the `create` and `reload` events to resize each item to fit in the viewport.

    $('.jcarousel')
        .on('jcarousel:create jcarousel:reload', function() {
            var element = $(this),
                width = element.innerWidth();

            // This shows 1 item at a time.
            // Divide `width` to the number of items you want to display,
            // eg. `width = width / 3` to display 3 items at a time.
            element.jcarousel('items').css('width', width + 'px');
        })
        .jcarousel({
            // Your configurations options
        });

You can also display a different number of items depending on the container size.

    $('.jcarousel')
        .on('jcarousel:create jcarousel:reload', function() {
            var element = $(this),
                width = element.innerWidth();

            if (width > 900) {
                width = width / 3;
            } else if (width > 600) {
                width = width / 2;
            }

            element.jcarousel('items').css('width', width + 'px');
        })
        .jcarousel({
            // Your configurations options
        });

If you are displaying images in your carousel, make sure they are responsive-friendly and scale nicely to the parent element.

    .jcarousel img {
        display: block;
        max-width: 100%;
        height: auto !important;
    }