web-dev-qa-db-ja.com

左から右に2列の滑らかなカルーセル

左から右の順序で2行のカルーセルを作成する必要があります（応答性も高い）

enter image description here

と：

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

私はこの注文を受け取ります：

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

このソリューションは、レスポンシブモードで表示するために1つのスライドを使用しているため、私には適していません： 複数行のカルーセルを作成するにはどうすればよいですか？

何か案は？

javascriptjqueryslick.js
11
kurtko

そのようなテンプレートが必要です：

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

それは私のために働く。

また、モバイルで1行のみを表示する場合は、それを行う必要があります。

Slick.jsのいくつかのコードを変更する必要があるので、それを行うには縮小されていないjsバージョンを使用する必要があります。したがって、slick.jsで次の2つのメソッドを見つけてください。

  • Slick.prototype.buildRows = function（）{...}
  • Slick.prototype.cleanUpRows = function（）{...}

if条件をif（。options.rows> 1）からif（。options.rows> 0）に変更します

これは、現在滑らかなカルーセルを持っている問題を修正する方法です。

15
Yoan