Тач-слайдер Peppermint

Peppermint.js — еще один тач-слайдер. Только круче.

• Работает с мышью, тачэвентами, поинтерэвентами, старыми поинтерэвентами из IE10
• Работает на андроидах, айфонах, винфонах, блекберри и на девайсах с 8 виндой
• Работает в IE7+
• Не зависит от сторонних библиотек. Если находит jQuery, регистрирует себя в качестве плагина.
• Использует CSS3 трансформы и транзишены с фоллбеком на анимации по таймеру
• 7,7 Кб кода
• Оптимизированные на скорость выполнения touch-функции
• API и callback-функции для расширений
• Работает с клавиатурой, не ломается от кнопки Tab

Комплект

• peppermint.min.js — минифицированный скрипт для продакшена
• peppermint.required.css — обязательный набор стилей для корректной работы слайдера
• peppermint.suggested.css — дефолтный набор стилей, чтобы было с чего начать (включает обязательные стили)

Запуск

HTML разметка:

<div class="peppermint peppermint-inactive" id="peppermint">
  <figure> ... </figure>

  <figure> ... </figure>

  <figure> ... </figure>
</div>

Javascript:

var slider = Peppermint(document.getElementById('peppermint'));

Или javascript + jQuery:

$('.peppermint').Peppermint();

Класс peppermint-inactive не обязателен. Он заменяется на peppermint-active во время установки.

Вместо figure можно использовать любой другой тег. Если используете figure, не забудьте подключить html5shiv, чтобы старые IE не удивлялись HTML5-тегам.

Внутрь каждого слайда можно положить все что захочется.

Настройки

В качестве второго параметра (первого в случае использования jQuery) в Peppermint можно передать объект с настройками. Настройки по умолчанию:

{
  // скорость перехода между слайдами, мс
  speed: 300,

  // скорость перехода между слайдами после тача, мс
  touchSpeed: 300,

  // включить слайдшоу
  slideshow: false,

  // интервал переключения слайдов, мс
  slideshowInterval: 4000,

  // останавливать слайдшоу после переключения слайда
  // пользователем
  stopSlideshowAfterInteraction: false,

  // начальный слайд
  startSlide: 0,

  // разрешить управление мышкой
  mouseDrag: true,

  // не включать Peppermint, если слайд один
  disableIfOneSlide: true,

  // Префикс для служебных классов слайдера,
  // таких как `inactive`, `active`, `mouse`, `drag` и т. д.
  // Не забудьте поменять стили соответствующим образом!
  cssPrefix: 'peppermint-',

  // показывать точки
  dots: false,

  // положить точки в начало блока `dotsContainer`
  // (по умолчанию кладутся в конец)
  dotsPrepend: false,

  // Элемент, в который положить точки. По умолчанию корневой
  // элемент слайдера. Может быть где угодно на странице.
  dotsContainer: undefined,

  // Элемент, содержащий слайды. По умолчанию корневой
  // элемент слайдера.
  slidesContainer: undefined,

  // Callback-функция, вызывается при смене слайда.
  // В качестве параметра получает номер слайда.
  onSlideChange: undefined,

  // Callback-функция, вызывается пойсле завершения установки.
  // В качестве параметра получает количество слайдов.
  onSetup: undefined
}

Примеры использования

JS:

var slider = Peppermint(document.getElementById('peppermint'), {
  dots: true,
  slideshow: true,
  speed: 500,
  slideshowInterval: 5000,
  stopSlideshowAfterInteraction: true,
  onSetup: function(n) {
    console.log('Peppermint setup done. Slides found: ' + n);
  }
});

JS + jQuery:

$('.peppermint').Peppermint({
  dots: true,
  slideshow: true,
  speed: 500,
  slideshowInterval: 5000,
  stopSlideshowAfterInteraction: true,
  onSetup: function(n) {
    console.log('Peppermint setup done. Slides found: ' + n);
  }
});

API

При инициализации Peppermint возвращает объект с функциями, которые можно использовать для управления слайдером и расширения функционала:

slideTo(n) — перейти к слайду n;

next() — следующий слайд;

prev() — предыдущий слайд;

start() — запустить слайдшоу;

stop() — остановить слайдшоу;

pause() — приостановить слайдшоу до следующей смены слайда;

getCurrentPos() — получить номер текущего слайда;

getSlidesNumber() — получить общее количество слайдов;

recalcWidth() — пересчитать ширину слайдера и слайдов. Полезно при изменении ширины контейнера. При ресайзе окна и смене ориентации девайса пересчет ширины запустится сам.

Примеры использования

JS:

// запустить Peppermint и сохранить API
var slider = Peppermint(document.getElementById('peppermint')),
    // сохранить ссылки на HTML-ноды
    rightArr = document.getElementById('right-arr'),
    leftArr = document.getElementById('left-arr'),
    getSlidesNumberButton = document.getElementById('getslidesnumber');

// клик по `#right-arr` переключит на следующий слайд
rightArr.addEventListener('click', slider.next, false);

// клик по `#left-arr` переключит на предыдущий слайд
leftArr.addEventListener('click', slider.prev, false);

// клик по `#getslidesnumber` покажет количество слайдов
getSlidesNumberButton.addEventListener('click', function() {
  alert('There are ' + slider.getSlidesNumber() + ' slides');
}, false);

JS + jQuery:

// сохранить jQuery-ссылку на блок слайдера
var slider = $('#peppermint');

// запустить Peppermint
slider.Peppermint();

// клик по `#right-arr` переключит на следующий слайд
$('#right-arr').click(slider.data('Peppermint').next);

// клик по `#left-arr` переключит на предыдущий слайд
$('#left-arr').click(slider.data('Peppermint').prev);

// клик по `#getslidesnumber` покажет количество слайдов
$('#getslidesnumber').click(function() {
    alert('There are ' + slider.data('Peppermint').getSlidesNumber() + ' slides');
});

Используете Peppermint?

Киньте ссылочку → [email protected].

Лицензия

MIT license.