Утром доделаю

Peppermint.js

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

 Форкни меня

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

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

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

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

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

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

Комплект

Запуск

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?

Киньте ссылочку →  wd@dizaina.net.

Лицензия

MIT license.

Опубликовано в «Скриптах»