【Swiper】サムネイル付き画像スライダーの作り方

今回は、Swiperを使ってサムネイル付き画像スライダーの作り方について紹介します。

コピペできるので、是非真似してみてください。

【Swiper】サムネイル付き画像スライダーの作り方

完成形はこちら。

Swiperを使う準備

Swiperを使うための準備をしていきましょう。

準備は以下のコードを読み込むだけです。

◎headタグ内に書く

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

◎bodyタグの直前に書く

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

jQueryとSwiperのCDNを読み込みます。

HTML

<div class="Swiper">
    <div class="swiper-container Swiper-Container">
        <!-- 上のサムネイルブロック -->
        <div class="swiper-wrapper Swiper-Container-Wrapper">
            <div class="swiper-slide Swiper-Container-Wrapper-Slide">
                <div class="Swiper-Container-Wrapper-Slide-ImgBox">
                    <div class="Swiper-Container-Wrapper-Slide-ImgBox-Img"
                        style="background:url('./image/img1.jpg') no-repeat;background-size:cover;background-position:center;">
                    </div>
                </div>
            </div>
            <div class="swiper-slide Swiper-Container-Wrapper-Slide">
                <div class="Swiper-Container-Wrapper-Slide-ImgBox">
                    <div class="Swiper-Container-Wrapper-Slide-ImgBox-Img"
                        style="background:url('./image/img2.jpg') no-repeat;background-size:cover;background-position:center;">
                    </div>
                </div>
            </div>
            <div class="swiper-slide Swiper-Container-Wrapper-Slide">
                <div class="Swiper-Container-Wrapper-Slide-ImgBox">
                    <div class="Swiper-Container-Wrapper-Slide-ImgBox-Img"
                        style="background:url('./image/img3.jpg') no-repeat;background-size:cover;background-position:center;">
                    </div>
                </div>
            </div>
            <div class="swiper-slide Swiper-Container-Wrapper-Slide">
                <div class="Swiper-Container-Wrapper-Slide-ImgBox">
                    <div class="Swiper-Container-Wrapper-Slide-ImgBox-Img"
                        style="background:url('./image/img4.jpg') no-repeat;background-size:cover;background-position:center;">
                    </div>
                </div>
            </div>
        </div>

        <!-- ページボタン -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 下のサムネイルブロック -->
        <div class="swiper-my-pagination Swiper-Container-Pagination"></div>
    </div>
</div>

CSS

// Swiper
.Swiper {
            width: 100%;
            flex-basis: 48%;
            .swiper-container {
                max-width: 500px;
                .swiper-wrapper {
                    .swiper-slide {
                        .Swiper-Container-Wrapper-Slide-ImgBox {
                            width: 100%;
                            .Swiper-Container-Wrapper-Slide-ImgBox-Img {
                                padding-top: 100%;
                            }
                        }
                    }
                }
                .swiper-my-pagination {
                    display: flex;
                    width: 100%;
                }
            }
        }

// サムネイル画像の設定
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.Swiper-Container-Pagination-ImgBox  {
    width: 100%;
    height: 100%;
    opacity: 0.6; 
    margin: 40px 0 0 40px;
    border-radius: 0;
    background: #121212;
    &:first-child {
        margin-left: 0px;
    }
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.Swiper-Container-Pagination-ImgBox.swiper-pagination-bullet-active {
  opacity: 1; 
}
.Swiper-Container-Pagination-ImgBox-Img {
  width: 100%;
  padding-top: 100%;
}

// ページボタン
.swiper-button-prev,
.swiper-button-next {
  width: 32px;
  height: 32px;
  margin-top: -16px;
}

// サムネイル画像のスライダー
$(function () {
    // Swiperの設定
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true,
        pagination: {
            el: '.swiper-my-pagination',
            clickable: true,
            renderBullet: function (index, className) {
                // 下のサムネイルブロックを出力
                return '<div class="' + className + ' Swiper-Container-Pagination-ImgBox"><div class="Swiper-Container-Pagination-ImgBox-Img" style="background:url(./image/img' + (index + 1) + '.jpg) no-repeat;background-size:cover;background-position:center;">' + '</div></div>';
            },
        },
    });
});