<head> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" /> </head> <body> <main> <div class="slider"> <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt="スライドショー画像1"></div> <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt="スライドショー画像2"></div> <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt="スライドショー画像3"></div> <div><img class="slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt="スライドショー画像4"></div> </div> <div class="thumbnail-slider"> <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt="スライドショー画像1"></div> <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt="スライドショー画像2"></div> <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt="スライドショー画像3"></div> <div><img class="thumbnail-slider-img" src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt="スライドショー画像4"></div> </div> </main> <footer> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> </footer> </body>
.slider, .thumbnail-slider { max-width: 480px; } .slider-img { width: 100%; height: 240px; object-fit: cover; } .thumbnail-slider-img { width: 100%; height: 60px; object-fit: cover; position: relative; } .slick-arrow { &.slick-prev { left: 10px; z-index: 1; } &.slick-next { right: 10px; z-index: 1; } }
$('.slider').slick({ asNavFor: ".thumbnail-slider", infinite: true, slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, }); $('.thumbnail-slider').slick({ slidesToShow: 4, asNavFor: ".slider", focusOnSelect: true, infinite: true, slidesToShow: 3, slidesToScroll: 1, centerMode: true, autoplay: true, autoplaySpeed: 4000, speed: 400, });