Swiper Center Thumbnail Slider

script.js

//メインスライド
var slider = new Swiper ('.gallery-slider', {
    slidesPerView: 1,
    centeredSlides: true,
    loop: true,
    loopedSlides: 6, //スライドの枚数と同じ値を指定
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

//サムネイルスライド
var thumbs = new Swiper ('.gallery-thumbs', {
    slidesPerView: 'auto',
    spaceBetween: 10,
    centeredSlides: true,
    loop: true,
    slideToClickedSlide: true,
});

//3系
//slider.params.control = thumbs;
//thumbs.params.control = slider;

//4系～
slider.controller.control = thumbs;
thumbs.controller.control = slider;

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>

style.scss

body {
    background-color: #2f3640;
}

.gallery {
    width: 100%;
    max-width: 620px;
    margin: 40px auto;
    
    //メインスライド
    &-slider {
        width: 100%;
        height: auto;
        margin: 0 0 10px 0;

        .swiper-slide {
            width: auto;
            height: 400px;
            
            img {
                display: block;
                width: auto;
                height: 100%;
                margin: 0 auto;
            }
        }
    }
    
    //サムネイルスライド
    &-thumbs {
        width: 100%;
        padding: 0;
        overflow: hidden;

        .swiper-slide {;
            width: 100px;
            height: 100px;
            text-align: center;
            overflow: hidden;
            opacity: .1;
            
            &-active {
                opacity: 1;
            }
            
            img {
                width: auto;
                height: 100%;
            }
        }
    }
}

styles

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

Swiper Center Thumbnail Slider.html

<div class="gallery">                
    <div class="swiper-container gallery-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample010.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample005.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample012.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample007.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample008.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample009.jpg" alt=""></div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample010.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample005.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample012.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample007.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample008.jpg" alt=""></div>
            <div class="swiper-slide"><img src="//into-the-program.com/demo/images/sample009.jpg" alt=""></div>
        </div>
    </div>
</div>

swiper-center-thumbnail-slider.markdown

Swiper Center Thumbnail Slider

A Pen by ryohei on CodePen.

License.