Skip to content

Peppermint touch slider

Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit


Repository files navigation

⚠ Unmaintained!

It still works and all, but the code is old and crappy, and I have no plans for a revamp.

Peppermint touch slider

Check out the demo

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
  • Doesn't break when tab’bing


Also available in Bower:

bower install Peppermint --save


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 control the slider externally:

slideTo(n) – change active slide to n;

slideTo(n, speed) – change active slide to n with transition speed in ms. Passing a speed of 0 disables the transition;

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.