レスポンシブで複数画像をスクロールするカルーセルスライダーの設定方法

横幅が770px以上のとき

横幅が769px以下のとき

図のイメージのようなことが実現したいです。

SlickというJavaScriptライブラリを使い、同一ページ内で、スライダーがそれぞれ横幅が
770px以上のときは3枚の画像を表示、1枚ずつスライド
769px以下のときは6枚の画像を表示、3枚を2段に分けて表示し、2行を同時にスライドというイメージです。
現在はいろいろ自分なりに調べ、slickを使用しておりますが、ほかのライブラリを使用することで実装が可能であれば
そちらの以降も検討しています。

HTML
1<html>
2  <head>
3  <title></title>
4  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css" />
5  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.min.css"/>
6
7  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
9
10 </head>
11 <body>
12  <ul class="slider">
13    <li><img src="apple.jpg"></li>
14    <li><img src="banana.jpg"></li>
15    <li><img src="lemon.jpg"></li>
16    <li><img src="pineapple.jpg"></li>
17    <li><img src="peach.jpg"></li>
18    <li><img src="grape.jpg"></li>
19  </ul>
20
21  <script type="text/javascript">
22    $(document).ready(function(){
23  $('.slider').slick({
24    autoplay: true,
25    infinite: true,
26    slidesToShow: 3,
27    slidesToScroll: 1,
28    prevArrow: '<div class="slick-prev"></div>',
29    nextArrow: '<div class="slick-next"></div>',
30    dots: true,
31    responsive: [
32      {
33      breakpoint: 769,
34      settings: {
35        slidesToShow: 4,
36        slidesToScroll: 4,
37      }
38    }
39  ]
40  });
41  </script>
42 </body>
43</html>

横並びに表示することはできたのですが、769以下の時に4つ表示することは出来ても
2段に表示させ、さらにスライドすることができず悩んでいます。
拙い説明で申し訳ございませんが、ご教授いただけますでしょうか

Lhankor_Mhy

2021/07/27 09:49

ひとまず、 $(document).ready(function(){ を閉じ忘れているようです。

onakapecomaru

2021/07/27 22:23

そうですね…すみません書き忘れていました

Lhankor_Mhy

2021/07/28 01:22

いろいろ試してみましたが、上手くいきませんでした。お役に立てなさそうです、すみません。

onakapecomaru

2021/07/28 03:03

やはりそうですよね…いえいえとんでもございません。ご協力いただきありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

responsive で rows が動作しませんでしたので、メディアクエリを使ってみました。

js
1    var mql = window.matchMedia('(max-width: 769px)');
2
3    function init(mql) {
4      if (mql.matches) {
5        $('.slider').slick({
6          autoplay: true,
7          infinite: true,
8          slidesToScroll: 1,
9          prevArrow: '<div class="slick-prev"></div>',
10          nextArrow: '<div class="slick-next"></div>',
11          dots: true,
12          slidesToShow: 3,
13          rows: 2,
14          slidesPerRow: 1,
15        });
16      }
17      else {
18        $('.slider').slick({
19          autoplay: true,
20          infinite: true,
21          slidesToShow: 3,
22          slidesToScroll: 1,
23          prevArrow: '<div class="slick-prev"></div>',
24          nextArrow: '<div class="slick-next"></div>',
25          dots: true,
26        });
27      }
28    }
29
30    mql.addEventListener('change', e => {
31      $('.slider').slick('unslick');
32      init(e)
33    });
34
35    init(mql);
36