Comment puis-je créer un carrousel avec plusieurs lignes?

Je suis à la recherche d'un carrousel qui a plusieurs lignes. Par exemple, 3 rangées de 9 éléments. JQuery carousel serait bien, mais je ne trouve carrousels avec 1 ligne.

Je veux cette configuration. Est-ce possible?

Comment puis-je créer un carrousel avec plusieurs lignes?

OriginalL'auteur Caspert | 2014-03-20

  1. 5

    J'ai récemment rencontré ce problème, et je voulais l'utiliser Slick.js parce qu'il a des tonnes d'autres fonctionnalités. Il définit chaque image (défini à l'intérieur d'un div) comme un "slide", et vous pouvez choisir le nombre de diapositives que vous souhaitez afficher à la fois.

    De faire plusieurs lignes avec Slick.js vous imbriquer les balises div contenant les images dans un autre div, qui slick considère comme l'une diapositive. Ensuite, vous flottez l'enfant divs pour créer la grille d'images. Il y a beaucoup de façons de le faire - j'ai aussi utilisé les sauts de ligne avec "clear: both" CSS mis à briser les images dans une nouvelle ligne.

    Voici le code approprié pour une grille 2x2:

    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
    });
});
    Grande réponse, mais il y a un problème fondamental avec ce type de solution lorsque vous traitez avec les sites sensibles. Une impressionnante prestation de Slick.js c'est qu'il va gérer le responsive design, avec une petite quantité de JS code d'initialisation. Toutefois, si vous créez un tableau contenant les éléments triés pour une taille spécifique, il ne fonctionnera pas correctement pour les différents navigateur largeurs.
    Vrai. Vous pouvez utiliser les points d'arrêt pour modifier les diapositives à afficher/défilement et d'avoir des divs imbriqués que la pile à la verticale, mais vous pourriez être coincé à une hauteur fixe (donc si vous aviez une grille fixe à 4 images en très haute, vous pourriez pause à 3x4 4x4, 2x4, etc). Est-il une meilleure solution pour le responsive design?
    Salut KamHarrah et @Kevin Zych-vous une solution pour le centrage de ces vignettes dans le côté de la nappe de la diapositive? Je suis en cours d'exécution dans ce problème maintenant.
    Désolé @gwar9, rien hors main

    OriginalL'auteur Kam Harrah

  2. 2

    Slick a un paramètre appelé les lignes, ce qui pourrait vous aider, par exemple:

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

    Ce produit une grille avec 5 colonnes et 3 lignes. Seul obstacle à cela. Les éléments d'écoulement de haut en bas, de sorte que dans votre première rangée, vous auriez l'ordre: 1, 4, 7,...

    OriginalL'auteur Philip

  3. 1

    Chacun de vous curseur éléments a sa propre grille de le faire.

    Par exemple:

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

    OriginalL'auteur feeela