<!--
【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>
$(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,
}
}
]
});
});
