【Swiper】サムネ＋プログレスバー付き、スライダー実装！

2023年8月27日2024年3月6日

実務で、メインビジュアルにサムネイルとプログレスバー付きスライダーを実装しましたので、
忘備録も兼ねて共有いたします！

demo
http://mtrad-test.net/takemura/slider/index.html

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />

</head>
<body>
    <div class="wrapper">
        <div class="slide-wrap-image">
            <div>
                <!-- スライダー -->
                <div class="swiper-container slider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./img/img01.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/img02.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/img03.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/img04.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/img05.jpg" alt=""></div>
                    </div>
                </div>
                <!-- プログレスバー -->
                <div class="progressbar"><span class="progressbar_in"></span></div>
            </div>
        </div>
        <div class="slide-wrap-thum">
            <div>
                <!-- サムネイル -->
                <div class="swiper-container slider-thumbnail">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./img/thum01.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/thum02.png" alt="">
                         </div>
                        <div class="swiper-slide">
                            <img src="./img/thum03.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/thum04.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./img/thum05.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
    <!-- swiper読み込み -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
	<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

    <script src="./base.js"></script>
</body>
</html>

SCSS



body{
    margin: 0;
    background-color: #f0a794;
}

.wrapper{
    max-width: 1000px;
    width: 90%;
    margin: auto;
}

.slide-wrap-image{
    width: 100%;
    height: 100%;
    position: relative;
    
    
    .swiper-slide {
        position: relative;
        opacity: 0;
        overflow: hidden;

        &::after {
            display: block;
            content: '';
            width: 100%;
            height: 0;
            padding-top: 55%;
        }

        img {
            position: absolute;
            left: 0;
            top: 0;
            object-fit: cover;
            width: 100%;
            height: 100%;
            transform: scale(1.1);
            transform-origin: center;
            transition: all 5s cubic-bezier(0.1, 0.5, 0.5, 1);
        }
    }

    .swiper-slide-visible,
    .swiper-slide-duplicate-active {
        opacity: 1;

        img {
            transform: scale(1);
        }
    }
    

    .progressbar{
        position: relative;
        width: 100%;
        height: 3px;
        background: #ccc;
        overflow: hidden;

        span{
         display: inline-block;
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         width: 100%;
         background: #f04c2f;
         border-radius: 7px;
         transform: scaleX(0);
         transform-origin: left center;
         transition-timing-function: linear;
        }

    }


}

.slide-wrap-thum{
    margin: 20px auto 0;
    overflow: hidden;
    .swiper-slide-thumb-active{
        opacity: 0.5;
    }
    .swiper-slide{
        cursor: pointer;
        img{
            width: 100%;
        }
    }
}

JS



$(function(){
    //サムネイル
    var sliderThumbnail = new Swiper('.slider-thumbnail', {
        slidesPerView: 5,
        freeMode: true,
        spaceBetween: 20,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        breakpoints: { 
            768: {
              slidesPerView: 5,
            },
        },
    });
    // バー
        var bar = document.querySelector('.progressbar_in');
        var speed = 5000;
    //スライダー
        var slider = new Swiper('.slider', {
        autoplay: {
            delay: 5000,
            disableOnInteraction: false
        },
        loop: true,
        speed: 1000,
        effect: 'fade',
        loopAdditionalSlides: 1,
        thumbs: {
            swiper: sliderThumbnail
        },
        on: {
            slideChangeTransitionStart: () => {
              bar.style.transitionDuration = "0s";
              bar.style.transform = "scaleX(0)";
            },
            slideChangeTransitionEnd: () => {
                bar.style.transitionDuration = speed + 'ms',
                bar.style.transform = "scaleX(1)";
            },
          },
    });
});

URLをコピーしました！

【Swiper】サムネ＋プログレスバー付き、スライダー実装！

HTML

SCSS

JS

関連記事