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, msspeed:300,//transition time when changing slides after touch, mstouchSpeed:300,//slideshow enabledslideshow:false,//slideshow interval, msslideshowInterval:4000,//stop slideshow after user interacts with the sliderstopSlideshowAfterInteraction:false,//slide number to start withstartSlide:0,//use mouse to drag the slidermouseDrag:true,//don't initialize Peppermint if there's only one slidedisableIfOneSlide: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 dotsdots: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 elementslidesContainer: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:

//init Peppermint and save the API objectvarslider=Peppermint(document.getElementById('peppermint')),//save links to HTML nodesrightArr=document.getElementById('right-arr'),leftArr=document.getElementById('left-arr'),getSlidesNumberButton=document.getElementById('getslidesnumber');//click `#right-arr` to go to the next sliderightArr.addEventListener('click',slider.next,false);//click `#left-arr` to go to the previous slideleftArr.addEventListener('click',slider.prev,false);//click `#getslidesnumber` to alert total number of slidesgetSlidesNumberButton.addEventListener('click',function(){alert('There are '+slider.getSlidesNumber()+' slides');},false);

JS + jQuery:

//save jQuery link to slider's blockvarslider=$('#peppermint');//init Peppermintslider.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');});