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

Peppermint.js

Правильный тач-слайдер

Форкни меня

Быстрый, легкий, расширяемый

7,7 Кб, быстрый и плавный тач, API для расширений

Работает везде

Работает на  айфонах,  андроидах,  винфонах. Не зависит от сторонних библиотек. Работает в  IE7+.

Дружит с кнопкой Tab

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?

Киньте ссылочку → me@grumpy.blog.

Лицензия

MIT license.