Peppermint touch slider

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

Kit

• peppermint.min.js – minified production script
• peppermint.required.css – styles required for proper functioning
• peppermint.suggested.css – default styles to start with (required styles included)

Usage

HTML markup:

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

  <figure> ... </figure>

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

Javascript:

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

Or javascript + jQuery:

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

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.

Settings

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
}

Examples

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 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.

Examples

JS:

// 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', slider.next, 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
slider.Peppermint();

// click `#right-arr` to go to the next slide
$('#right-arr').click(slider.data('Peppermint').next);

// click `#left-arr` to go to the previous slide
$('#left-arr').click(slider.data('Peppermint').prev);

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

Using Peppermint?

Drop me a link → me@grumpy.blog.

License

MIT license.