Peppermint touch slider


Proper touch slider

Fork me on GitHub

Fast, lightweight & extensible

7.7 Kb, fast & smooth touch, API for extensibility

Works everywhere

Works on  iPhones,  Androids,  Winphones. Library agnostic.  IE7+ compatible.

On good terms with the Tab key

Peppermint.js – Yet another touch slider. Only better.

  • Works with mouse, Touch Events, Pointer Events, old IE10 Pointer Events
  • Responsive, works on iPhones, Androids, Windows Phones, Blackberries, Windows 8 devices
  • IE7+ compatible
  • Library agnostic. If jQuery is available, registers itself as a plugin.
  • Uses CSS3 transforms & animations, falls back to timer animations when necessary
  • Only 7.7 Kb minified
  • Perfomance-optimized touch functions
  • API and callback functions for extensibility
  • Keyboard accessible, doesn’t break when tab’bing



HTML markup:

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

<figure> ... </figure>

<figure> ... </figure>


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

Or javascript + jQuery:


peppermint-inactive class is not required. It is replaced with peppermint-active during setup.

You are free to use any other tag instead of figure. When using figure, don’t forget to include html5shiv, otherwise it won’t work in old IEs.

Place anything you want within the slides.


Peppermint can take settings object as an optional second parameter (first when using jQuery). Default settings:

// transition time when changing slides, ms
speed: 300,

// transition time when changing slides after touch, ms
touchSpeed: 300,

// slideshow enabled
slideshow: false,

// slideshow interval, ms
slideshowInterval: 4000,

// stop slideshow after user interacts with the slider
stopSlideshowAfterInteraction: false,

// slide number to start with
startSlide: 0,

// use mouse to drag the slider
mouseDrag: true,

// don’t initialize Peppermint if there’s only one slide
disableIfOneSlide: true,

// Prefix to be used with Peppermint classes,
// such as `inactive`, `active`, `mouse`, `drag`, etc.
// Don’t forget to change the stylesheet appropriately!
cssPrefix: 'peppermint-',

// show dots
dots: false,

// prepend dots to dotsContainer (default is append)
dotsPrepend: false,

// Element to contain dots, defaults to Peppermint’s root element.
// Can be anywhere on the page.
dotsContainer: undefined,

// element containing slides, defaults to Peppermint’s root element
slidesContainer: undefined,

// Callback function, runs at slide change.
// Receives slide number as a parameter.
onSlideChange: undefined,

// Callback function, runs at setup end.
// Receives total number of slides as a parameter.
onSetup: undefined



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:

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


Peppermint exposes a set of functions upon installation. These functions can be used to controll the slider externally:

slideTo(n) – change active slide to n;

next() – next slide;

prev() – previous slide;

start() – start slideshow;

stop() – stop slideshow;

pause() – pause slideshow until the next slide change;

getCurrentPos() – get current slide number;

getSlidesNumber() – get total number of slides;

recalcWidth() – recalculate slider’s and slides’ widths. Usefull when the container width is changed. Width recalculation runs automatically on window resize and device orientation change.



// init Peppermint and save the API object
var slider = Peppermint(document.getElementById('peppermint')),
// save links to HTML nodes
rightArr = document.getElementById('right-arr'),
leftArr = document.getElementById('left-arr'),
getSlidesNumberButton = document.getElementById('getslidesnumber');

// click `#right-arr` to go to the next slide
rightArr.addEventListener('click',, false);

// click `#left-arr` to go to the previous slide
leftArr.addEventListener('click', slider.prev, false);

// click `#getslidesnumber` to alert total number of slides
getSlidesNumberButton.addEventListener('click', function() {
alert('There are ' + slider.getSlidesNumber() + ' slides');
}, false);

JS + jQuery:

// save jQuery link to slider’s block
var slider = $('#peppermint');

// init Peppermint

// click `#right-arr` to go to the next slide

// click `#left-arr` to go to the previous slide

// click `#getslidesnumber` to alert total number of slides
$('#getslidesnumber').click(function() {
alert('There are ' +'Peppermint').getSlidesNumber() + ' slides');

Using Peppermint?

Drop me a link →


MIT license.