Эффектный слайдер с параллакс-эффектом, разработанный с применением библиотеки Swiper. Этот инструмент представляет собой увлекательное средство отображения контента с впечатляющей глубиной. Благодаря Swiper настройка и использование слайдера становятся простыми, что обеспечивает возможность создания привлекательных и красочных слайдов с параллакс-эффектом. Такой слайдер не только обеспечивает удобство при просмотре для пользователей, но и придает вашему веб-сайту интерактивности и динамичности.(ВНИМАНИЕ ИСПОЛЬЗОВАНА СТАРАЯ БИБЛИОТЕКА СЛАЙДЕРА)

HTML-Структура:

• .container-wrapper: Общий контейнер слайдера.
• .swiper-container: Основной контейнер Swiper с идентификатором slider-main.
• .swiper-wrapper: Контейнер для слайдов.
• .swiper-slide: Каждый слайд, содержащий изображение и блок .content.caption для дополнительного контента.

<div class="container-wrapper">
    <div class="swiper-container main-slider loading" id="slider-main">
        <div class="swiper-wrapper">
            <!-- Слайды -->
            <div class="swiper-slide">
                <div class="background-image">
                    <figure class="slide-bgimg" style="background-image:url('/wp-content/themes/packwp/assets/images/sliders/slide-1.jpg')">
                        <img class="entity-img" src="/wp-content/themes/packwp/assets/images/sliders/slide-1.jpg">
                    </figure>
                </div>
                <div class="content caption">
                    <!-- Дополнительный контент для слайда 1 -->
                </div>
            </div>
            <!-- Другие слайды аналогично -->
        </div>
        <!-- Навигационные кнопки -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>
</div>

JavaScript (Инициализация Swiper):

• Swiper инициализируется с определенными параметрами, такими как цикличность, скорость, автовоспроизведение и другие.
• Добавлены обработчики событий для управления поведением слайдера.
• Используется эффект параллакса: при прокрутке слайдера каждый слайд смещается на определенную долю ширины слайда.

document.addEventListener('DOMContentLoaded', function () {
    let mainSliderSelector = '.main-slider',
        interleaveOffset = 0.5;
    
    let mainSliderOptions = {
        // ... (параметры слайдера)
        on: {
            init: function () {
                this.autoplay.stop();
            },
            imagesReady: function () {
                this.el.classList.remove('loading');
                this.autoplay.start();
            },
            slideChangeTransitionEnd: function () {
                // Показывать подписи слайдов
            },
            progress: function () {
                // Эффект параллакса при прокрутке
            },
            // ... (другие обработчики событий)
        }
    };

    let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions);
});

Этот код приводит к созданию слайдера с эффектом параллакса, который автоматически прокручивает слайды и приостанавливает автовоспроизведение при инициализации. Также предусмотрены навигационные кнопки и отображение подписей при изменении слайдов.

Стили для слайдера

/* parallax */

[class^=swiper-button-] {
    transition: all 0.3s ease;
}

.swiper-slide {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.swiper-container {
    width: 100%;
    height: 600px;
    float: left;
    transition: opacity 0.6s ease, transform 0.3s ease;
}

.swiper-container.nav-slider .swiper-slide {
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
    opacity: 1;
}

.swiper-container.nav-slider .swiper-slide .content {
    width: 100%;
}

.swiper-container.nav-slider .swiper-slide .content .title {
    font-size: 20px;
}

.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.swiper-container.loading {
    opacity: 0;
    visibility: hidden;
}

.swiper-slide {
    overflow: hidden;
}

.swiper-slide .slide-bgimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.swiper-slide .entity-img {
    display: none;
}

.swiper-slide .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.swiper-slide .content .title {
    font-size: 2.6em;
    font-weight: bold;
    margin-bottom: 30px;
}

.swiper-slide .content .caption {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    transform: translateX(50px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.7s ease;
}

.swiper-slide .content .caption.show {
    transform: translateX(0);
    opacity: 1;
}

[class^=swiper-button-] {
    width: 44px;
    opacity: 0;
    visibility: hidden;
}

.swiper-button-prev {
    transform: translateX(50px);
}

.swiper-button-next {
    transform: translateX(-50px);
}

.swiper-button-next {
    right: 50px;
}

.swiper-button-prev {
    left: 50px;
}

.slider-banner img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover;
    height: 600px;
}
/* parallax */

Просмотреть пример

Ссылка на библиотеку