Слайдер

swiper
sm
md
lg
xl

Слайдер - это скрипт позволяющий осуществить цикличекую смену содержимого, построенного на основе CSS и JavaScript. В SIMAI Framework используется слайдер на основе проекта Swiper, который позволяет создать современный адаптивный и чувствительный к прикосновениям слайдер.

Начало работы

Для размещения слайдера на странице вам необхоимо разместить макет, определить стили и инициализировать слайдер с необходимыми параметрами

Макет слайдера

Для размещения слайдера в своем проекте, вам необходимо разместить следующий HTML код:

<!-- Главный контайнер слайдера -->
<div class="swiper">
  <!-- Дополнительный обязательный контейнер -->
  <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 {
  width: 600px;
  height: 300px;
}

Инициализация слайдера

Основным способом инициализации скрипта является размещение его перед закрывающим тегом </body>

...
<script>
  var mySwiper = new Swiper ('.swiper', {
    /* Параметры */
    direction: 'vertical',
    loop: true,
    
    /* Если вам нужна пагинация */
    pagination: '.swiper-pagination',
    
    /* Навигационные стрелки */
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    /* Если нужна полоса прокрутки */
    scrollbar: '.swiper-scrollbar',
  })
  </script>

Также вы можете инициализировать скрипт используя следующую консутрукцию jQuery:

$(document).ready(function () {
  /* Инициализация swiper, когда документ загрузился */
  var mySwiper = new Swiper ('.swiper', {
    /* Параметры */
    direction: 'vertical',
    loop: true
  })
});

Пример

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

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

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

Слайд 1
Слайд 2
Слайд 3
Слайд 4
Слайд 5
Слайд 6
Слайд 7
Слайд 8
Слайд 9
Слайд 10
<div class="swiper">
    <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', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },
    });
</script>

Изменить статью