Слайдер 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 -->