How can I create a carousel with multiple rows?

Question

I am searching for a carousel that has multiple rows. For example 3 rows - 9 items. A jQuery carousel would be nice, but I only can find carousels with 1 row.

I want this setup. Is this possible?

Answer 1

I recently ran into this problem, and wanted to use Slick.js because it has tons of other capabilities. It sets each image (set inside a div) as a "slide", and you can choose how many slides you want to display at a time.

To make multiple rows with Slick.js, you nest the divs containing the images into another div, which slick sees as one slide. Then, you float the child divs to create the grid of images. There's a lot of ways to do this - I also used line breaks with "clear: both" CSS set to break the images into a new row.

Here's the relevant code for a 2x2 grid:

HTML

<div class="slider">

    <!-- This will be considered one slide -->
    <div>    
        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>

        <br class="clearboth">

        <div class="grandchild">
            <img src="" />
        </div>
        <div class="grandchild">
            <img src="" />
        </div>
    </div>

    <!-- The second slide -->
    <div>
        <div class="grandchild">
            <img src="" />
        </div>
            ...
    </div>
</div>

CSS

.grandchild {
    float: left;
}
.clearboth {
    clear: both;
}

JS

$(document).ready(function() {
    $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1
    });
});