Single Post
【swiper】スライダーにサムネイル表示
| Web
人気のスライダー【swiper.js】にサムネイルを表示させ、更に両サイドが少しづつ見えるカルーセルにカスタムする案件がありましたので、備忘録を兼ねて記載します。
サムネイルは、ギャラリーの中央にエフェクトを付けてメインスライダーの中央に表示されている写真が一目で分かるようにカスタムしています。
CDNを記述
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css
script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
※CDNによってはスライダーが動作しない場合があるかもしれません。上記のCDNではチェック済みです。
HTML
スライダーにサムネイルを付けたHTMLを記述します。
<div class="container">
<div id="slider" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/sl_01.jpg"></div>
<div class="swiper-slide"><img src="images/sl_02.jpg"></div>
<div class="swiper-slide"><img src="images/sl_03.jpg"></div>
<div class="swiper-slide"><img src="images/sl_04.jpg"></div>
<div class="swiper-slide"><img src="images/sl_05.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-blind-left"></div>
<div class="swiper-blind-right"></div>
</div>
<div id="thumbs" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/sl_01.jpg"></div>
<div class="swiper-slide"><img src="images/sl_02.jpg"></div>
<div class="swiper-slide"><img src="images/sl_03.jpg"></div>
<div class="swiper-slide"><img src="images/sl_04.jpg"></div>
<div class="swiper-slide"><img src="images/sl_05.jpg"></div>
</div>
</div>
</div><!-- / container end -->
CSS
スライダー全体や両サイドの少し見える画像へのエフェクト、そしてサムネイルのCSSを記述します。
.container {
position: relative;
margin:100px auto 60px auto;
max-width: 1100px;
}
.swiper-container{
text-align: center;
cursor: grab;
}
.swiper-container:active{
cursor: grabbing;
}
.swiper-container .swiper-slide img {
max-width: 100%;
width: 100%;
height: auto;
}
#thumbs {
height: 10%;
box-sizing: border-box;
padding: 10px 0;
}
#thumbs .swiper-slide {
width: 16%;
height: auto;
opacity: 0.3;
cursor: grab;
}
#thumbs .swiper-slide:active {
cursor: grabbing;
}
#thumbs .swiper-slide-active {
opacity: 1;
}
.swiper-blind-left,
.swiper-blind-right {
position: absolute;
width: 11.55%;
height: 100%;
display: block;
top: 0;
background: rgba(255,255,255,.7);
z-index: 5;
}
.swiper-blind-left {
left: 0;
}
.swiper-blind-right {
right: 0;
}
@media (max-width: 600px) {
.swiper-blind-left,.swiper-blind-right {
display: none;
}
}
JS
両サイドに少し画像の見えるカルーセルスライダーを作り、そしてサムネイル画像を表示させるJSを記述します。
var slider = new Swiper ('#slider', {
slidesPerView: 1,
autoplay: 5000,
loop: true,
loopedSlides: 6,
centeredSlides : true,
disableOnInteraction: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: '1.3',
breakpoints: {
600: {
slidesPerView: 1
}
}
})
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
loop: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true
});
slider.params.control = thumbs;
thumbs.params.control = slider;
サムネイルの表示、エフェクトにつきましてこちらのサイトを参考にさせて頂きました。
DEMOページのスライダーを見ていただくと矢印がFont Awesomeを使ってカスタマイズされていたと思います。以前、矢印カスタムについて記事にしておりますので、あわせて閲覧いただけると幸いです。
