🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

smSlider is a simple slideshow plug-in for jQuery.

Plugins Slider

Documentation

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...         }     });

You May Also Like