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

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

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

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

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

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

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

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

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

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

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>
        </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参考書はこちら！

Web制作の現場で使うjQueryデザイン入門改訂新版

posted with ヨメレバ

西畑一馬 アスキー・メディアワークス 2013年03月

楽天ブックス

Amazon

7net

honto

ebookjapan

jQuery 仕事の現場でサッと使える！ デザイン教科書

posted with ヨメレバ

吉本集著/ロクナナワークショップ監修 技術評論社 2015年04月

楽天ブックス

Amazon

7net

honto

jQuery最高の教科書

posted with ヨメレバ

シフトブレイン SBクリエイティブ 2013年11月27日頃

楽天ブックス

Amazon

7net

honto

ebookjapan