Loading...

Single Post

HOME > post > Web > 【swiper】スライダーにサムネイル表示

【swiper】スライダーにサムネイル表示

| Web
ウェブ制作イメージ

人気のスライダー【swiper.js】にサムネイルを表示させ、更に両サイドが少しづつ見えるカルーセルにカスタムする案件がありましたので、備忘録を兼ねて記載します。

サムネイルは、ギャラリーの中央にエフェクトを付けてメインスライダーの中央に表示されている写真が一目で分かるようにカスタムしています。

CDNを記述

[html]
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css
[/html]

[html]
script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
[/html]

※CDNによってはスライダーが動作しない場合があるかもしれません。上記のCDNではチェック済みです。

HTML

スライダーにサムネイルを付けた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 –>

[/html]

CSS

スライダー全体や両サイドの少し見える画像へのエフェクト、そしてサムネイルの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;
}
}

[/css]

JS

両サイドに少し画像の見えるカルーセルスライダーを作り、そしてサムネイル画像を表示させるJSを記述します。

[html]

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;

[/html]

サムネイルの表示、エフェクトにつきましてこちらのサイトを参考にさせて頂きました。

DEMOページのスライダーを見ていただくと矢印がFont Awesomeを使ってカスタマイズされていたと思います。以前、矢印カスタムについて記事にしておりますので、あわせて閲覧いただけると幸いです。

【SWIPER.JS】スライダーの矢印カスタム

関連記事

Contact Page