Привет. В полку слайдеров прибыло. Сегодня новость о том, что появился новый супер маленький слайдер без jQuery и других зависимостей. То есть будет работать из коробки на любом сайте, и не будет конфликтовать с другими библиотеками. Это слайдер Seima, вес в сжатом виде всего 1кб.

Супер легковесный маленький слайдер без jQuery и других зависимостей: установка
Всё предельно просто. Сначала создаём структуру на html:

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

Готово. Слайдер уже работает. Кстати, он адаптивный.

Опции и API
Конечно, у этого слайдера есть опции.
Список приведу ниже:

  • selector — (string или DOM element) селектор объекта со слайдером (если он называется не seima)
  • duration — (int) длительность анимации в мс
  • easing — (string) допустимы значения изинга из CSS
  • perPage — (int или object) сколько слайдов отображать за один раз
  • startIndex — (int) начальный индекс (по умолчанию 0)
  • draggable — (boolean) использовать ли перетягивание и свайпы на мобильных
  • threshold — (number) порог пролистывания при перетягивании и свайпах (в px)
  • loop — (boolean) зацикливать ли слайдер

Опции можно передать следующим образом, при создании объекта Seima:

new Siema({
  selector: '.siema',
  duration: 200,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  threshold: 20,
  loop: false,
});

Кроме опций, есть также своего рода API, которое позволяет управлять слайдером из-вне (при помощи других элементов, например, стрелочек пролистывания):

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

Например, как использовать опции и API:

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

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

Скачать этот маленький слайдер без Jquery можно на сайте автора.

Скачать Seima – маленький слайдер без jQuery