Siema — очень простой плагин для каруселей.

Siema — очень простой плагин для каруселей.

Siema — это легкий (всего 1 Кб) плагин для создания каруселей без зависимостей (dependencies) и лишних стилей. Брэд Фрост однажды сказал: «делай это дерьмо сам». Этот плагин 100% доступен открытым исходным кодом на github. Вы можете абсолютно бесплатно использовать его на личных и коммерческих проектах.

Установка

Установка чрезвычайно проста. Для начала немного разметки…

<div class="siema">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>
  <div>Hi, I'm slide 4</div>
</div>

Вручную подключить скрипт на Ваш сайт…

<script src="siema.min.js"></script>
<script>
  new Siema();
</script>

…ИЛИ Если вы используете модуль упаковщика, такие как Browserify или Webpack

npm i -S siema

// or

yarn add siema
import Siema from 'siema';
new Siema();

Настройки

Siema можно настраивать следующими параметрами, которые можно изменить путем передачи объекта в качестве аргумента. Значения по умолчанию приведены ниже.

new Siema({
  selector: '.siema',
  duration: 200,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  threshold: 20,
  loop: false,
});
  • selector — (string или DOM element) указать селектор
  • duration — (number) длительность слайдов (в мс)
  • easing — (string) такой же, как переход-времени-функция в CSS
  • perPage — (number или object) количество слайдов
  • startIndex — индекс (number) стартового слайда (с нуля)
  • draggable — (boolean) использование перетаскивания и касания пальцем
  • threshold — (number) пороговое значение при касании и перетаскивании мыши  (в пикселях)
  • loop — (boolean) петля скольжения вокруг

API-интерфейс

Как уже упоминалось выше, Siema не обладает большим количеством опций — всего несколько полезных методов. Используйте плагин с очень простым JavaScript-кодом и вуаля!

  • next() — перейти к следующему слайду
  • prev() — перейти к предыдущему слайду
  • goTo(index) — переход к определенному слайду
  • currentSlide — индекс текущего активного скольжения (только для чтения)

Пример

Базовая карусель с кнопками перехода к следующему и предыдущему слайду.

<div class="siema">
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
</div>

<button class="prev">prev</button>
<button class="next">next</button>
const mySiema = new Siema();
document.querySelector('.prev').addEventListener('click', () => mySiema.prev());
document.querySelector('.next').addEventListener('click', () => mySiema.next());

Поддержка браузеров

  • IE10
  • Chrome 12
  • Firefox 16
  • Opera 15
  • Safari 4
  • Android Browser 4.0
  • iOS Safari 6.0