画像が左右にながれていきます
ヘッド内に下を書いて
<link rel="stylesheet" type="text/css" href="slick.css" />
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script type="text/javascript">
$(function() {
$('.slick-box4').slick({
centerMode: true,
centerPadding: '30px',
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 1
}
}]
});
});
</script>
</head>
-----------------------------
bodyに打田を書きます
<ul class="slick-box4">
<li><img src="pic/pic1.JPG" width="100%" height="auto" alt="slide_01"/></li>
<li><img src="pic/pic2.JPG" width="100%" height="auto" alt="slide_02"/></li>
<li><img src="pic/pic3.JPG" width="100%" height="auto" alt="slide_03"/></li>
<li><img src="pic/pic4.JPG" width="100%" height="auto" alt="slide_04"/></li>
</ul>