デモ
See the Pen slider3 by logsuke (@design-list) on CodePen.
コード
<!-- swiper head内 -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
<div class="swiper-container">
<div class="swiper slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://placehold.jp/d1854e/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/4ed173/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/d14eb3/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/4e59d1/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/d14e73/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/854ed1/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/a1d14e/ffffff/600x350.png" alt=""></div>
</div>
</div>
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
<div thumbsSlider="" class="swiper thumbnail">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://placehold.jp/d1854e/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/4ed173/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/d14eb3/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/4e59d1/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/d14e73/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/854ed1/ffffff/600x350.png" alt=""></div>
<div class="swiper-slide"><img src="https://placehold.jp/a1d14e/ffffff/600x350.png" alt=""></div>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
/*=== Base ===*/
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
:root {
--nav-height: 8rem;
--max-width: 1024px;
--container-padding: 0 4rem;
--gap: 2rem;
--bg-color: rgb(240, 240, 240);
--first-color: rgb(172, 245, 255);
}
/*=== Font ratio ===*/
html {
scroll-behavior: smooth;
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.section {
/* width: 100%;
max-width: var(--max-width);
height: 100vh;
margin: 0 auto;
background: #ccc; */
}
/* swiper */
.swiper-container {
position: relative;
margin: 0 auto;
width: 600px;
padding: 0 50px;
}
.swiper {
width: 100%;
}
.swiper-wrapper {
width: 100%;
margin-top: 2rem !important;
display: flex;
align-items: center;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* thumbnail */
.thumbnail .swiper-wrapper {
width: 100%;
margin-top: 2rem !important;
display: flex;
align-items: center;
}
.thumbnail .swiper-slide {
opacity: .4;
}
.swiper-slide-thumb-active {
opacity: 1 !important;
}
var thumbnail = new Swiper(".thumbnail", {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
watchSlidesVisibility: true,
loop: true,
});
var swiper = new Swiper('.slider', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
spaceBetween: 10,
thumbs: {
swiper: thumbnail,
}
});