web-dev-qa-db-fra.com

Carrousel lisse en deux rangées de gauche à droite

Je dois faire un carrousel à deux lignes avec un ordre de gauche à droite (également réactif)

enter image description here

Avec:

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

Je reçois cette commande:

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

Cette solution n'est pas bonne pour moi car j'utilise 1 diapositives pour afficher en mode réactif: Comment puis-je créer un carrousel avec plusieurs lignes?

Des idées?

javascriptjqueryslick.js
11
kurtko

Vous avez besoin de quelque chose comme ce 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,
      }
    }
  ]
});

ça marche pour moi.

Et si vous ne souhaitez afficher sur mobile qu'une seule ligne, vous devez le faire,

Vous devez changer du code dans slick.js, vous devez donc utiliser la version js non réduite pour ce faire. Donc, trouvez ces deux méthodes dans slick.js:

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

et changez la condition if de if (. options.rows> 1) en if (. options.rows> 0)

C'est un moyen de résoudre un problème qui a actuellement un carrousel lisse.

15
Yoan