La nappe de carrousel en deux rangées de gauche à droite

J'ai besoin de le faire en deux lignes carrousel avec de gauche à droite (également sensible)

La nappe de carrousel en deux rangées de gauche à droite

Avec:

$('slider').slick({
 rows: 2,
 slidesToShow: 3,
 responsive: [
     {
     breakpoint: 768,
     settings: {
        slidesToShow: 1           
     }
    }
  ]            
});

Je obtenir cette ordonnance:

1  3  5  7  9  11
2  4  6  8  10 12

Cette solution n'est pas bon pour moi parce que je suis en utilisant 1 des diapositives à afficher en mode réactif: Comment puis-je créer un carrousel avec plusieurs lignes?

Des idées?

Chacun doit-il faire défiler déplacer diapositive 1 dans chaque ligne ou faut-il déplacer de 3 dans chaque? De quoi êtes-vous sensible specs, le sens comment vous souhaitez qu'il s'affiche dans la vue différente de la largeur?
destktop mode: slidesToShow: 3, slidesToScroll: 3 ; mode mobile: slidesToShow: 1, slidesToScroll: 1

OriginalL'auteur kurtko | 2015-11-19

  1. 13

    Vous avez besoin de quelque chose comme ça
    Modèle:

    <div class="carousel">
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
    </div>

    CSS:

    .slick-slide{
  img{
    width: 100%;
  }
}

    JS:

    $('.carousel').slick({
    dots: true,
    slidesPerRow: 3,
    rows: 2,
    responsive: [
    {
      breakpoint: 478,
      settings: {
        slidesPerRow: 1,
        rows: 1,
      }
    }
  ]
});

    qui fonctionne pour moi.

    Et si vous voulez afficher sur le mobile que sur une seule ligne, vous devriez le faire,

    Vous avez à changer une partie du code slick.js donc, vous devez utiliser le pas minimisé js version de le faire. Donc, trouver ces deux méthodes dans slick.js:

    • Slick.le prototype.buildRows = function() { ... }
    • Slick.le prototype.cleanUpRows = function() { ... }

    et de modifier la condition if(.des options.lignes > 1) si(.des options.lignes > 0)

    C'est une façon de résoudre un problème qui a actuellement de la nappe de-carousel.

    pouvez-vous poster les changements dans slick.js? Je suis aux prises avec elle. le responsive option ne permet pas de lignes spécifié. il y a actuellement une demande de fonctionnalité sur github pour cela.
    sa ne fonctionne pas du tout même ne pouvait pas en mesure de faire tous les curseurs
    VRAIMENT, après avoir corrigé réactif de travail!! Merci
    slidesPerRow et des rangées de grandes œuvres.

    OriginalL'auteur Yoan