Swiper Data Attribute Thumbs sample 01
HTML
<!-- メインのスライダー（data-* 属性を指定）-->
<div class="swiper main-slider" data-loop="true" data-slides-per-view="1.3" data-centered-slides="true">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/swiper_img_01.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_02.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_03.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_04x.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_05.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_06.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_07.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_08.jpg" alt="" />
</div>
</div>
<!-- end of .swiper-wrapper -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- end of .swiper.main-slider -->
<!-- サムネイルのスライダー（data-* 属性を指定）-->
<div class="swiper thumbs-slider" data-slides-per-view="5" data-space-between="5">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/swiper_img_01.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_02.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_03.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_04x.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_05.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_06.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_07.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="images/swiper_img_08.jpg" alt="" />
</div>
</div>
<!-- end of .swiper-wrapper -->
</div>
<!-- end of .swiper.thumbs-slider -->
CSS
* {
box-sizing: border-box;
}
.swiper-slide img {
max-width: 100%;
}
/* メインのスライダーのアクティブでないものは不透明度を 0.6 に */
.swiper-slide {
opacity: 0.6;
}
/* メインのスライダーでアクティブなもの（現在表示されている）は不透明度を 1 に */
.swiper-slide.swiper-slide-active {
opacity: 1;
}
/* サムネイルでアクティブなものには枠線を表示 */
.thumbs-slider .swiper-slide-thumb-active img {
border: 4px solid #F6B5B6;
}
/* アクティブでないサムネイル */
.thumbs-slider .swiper-slide {
opacity: 0.8;
}
/* アクティブなサムネイル */
.thumbs-slider .swiper-slide-thumb-active {
opacity: 1;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #fff;
}
JavaScript
//main-slider クラスを指定した要素を取得
const mainSliders = document.getElementsByClassName('main-slider');
//thumbs-slider クラスを指定した要素を取得
const thumbsSliders = document.getElementsByClassName('thumbs-slider');
//サムネイルのスライダーのインスタンスを格納する配列
const mySwiperThumbsArray = [];
//サムネイルとメインのスライダーの数が同じであれば、以下を実行
if(mainSliders && thumbsSliders && mainSliders.length > 0 && thumbsSliders.length > 0 && mainSliders.length === thumbsSliders.length) {
//サムネイルの各スライダーへの処理
for ( let i=0; i<thumbsSliders.length; i++ ) {
//data 属性の値をパラメータの値として使用する変数に格納
let dataSpeed = thumbsSliders[i].getAttribute('data-speed'),
dataDirection = thumbsSliders[i].getAttribute('data-direction'),
dataAutoPlay = thumbsSliders[i].getAttribute('data-autoplay'),
dataLoop = thumbsSliders[i].getAttribute('data-loop'),
dataEffect = thumbsSliders[i].getAttribute('data-effect'),
dataSlidesPerView = thumbsSliders[i].getAttribute('data-slides-per-view'),
dataSlidesPerGroup = thumbsSliders[i].getAttribute('data-slides-per-group'),
dataSpaceBetween = thumbsSliders[i].getAttribute('data-space-between'),
dataCenteredSlides = thumbsSliders[i].getAttribute('data-centered-slides');
//data 属性が設定されていない場合は初期値（デフォルト）を設定及び型を変換
if (!dataSpeed) {
dataSpeed = 300;
}
if (!dataDirection) {
dataDirection = 'horizontal';
}
//data-autoplay が設定されていれば値を数値に変換し、設定されていなければ大きな値を設定
if (dataAutoPlay) {
dataAutoPlay = parseInt(dataAutoPlay);
} else {
dataAutoPlay = 999999999;
}
//真偽値の場合は文字列から真偽値に変換
if (dataLoop === 'true') {
dataLoop = true;
} else {
dataLoop = false;
}
if (!dataEffect) {
dataEffect = 'slide';
}
if (!dataSlidesPerView) {
//デフォルトではサムネイルは4枚表示
dataSlidesPerView = 4;
}
if (dataCenteredSlides === 'true') {
dataCenteredSlides = true;
} else {
dataCenteredSlides = false;
}
if (!dataSlidesPerGroup) {
dataSlidesPerGroup = 1;
}
if (!dataSpaceBetween) {
dataSpaceBetween = 0;
}
//サムネイルのスライダーのインスタンスを生成
let mySwiperThumbs = new Swiper(thumbsSliders[i], {
direction: dataDirection,
speed: parseInt(dataSpeed),
autoplay: {
delay: dataAutoPlay
},
loop: dataLoop,
effect: dataEffect,
slidesPerView: parseFloat(dataSlidesPerView),
centeredSlides: dataCenteredSlides,
slidesPerGroup: parseInt(dataSlidesPerGroup),
spaceBetween: parseInt(dataSpaceBetween),
//各スライドの進行状況を監視
watchSlidesProgress: true,
//ビューポートにあるスライドに表示クラスを追加
watchSlidesVisibility: true,
//カーソルをデフォルトから grab に変更
grabCursor: true,
});
//サムネイルのスライダーを格納する配列に追加
mySwiperThumbsArray.push(mySwiperThumbs);
}
//メインの各スライダーへの処理
for ( let i=0; i<mainSliders.length; i++ ) {
//data 属性の値をパラメータの値として使用する変数に格納
let mainDataSpeed = mainSliders[i].getAttribute('data-speed'),
mainDataDirection = mainSliders[i].getAttribute('data-direction'),
mainDataAutoPlay = mainSliders[i].getAttribute('data-autoplay'),
mainDataLoop = mainSliders[i].getAttribute('data-loop'),
mainDataEffect = mainSliders[i].getAttribute('data-effect'),
mainDataSlidesPerView = mainSliders[i].getAttribute('data-slides-per-view'),
mainDataSlidesPerGroup = mainSliders[i].getAttribute('data-slides-per-group'),
mainDataSpaceBetween = mainSliders[i].getAttribute('data-space-between'),
mainDataCenteredSlides = mainSliders[i].getAttribute('data-centered-slides');
//data 属性が設定されていない場合は初期値（デフォルト）を設定及び型を変換
if (!mainDataSpeed) {
mainDataSpeed = 300;
}
if (!mainDataDirection) {
mainDataDirection = 'horizontal';
}
//data-autoplay が設定されていれば値を数値に変換し、設定されていなければ大きな値を設定
if (mainDataAutoPlay) {
mainDataAutoPlay = parseInt(mainDataAutoPlay);
} else {
mainDataAutoPlay = 999999999;
}
//真偽値の場合は文字列から真偽値に変換
if (mainDataLoop === 'true') {
mainDataLoop = true;
} else {
mainDataLoop = false;
}
if (!mainDataEffect) {
mainDataEffect = 'slide';
}
if (!mainDataSlidesPerView) {
mainDataSlidesPerView = 1;
}
if (mainDataCenteredSlides === 'true') {
mainDataCenteredSlides = true;
} else {
mainDataCenteredSlides = false;
}
if (!mainDataSlidesPerGroup) {
mainDataSlidesPerGroup = 1;
}
if (!mainDataSpaceBetween) {
mainDataSpaceBetween = 0;
}
//メインのスライダーのインスタンスを生成
let mySwiperMain = new Swiper(mainSliders[i], {
direction: mainDataDirection,
speed: parseInt(mainDataSpeed),
autoplay: {
delay: mainDataAutoPlay
},
loop: mainDataLoop,
effect: mainDataEffect,
slidesPerView: parseFloat(mainDataSlidesPerView),
centeredSlides: mainDataCenteredSlides,
slidesPerGroup: parseInt(mainDataSlidesPerGroup),
spaceBetween: parseInt(mainDataSpaceBetween),
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
//配列に格納されているサムネイルのスライダーを指定
swiper: mySwiperThumbsArray[i]
},
});
}
}