#Peppermint touch slider
[Check out the demo](http://wd.dizaina.net/en/scripts/peppermint/)
Yet another touch slider. Only better.
- Works with mouse, [Touch Events](http://www.w3.org/TR/touch-events/), [Pointer Events](http://www.w3.org/TR/pointerevents/), old [IE10 Pointer Events](http://msdn.microsoft.com/en-us/library/ie/hh673557\(v=vs.85\).aspx)
- 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](http://wd.dizaina.net/en/internet-maintenance/js-sliders-and-the-tab-key/) when tab’bing
##Kit
- **[peppermint.min.js](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.min.js)** – minified production script
- **[peppermint.required.css](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.required.css)** – styles required for proper functioning
- **[peppermint.suggested.css](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.suggested.css)** – default styles to start with (required styles included)
Also available in [Bower](http://bower.io):
```
bower install Peppermint --save
```
##Usage
HTML markup:
```html
```
Javascript:
```javascript
var slider = Peppermint(document.getElementById('peppermint'));
```
Or javascript + jQuery:
```javascript
$('.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](https://github.com/aFarkas/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:
```javascript
{
//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:
```javascript
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:
```javascript
$('.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:
```javascript
//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:
```javascript
//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 → [:envelope: wd@dizaina.net](mailto:wd@dizaina.net).
##License
[MIT license](http://opensource.org/licenses/MIT).