smSlider
This is simple JQuery slider plugin
Installation
- Download or clone plugin in your project:
$ git clone [email protected]:sashamochalin/smSlider.git ./smslider/- Include scripts and styles:
<link type="text/css" rel="stylesheet" href="smslider/css/smslider.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="smslider/jquery.smslider.min.js"></script>- Create html with your slides:
<div id="sm_slider"> <ul> <li>...</li> <li>...</li> <li>...</li> </ul> </div>- Apply slider for your list:
<script type="text/javascript"> $(document).ready(function(){ $('#sm_slider').smSlider() }) </script>Examples
Options and Methods
- namespace
string
// name of prefix: $elem.smSlider({ namespace : 'sm' });- start
number
// start with element: $elem.smSlider({ start : 0 });- transition
string
// animation type $elem.smSlider({ // can be 'animate' or 'fader' transition : 'animate' });- activeClass
string
// now showing element class $elem.smSlider({ activeClass : 'active' });- autoArr
boolean
// auto generating control buttons $elem.smSlider({ autoArr : true });- prev
string
// class of prevent control button $elem.smSlider({ prev : 'sm_prev' });- next
string
// class of next control button $elem.smSlider({ next : 'sm_next' });- pagination
boolean
// turn on pagination buttons $elem.smSlider({ pagination : true });- typeCtrl
string
// style of pagination buttons $elem.smSlider({ // can be 'dots' or 'numeric' typeCtrl : 'dots' });- subMenu
boolean
// turn on additional controls $elem.smSlider({ subMenu : false });- subMenuClass
string
// css class for additional controls $elem.smSlider({ subMenuClass : 'sm_submenu-item' });- autoPlay
boolean
// auto change current slide $elem.smSlider({ autoPlay : true });- duration
number
// auto change animation speed $elem.smSlider({ duration : 600 });- delay
number
// auto change timeout in milliseconds $elem.smSlider({ delay : 5000 });- hoverPause
boolean
// turn on or turn off auto animation pause on hover $elem.smSlider({ hoverPause : false });- easing
string
// animation easing $elem.smSlider({ // can be 'swing' or 'linear' easing : 'swing' });- flexible
boolean
// width in persents $elem.smSlider({ flexible : true });- animationStart
function
// callback function, called with start animation $elem.smSlider({ animationStart : function() { //do something... } });- animationComplete
function
// callback function, called with complete animation $elem.smSlider({ animationComplete : function() { //do something... } });
