jQery「slick」でPC時は画像3枚表示、レスポンシブでは1枚表示に変更する記述。

Question

お世話になります。
jQery「slick」でPC時は画像3枚表示、レスポンシブでは1枚表示に変更する記述をご教示いただきたいです。
レスポンシブ時はjsの　slidesToShow: 3,を1にしたいのですが、「レスポンシブの時は」の記述がわかりません。
よろしくお願いいたします。

<ul class="slick_photo">

    <li class="slick-slide_photo">
      <img src="image/" alt="">
    </li>
    <li class="slick-slide_photo">
      <img src="image/" alt="">
    </li>
    <li class="slick-slide_photo">
      <img src="image/" alt="">
    </li>
    <li class="slick-slide_photo">
      <img src="image/" alt="">
    </li>
  </ul>

<script> $('.slick_photo').slick({ //クラス名変更する autoplay: true, //自動再生 autoplaySpeed: 3000, //自動再生のスピード speed: 1000, //スライドするスピード dots: true, //スライドしたのドット arrows: true, //左右の矢印 infinite: true, //スライドのループ pauseOnHover: false, //ホバーしたときにスライドを一時停止しない　 slidesToShow: 3, prevArrow: '<img src="image/photo_slide_arrow_01.png" class="slide-arrow prev-arrow">', nextArrow: '<img src="image/photo_slide_arrow_02.png" class="slide-arrow next-arrow">', }); </script>

```CSS

/* スライド */
.slick_photo {
width: 100%;
position: relative;
}

.slick-slide_photo img {
height: 380px;
object-fit: cover;
width: 100%;
}

/* 矢印とドットの設定 */
.slide-arrow {
bottom: 0;
margin: auto;
position: absolute;
top: 0;
}

.prev-arrow {
left: 0px;
width: 30px;
height: 15px;
z-index: 100;
}

.next-arrow {
right: 0px;
width: 30px;
height: 15px;
}

.slick-dots {
bottom: -50px !important;
}

.slick-dots li {
width: 58px !important;
margin-right: 5px !important;
}

.slick-dots li button {
border: 0;
margin: 0;
padding: 0;
width: 58px !important;
}

Answer 1

こちらが参考になりそうです。

responsive | slick - にほんご。

Comments

[yuko2430]

ありがとうございました。無事解決しました。