Swiper.jsを使ったサムネイル画像付きのスライダーの実装方法

Swiper.jsを使ったサムネイル画像付きのスライダーの実装方法

スライダーが簡単に実装できるSwiper.js

簡単にスライダーが実装できることで有名なSwiperですが、サムネイル画像付きで自分の思い描いていた動きを実装するのに少し苦労したので、忘れないようにこちらにもメモとして残しておきたいと思います。

Swiper.jsの公式サイトはこちら

ダウンロードページから必要なバージョンをダウンロードします。
今回私は4.5.0を使用しました。

swiper.min.cssはここにあります。cssで使用するデータはこちらのみです。

swiper.min.jsはここにあります。jsで使用するデータはこちらのみです。

公式サイトにはさまざまなバリエーションのスライダーが紹介されています。
デモページはこちら
こちらで希望のスライダーはかなり網羅できているんじゃないかなぁと思います。

サムネイル付きのスライダーをSwiperで実装してみた

実装したいスライダー要件
・画像がどんなサイズでも縦横真ん中に配置される
・サムネイル画像の位置は両サイドいっぱいで揃えて固定
・画像はHTML側で変更したいのでjsに画像の名前などは使用しない

デモサイトを作成しました。
上側が自動で画像が切り替わるスライダー(html内ではclass名main-image01)です。
下側が左右の矢印ボタンを押して画像を切り替えるスライダー(html内ではclass名main-image02)になります。
画像サイズがバラバラでも左右中央に配置して綺麗に配置することができました!
今回は800px×600px(4対3)で画像が画面いっぱいになるように指定しました。

DEMO

HTML

CSSとjsの指定がそれぞれ必要なので分けていますが、内容は同じです。

<div class="main-image01">
    <div class="swiper-container main-image01__body">
        <ul class="swiper-wrapper main-image01__list">
            <li class="swiper-slide main-image01__item">
                <img src="img/main_img01.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01__item">
                <img src="img/main_img02.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01__item">
                <img src="img/main_img03.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01__item">
                <img src="img/main_img04.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01__item">
                <img src="img/main_img05.jpg" width="800" height="600" alt="">
            </li>
        </ul>
    </div>
    <div class="swiper-container main-image01-thumbs">
        <ul class="swiper-wrapper main-image01-thumbs__list">
            <li class="swiper-slide main-image01-thumbs__item">
                <img src="img/main_img01.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01-thumbs__item">
                <img src="img/main_img02.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01-thumbs__item">
                <img src="img/main_img03.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01-thumbs__item">
                <img src="img/main_img04.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image01-thumbs__item">
                <img src="img/main_img05.jpg" width="800" height="600" alt="">
            </li>
        </ul>
    </div>
</div>

<div class="main-image02">
    <div class="swiper-container main-image02__body">
        <ul class="swiper-wrapper main-image02__list">
            <li class="swiper-slide main-image02__item">
                <img src="img/main_img01.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02__item">
                <img src="img/main_img02.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02__item">
                <img src="img/main_img03.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02__item">
                <img src="img/main_img04.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02__item">
                <img src="img/main_img05.jpg" width="800" height="600" alt="">
            </li>
        </ul>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper-container main-image02-thumbs">
        <ul class="swiper-wrapper main-image-thumbs__list">
            <li class="swiper-slide main-image02-thumbs__item">
                <img src="img/main_img01.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02-thumbs__item">
                <img src="img/main_img02.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02-thumbs__item">
                <img src="img/main_img03.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02-thumbs__item">
                <img src="img/main_img04.jpg" width="800" height="600" alt="">
            </li>
            <li class="swiper-slide main-image02-thumbs__item">
                <img src="img/main_img05.jpg" width="800" height="600" alt="">
            </li>
        </ul>
    </div>
</div>

CSS

.main-image01,
.main-image02{
  margin: 50px auto;
  padding: 10px;
  max-width: 500px;
  border: 2px solid #eee;
  box-sizing: border-box;
}
.main-image01__item,
.main-image02__item{
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
/* メイン画像縦横中央に配置 */
.main-image01__item img,
.main-image02__item img{
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* 画像の比率4対3に指定 2対1の場合は50%にします */
.main-image01__item:after,
.main-image01-thumbs__item:after,
.main-image02__item:after,
.main-image02-thumbs__item:after{
  display: block;
  padding-top: 75%;
  content: '';
}
.main-image01-thumbs,
.main-image02-thumbs{
  width: 100%;
  padding: 10px 0 0;
  box-sizing: border-box;
}
.main-image01-thumbs__item,
.main-image02-thumbs__item{
  overflow: hidden;
  position: relative;
  background-color: #fff;
}
.main-image01-thumbs__item.swiper-slide,
.main-image02-thumbs__item.swiper-slide{
  opacity: 0.5;
}
.main-image01-thumbs__item.swiper-slide-thumb-active,
.main-image02-thumbs__item.swiper-slide-thumb-active{
  opacity: 1;
}
/* サムネイル画像画像縦横中央に配置 */
.main-image01-thumbs__item img,
.main-image02-thumbs__item img{
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/* 矢印の色を白に指定 */
.main-image02 .swiper-button-next{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23f5f5f5'%2F%3E%3C%2Fsvg%3E");
}
.main-image02 .swiper-button-prev{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23f5f5f5'%2F%3E%3C%2Fsvg%3E");
}

JS

公式サイトにもjsの指定方法が公開されています!

/**
 * swiper
 */
$(function(){
    // オートプレイバージョン
    var galleryTop = new Swiper('.main-image01__body', {
        effect:'fade',
        speed: 600,
        autoplay: {delay: 5000}, // スライドのスピードを指定
        thumbs: {
            swiper: {
                el: '.main-image01-thumbs',
                slidesPerView: 5, // サムネイル画像の枚数
                spaceBetween:5,
            }
        }
    });
    // ナビゲーションボタンバージョン
    var galleryTop = new Swiper('.main-image02__body', {
        loop: true, // 繰り返し指定
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: {
                el: '.main-image02-thumbs',
                slidesPerView: 5,
                spaceBetween:5,
            }
        }
    });
});
 

サイト制作カテゴリの最新記事