jquery Plugin SKIPPR implementation Focus Slide effects

The most effective focus chart of the history of the slide jquery plugin skippr, lightweight plug-ins, responsive layout plug-ins, powerful parameter customization

configuration, can customize the switching speed, switching mode, whether to display the left and right arrows, whether AutoPlay, automatic playback interval, such as configuration parameters, call Plug-ins are also very easy to use, call the way below: 1. Load jquery and Plug-ins

1 2 3

<link rel= "stylesheet" href= "Css/jquery.skippr.css" > <script src= "js/jquery.min.js" ></script> <script src= "Js/jquery.skippr.min.js" ></script>

2.HTML Content

1 2 3 4 5 6 7 8 9

<div id= "Container" > <div id= "thetarget" > <div style= "Background-image:url (img/image1.jpg)" ></ div> <div style= "Background-image:url (img/image2.jpg)" ></div> <div style= "Background-image:url ( img/image3.jpg) "></div> <div style=" Background-image:url (img/image4.jpg) "></div> <div Style= "Background-image:url (img/image5.jpg)" ></div> </div> </div>

3. Function call

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<script> $ (document). Ready (function () {$ ("#theTarget"). SKIPPR ({transition: ' slide ', speed:1000, easing: ' Easeo Utquart ', Navtype: ' Block ', Childrenelementtype: ' div ', arrows:true, Autoplay:false, autoplayduration:5000, KeyboardOn   Always:true, hideprevious:false}); }); </script>

parameter Configuration explains transition:(fade/slide) switching speed: Switching speed (milliseconds) easing: Switching effects (Easeoutquart) Navtype: Following navigation type (block/bubble) arrows : whether there are arrows (true/false) AutoPlay: AutoPlay (true/false) autoplayduration: AutoPlay interval (milliseconds) Keyboardonalways: Keyboard Switching is supported (True/false) Hideprevious: Hide the first toggle arrow (TRUE/FALSE)