Module «slider-preview». Слайдер с превьюшками

Демо:

https://codepen.io/ildar-meyker/pen/NWBxJzW

Плагины:

https://jquery.com

https://swiperjs.com/

Подключение:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

Разметка:

<div class="slider-preview">
    <div class="slider-preview__main">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="image-box slider-preview__main__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=1"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__main__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=2"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__main__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=3"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__main__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=4"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__main__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=5"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__main__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=6"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__main__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=7"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="slider-preview__main__btns">
            <button class="btn-circle slider-preview__prev">
                <svg class="icon flip-x">
                    <use
                        xlink:href="img/icons/general/sprite.svg#arrow-right"
                    ></use>
                </svg>
            </button>
            <button class="btn-circle slider-preview__next">
                <svg class="icon">
                    <use
                        xlink:href="img/icons/general/sprite.svg#arrow-right"
                    ></use>
                </svg>
            </button>
        </div>
    </div>
    <div class="slider-preview__thumbs">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="image-box slider-preview__thumbs__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=1"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__thumbs__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=2"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__thumbs__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=3"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__thumbs__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=4"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__thumbs__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=5"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__thumbs__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=6"
                        />
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="image-box slider-preview__thumbs__image">
                        <img
                            src="https://loremflickr.com/1000/500/university?lock=7"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="slider-preview__edge slider-preview__edge--l"></div>
        <div class="slider-preview__edge slider-preview__edge--r"></div>
        <div class="slider-preview__thumbs__btns">
            <button class="btn-circle slider-preview__prev">
                <svg class="icon flip-x">
                    <use
                        xlink:href="img/icons/general/sprite.svg#arrow-right"
                    ></use>
                </svg>
            </button>
            <button class="btn-circle slider-preview__next">
                <svg class="icon">
                    <use
                        xlink:href="img/icons/general/sprite.svg#arrow-right"
                    ></use>
                </svg>
            </button>
        </div>
    </div>
</div>

Стили:

// blocks/sliders/slider-preview.scss

.slider-preview {
    &__main {
        position: relative;

        &__image {
            padding-top: 63.95%;

            img {
                border-radius: 2rem;
            }
        }
    }

    &__thumbs {
        position: relative;
        margin-top: 1.2rem;

        &__image {
            padding-top: 81.73%;
            opacity: 0.4;

            img {
                border-radius: 2rem;
            }
        }

        &__btns {
            display: none;
        }

        .swiper-slide {
            margin-right: 1.2rem;
            width: 20%;

            &:last-child {
                margin-right: 0;
            }
        }

        .swiper-slide-thumb-active {
            .slider-preview__thumbs__image {
                opacity: 1;
            }
        }
    }

    &__prev,
    &__next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
    }

    &__prev {
        left: -0.5em;
    }

    &__next {
        right: -0.5em;
    }

    &__edge {
        width: 10%;
        position: absolute;
        z-index: 10;
        top: 0;
        height: 100%;
        display: none;
        pointer-events: none;

        &.active {
            display: block;
        }

        &--l {
            background: linear-gradient(to right, #fff, rgba(#fff, 0));
            left: 0;
        }

        &--r {
            background: linear-gradient(to left, #fff, rgba(#fff, 0));
            right: 0;
        }
    }
}

@media (max-width: 999.98px) {
}

Инициализация:

// slider-preview.js

$(function () {
    const activeClass = "active";

    $(`.slider-preview`).each(function () {
        const $main = $(this).find(`.slider-preview__main`);
        const $thumbs = $(this).find(`.slider-preview__thumbs`);

        const $edgeL = $thumbs.find(`.slider-preview__edge--l`);
        const $edgeR = $thumbs.find(`.slider-preview__edge--r`);

        const updateEdges = function (swiper) {
            $edgeL.toggleClass(activeClass, !swiper.isBeginning);
            $edgeR.toggleClass(activeClass, !swiper.isEnd);
        };

        const thumbsSlider = new Swiper($thumbs.find(".swiper")[0], {
            slidesPerView: "auto",
            watchSlidesProgress: true,
            freeMode: true,
            navigation: {
                nextEl: $thumbs.find(`.slider-preview__next`)[0],
                prevEl: $thumbs.find(`.slider-preview__prev`)[0],
            },
            on: {
                afterInit: updateEdges,
                transitionStart: updateEdges,
                sliderMove: updateEdges,
            },
        });

        new Swiper($main.find(".swiper")[0], {
            thumbs: {
                swiper: thumbsSlider,
            },
            navigation: {
                nextEl: $main.find(`.slider-preview__next`)[0],
                prevEl: $main.find(`.slider-preview__prev`)[0],
            },
        });
    });
});