Enjoy Halloween!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container"> <div class="slider"> <div class="slick-img"> <img src="item01.png" /> </div> <div class="slick-img"> <img src="item01.png" /> </div> <div class="slick-img"> <img src="item01.png" /> </div> <div class="slick-img"> <img src="item01.png" /> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.container { margin: 30px auto 0; width: 100%; } /* 中央以外のスライド */ .slick-img img { height: auto; opacity: 0.3; transform: scale(0.8); transition: opacity 0.5s, transform 0.5s; width: 100%; } /* 中央のスライド */ .slider .slick-center img { opacity: 1; transform: scale(1); } |
|
1 2 3 4 |
<!-- jQuery --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script> <!-- slickのJavaScript --> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> |
|
1 2 3 4 5 6 7 8 9 |
$(function () { $(".slider").slick({ autoplay: true, dots: true, centerMode: true, centerPadding: "0px", slidesToShow: 3, }); }); |
|
1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css" /> |
