Module «slider-titles». Слайдер: заголовок, кнопка, картинка

Демо:

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

Плагины:

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>

Разметка:

//



<div class="swiper slider-titles">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="slide-title">
                <div
                    class="slide-title__image"
                    style="background-image: url(img/temp/slide-title/1.png)"
                ></div>
                <div class="slide-title__title">
                    Электровентиляторы
                    <br />
                    охлаждения
                </div>
                <div class="slide-title__btn">
                    <a href="#" class="btn-more">
                        <span>Подробнее</span>
                        <svg class="icon">
                            <use
                                xlink:href="img/sprite-icons.svg#arrow-rounded-right"
                            ></use>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-title">
                <div
                    class="slide-title__image"
                    style="background-image: url(img/temp/slide-title/1.png)"
                ></div>
                <div class="slide-title__title">
                    Электровентиляторы
                    <br />
                    охлаждения
                </div>
                <div class="slide-title__btn">
                    <a href="#" class="btn-more">
                        <span>Подробнее</span>
                        <svg class="icon">
                            <use
                                xlink:href="img/sprite-icons.svg#arrow-rounded-right"
                            ></use>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="slide-title">
                <div
                    class="slide-title__image"
                    style="background-image: url(img/temp/slide-title/1.png)"
                ></div>
                <div class="slide-title__title">
                    Электровентиляторы
                    <br />
                    охлаждения
                </div>
                <div class="slide-title__btn">
                    <a href="#" class="btn-more">
                        <span>Подробнее</span>
                        <svg class="icon">
                            <use
                                xlink:href="img/sprite-icons.svg#arrow-rounded-right"
                            ></use>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

Стили:

//

.slide-title {
    position: relative;
    background: #204a8f;
    border-radius: 13px;
    height: 360px;
    padding: 3.2rem;

    &__image {
        position: absolute;
        width: 60%;
        max-width: 560px;
        top: 0;
        bottom: 0;
        right: 0;
        background: no-repeat 50% 50% / contain;
    }
    &__title {
        position: relative;
        margin-top: 3.2rem;
        font-weight: 600;
        font-size: 3rem;
        line-height: calc(35 / 30);
        letter-spacing: 0.02em;
        color: #ffffff;
    }
    &__btn {
        position: relative;
        margin-top: 5rem;
    }
}

.slider-titles {
    .swiper-pagination {
        width: auto !important;
        bottom: 5rem !important;
        left: 6rem !important;
    }
    .swiper-pagination-bullet {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0 0.9rem !important;
        background: rgba(217, 217, 217, 0.5);
    }

    .swiper-pagination-bullet-active {
        background: #d9d9d9;
    }
}

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

//

$(function () {
    $(".slider-titles").each(function () {
        new Swiper(this, {
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
            },
        });
    });
});