Слайдер

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