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
touchfunctions - API and callback functions for extensibility
- Doesn't break when tab’bing
- 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)
Also available in Bower:
bower install Peppermint --save
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.
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
}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);
}
});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.
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');
});Drop me a link → ✉️ [email protected].