Слайдер
Слайдер - это скрипт позволяющий осуществить цикличекую смену содержимого, построенного на основе CSS и JavaScript. В SIMAI Framework используется слайдер на основе проекта Swiper, который позволяет создать современный адаптивный и чувствительный к прикосновениям слайдер.
Начало работы
Для размещения слайдера на странице вам необхоимо разместить макет, определить стили и инициализировать слайдер с необходимыми параметрами
Макет слайдера
Для размещения слайдера в своем проекте, вам необходимо разместить следующий HTML код:
<!-- Главный контайнер слайдера -->
<div class="swiper-container">
<!-- Дополнительный обязательный контейнер -->
<div class="swiper-wrapper">
<!-- Слайды -->
<div class="swiper-slide">Слайд 1</div>
<div class="swiper-slide">Слайд 2</div>
<div class="swiper-slide">Слайд 3</div>
...
</div>
<!-- Если вам нужна пагинация -->
<div class="swiper-pagination"></div>
<!-- Если вам нужны кнопки пагинации -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Если вам нужна полоса прокрутки -->
<div class="swiper-scrollbar"></div>
</div>Стили слайдера
Для задания размера слайдера вам необходимо определить стили:
.swiper-container {
width: 600px;
height: 300px;
} Инициализация слайдера
Основным способом инициализации скрипта является размещение его перед закрывающим тегом </body>
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
/* Параметры */
direction: 'vertical',
loop: true,
/* Если вам нужна пагинация */
pagination: '.swiper-pagination',
/* Навигационные стрелки */
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
/* Если нужна полоса прокрутки */
scrollbar: '.swiper-scrollbar',
})
</script>
</body>Также вы можете инициализировать скрипт используя следующую консутрукцию jQuery:
$(document).ready(function () {
/* Инициализация swiper, когда документ загрузился */
var mySwiper = new Swiper ('.swiper-container', {
/* Параметры */
direction: 'vertical',
loop: true
})
});Пример
Ниже демонстрируется пример использования слайдера.
Слайдер с навигацией и пагинацией
На десктопном устройстве мы можете перелистывать слайды зажав слайд левой клавишей мыши и перемещая его в сторону. В мобильном устройстве слайды перемещаются жестом смахивания в сторону.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Слайд 1</div>
<div class="swiper-slide">Слайд 2</div>
<div class="swiper-slide">Слайд 3</div>
<div class="swiper-slide">Слайд 4</div>
<div class="swiper-slide">Слайд 5</div>
<div class="swiper-slide">Слайд 6</div>
<div class="swiper-slide">Слайд 7</div>
<div class="swiper-slide">Слайд 8</div>
<div class="swiper-slide">Слайд 9</div>
<div class="swiper-slide">Слайд 10</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
</script>