Module «slider-stories». Слайдер историй

Демо:

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

Плагины:

https://jquery.com/

https://swiperjs.com/

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

//



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

Разметка:

//


<section class="slider-stories">
    <div class="slider-stories__header">
        <div class="slider-stories__title">
            <h2 class="page__h2">Истории</h2>
        </div>
        <div class="slider-stories__btns">
            <div class="arrows">
                <button class="arrows__btn-prev">
                    <svg class="icon flip-x">
                        <use
                            xlink:href="img/sprite-icons.svg#arrow-right"
                        ></use>
                    </svg>
                </button>
                <button class="arrows__btn-next">
                    <svg class="icon">
                        <use
                            xlink:href="img/sprite-icons.svg#arrow-right"
                        ></use>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="slider-stories__crop">
        <div class="swiper slider-stories__slider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/1.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/2.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/3.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/1.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/2.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/3.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/1.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/2.jpg" alt="" />
                        </span>
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="#" class="slider-stories__image">
                        <span
                            class="image-box image-box--cover"
                            style="padding-top: 153.76%"
                        >
                            <img src="img/temp/slider-stories/3.jpg" alt="" />
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

Стили:

//

.slider-stories {
    &__header {
        display: flex;
        align-items: center;
        margin-bottom: 3rem;
    }

    &__title {
    }

    &__btns {
        margin-left: auto;
    }

    &__crop {
        overflow: hidden;
    }

    &__slider {
        margin: 0 -0.7rem;

        .swiper-slide {
            width: 16.66%;
            padding: 0 0.7rem;
        }
    }

    &__image {
        transition: all 0.2s;
        position: relative;
        display: block;
        border-radius: 1.6rem;
        overflow: hidden;

        body > &:hover {
            transform: scale(1.15);
            box-shadow: 0 0 0 0.66rem #204a8f;

            &:before {
                opacity: 0;
            }
        }

        &:before {
            transition: all 0.2s;
            content: " ";
            @include fill;
            z-index: 10;
            background: #000;
            opacity: 0.4;
        }
    }
}

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

//

let zIndex = 0;

$(function () {
    $(".slider-stories").each(function () {
        const sliderEl = $(this).find(".slider-stories__slider")[0];
        new Swiper(sliderEl, {
            slidesPerView: "auto",
            navigation: {
                nextEl: $(this).find(".arrows__btn-next")[0],
                prevEl: $(this).find(".arrows__btn-prev")[0],
            },
        });
    });

    $(document).on(
        "mouseenter",
        ".slider-stories .slider-stories__image",
        function () {
            const offset = $(this).offset();

            $(this)
                .clone()
                .appendTo($("body"))
                .css({
                    position: "absolute",
                    width: $(this).width(),
                    height: $(this).height(),
                    ...offset,
                    zIndex: ++zIndex,
                });
        }
    );

    $(document).on("mouseleave", "body > .slider-stories__image", function () {
        setTimeout(() => {
            $(this).remove();
        }, 200);
    });
});