CODEWITHSUNDEEP
jquerycarousel
Caspert
Caspert

Reputation: 4363

How can I create a carousel with multiple rows?

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?

enter image description here

Upvotes: 10

Views: 36872

Answers (3)

Philip
Philip

Reputation: 51

Slick has a parameter called rows, this might help you, e.g.:

$('.b-grid-item').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    rows: 3
});

This produces a grid with 5 columns and 3 rows. Only obstacle with this. Items flow from top to bottom, so in your first row you would have the order: 1, 4, 7,...

Upvotes: 5

kamerynn
kamerynn

Reputation: 106

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
    });
});

Upvotes: 5

feeela
feeela

Reputation: 29932

Each of you slider items has to be its own grid to do so.

For example:

<div class="slider">
    <div class="item">
        <ul class="grid">
            <li></li>
            <li></li>
            <li></li>
            …
        </ul>
    </div>
    <div class="item">
        <ul class="grid">
            …
</div>

Upvotes: 1

Related Questions