Слайдер Swiper

Слайдер Swiper — это универсальный и мощный инструмент для создания слайдеров. Swiper поддерживает множество возможностей и настроек.

Для подключения слайдера укажите у страницы:

use.swiperjs: +

Код слайдера состоит из двух частей. Первая часть — это html-код разметки, вторая — инициализация через JavaScript.

<!-- используйте обрамляющий контейнер -->
<div class="layout-center-wrap"><div class="layout-wrap">
    <div class="swiper mySwiper t-center t120 t-primary700 dark:t-primary200">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!-- каждый слайд в отдельном блоке -->
                <div class="pad40-tb pad100-rl bg-primary100 dark:bg-primary700 rounded20">Slide1</div>
            </div>
            
            <div class="swiper-slide">
                <div class="pad40-tb pad100-rl bg-primary100 dark:bg-primary700 rounded20">Slide2</div>
            </div>
            
            <div class="swiper-slide">
                <div class="pad40-tb pad100-rl bg-primary100 dark:bg-primary700 rounded20">Slide3</div>
            </div>
            
            <div class="swiper-slide">
                <div class="pad40-tb pad100-rl bg-primary100 dark:bg-primary700 rounded20">Slide4</div>
            </div>
        </div>
        
        <!-- если навигация не нужна, то можно просто удалить блок -->
        <div class="swiper-pagination"></div>
        
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div></div>

<!-- nosimple -->
<script>
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        // effect: "cube", // fade cards cube coverflow flip creative
        // rewind: true,
        // autoHeight: true,
        loop: true,
        spaceBetween: 10,
        grabCursor: true,
        pagination: {
            el: ".swiper-pagination",
            dynamicBullets: false,
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>
<!-- /nosimple -->