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

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

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

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

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

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

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

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

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

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

実装したいスライダー要件
・画像がどんなサイズでも縦横真ん中に配置される
・サムネイル画像はMAX5点で両サイド揃え、それ以下の場合はセンター揃え
・画像はHTML側で変更したいのでjsに画像の名前などは使用しない

デモサイトを作成しました。
上側が自動で画像が切り替わるスライダー(html内ではclass名main-image01)です。
下側が左右の矢印ボタンを押して画像を切り替えるスライダー(html内ではclass名main-image02)になります。

main-image02の方は表示する画像を4点にしました。

サムネイル画像をセンター揃えする指定を追加しておくと、画像点数が5点以下でも綺麗に見えますね!

また画像サイズがバラバラでも、左右中央に配置することで綺麗にレイアウトすることができました!
今回は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>
        </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>
        </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,
                centerInsufficientSlides: true, // センター揃え
            }
        }
    });
    // ナビゲーションボタンバージョン
    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,
                centerInsufficientSlides: true, // センター揃え
            }
        }
    });
});

 

おすすめのjQuery参考書はこちら!

 

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