Слайдер

Слайдер - это скрипт позволяющий осуществить цикличекую смену содержимого, построенного на основе 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
})
});

Пример

Ниже демонстрируется пример использования слайдера.

Слайдер с навигацией и пагинацией

На десктопном устройстве мы можете перелистывать слайды зажав слайд левой клавишей мыши и перемещая его в сторону. В мобильном устройстве слайды перемещаются жестом смахивания в сторону.

Слайд 1
Слайд 2
Слайд 3
Слайд 4
Слайд 5
Слайд 6
Слайд 7
Слайд 8
Слайд 9
Слайд 10

    <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>