<!--  

【CSSの読み込み】
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

【JavaScript の読み込み】
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

-->

<div class="slider">
  <div class="slide">
    <img src="https://soya-blog.com/wp-content/uploads/2024/02/slide-animal-01.png"/>
  </div>
  <div class="slide">
    <img src="https://soya-blog.com/wp-content/uploads/2024/02/slide-animal-02.png"/>
  </div>
  <div class="slide">
    <img src="https://soya-blog.com/wp-content/uploads/2024/02/slide-animal-03.png"/>
  </div>
  <div class="slide">
    <img src="https://soya-blog.com/wp-content/uploads/2024/02/slide-animal-04.png"/>
  </div>
  <div class="slide">
    <img src="https://soya-blog.com/wp-content/uploads/2024/02/slide-animal-05.png"/>
  </div>
  <div class="slide">
    <img src="https://soya-blog.com/wp-content/uploads/2024/02/slide-animal-06.png"/>
  </div>
</div>
.slide img {
  width: 100%;
  height: 100%;
}
$(function(){
  $('.slider').slick({
    //自動でスクロール true：する false：しない
    autoplay: true, 
    
    //無限ループをするなら0
    autoplaySpeed: 0,
    
    //スライドが流れる速度 (7秒 = 7000)
    speed: 7000, 
    
    //スライドの動く速度 linear = 等速
    cssEase: "linear", 
    
    //表示させるスライド数
    slidesToShow: 4, 
    
    //矢印の表示 true：する false：しない
    arrows: false, 
    
    //スワイプ出来るようにするか true：する false：しない
    swipe: false, 
    
    //スライダーを停止させるか true：する false：しない
    pauseOnFocus: false, //フォーカスした時
    pauseOnHover: false, //マウスホバーした時
    
    //レスポンシブの指定
    responsive: [
      {
        breakpoint: 767,
        settings: {
          //画面幅767px以下ではスライドを3枚表示
          slidesToShow: 3, 
        }
      }
    ]
  });
});

External CSS

  1. https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css

External JavaScript

  1. https://code.jquery.com/jquery-3.7.1.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js