jquery Plug-in slider Revolution implementation of the response animation sliding picture switching effect _jquery

This is a very powerful content switching plugin, it is based on jquery, it is fully responsive, support mobile devices, support mobile phone touch, keyboard page, it has built-in slide, video playback timer, it has a variety of modes: custom, automatic response, full screen; it has a variety of animation effects, 3d effect ... In short you think of the effect it has done, its name is called Slider Revolution.

Html

Slider Revolution is a jquery based plug-in that needs to be loaded into the jquery library file and Slider Revolution dependent CSS and JS files.

<script src= "Js/jquery.js" ></script> 
<link rel= "stylesheet" href= "css/style.css" media= "screen" /> 
<script src= "rs-plugin/js/jquery.themepunch.plugins.min.js" ></script> 
<script src= " Rs-plugin/js/jquery.themepunch.revolution.min.js "></script> 

The main HTML structure for content switching is as follows, consisting of div.tp-banner containing multiple <li> tag,<li>, including key pictures, text, and button information. This information is matched with the respective data-attributes to allow the slider revolution to be identified.

<div class= "Tp-banner-container" > <div class= "Tp-banner" > <ul> <!--SLIDE--> <l I data-transition= "Fade" data-slotamount= "7" data-masterspeed= "1500" > <!--MAIN IMAGE-->  <!--L AYERS--> <!--LAYER NR.  
     1--> <div class= "tp-caption lightgrey_divider skewfromrightshort fadeout" "data-x=" data-y= "224" data-speed= "data-start=" "1200" data-easing= "Power4.easeout" >my Caption </div>. 
 
   . </li> <li data-transition= "Zoomout" data-slotamount= "7" data-masterspeed= "1000" > <!--MAIN IMAGE -->  <!--LAYERS--> <!--LAYER NR. 1--> <div class= "tp-captionLightgrey_divider skewfromrightshort fadeout "data-x=" data-y= "224" data-speed= "Data-start" = "1200" data-easing= "Power4.easeout" >my Caption </div> ... </li> ... </ul&gt 
 ; 
 </div> </div>

jquery Call

After the HTML structure is decorated, you can call the slider Revolution plug-in, paste the above code, open the browser can see the switch effect.

 
$ (function () { 
 $ ('. Tp-banner '). Revolution ({ 
  delay:9000, 
  startwidth:1170, 
  startheight:500, 
  Hidethumbs:10 
 }); 
 

Option settings and descriptions

Slider Revolution provides a number of parameter option settings:
Delay: Slide content stay time. Default 9000 milliseconds
Startheight: Sliding content height, default 490 pixels.
Startwidth: Slide content width, default 890 pixels.
Navigationtype: Displays the page-flipping icon, the default "bullet" (dot), if set to None, not displayed ...
Navigationarrows: Displays the page-turn arrow, the default Nexttobullets, that is, when the mouse is sliding, the left and right page arrows are displayed, if none is displayed.
Touchenabled: Allow touch to slide, default on is allowed, if set to off is not allowed.
Onhoverstop: Pause when mouse cursor is turned on: Open, off: close.
Fullwidth: Open full-screen Display picture content, on: Open, off: close.

For each <li> label you can set a variety of effects:
Data-transition: Content sliding effect, you can set the following values: Boxslide,boxfade,slotzoom-horizontal,slotslide-horizontal,slotfade-horizontal, Slotzoom-vertical,slotslide-vertical,slotfade-vertical,curtain-1,curtain-2,curtain-3,slideleft,slideright, Slideup,slidedown,fade
Data-slotamount: The number of square blocks that are partitioned when switching.
Data-link: Pictures link
Data-delay: Sets the duration of the current slider content

For each element inside Li, you can set the following options to achieve a variety of effects.
Animation style, class attribute: The class attribute value represents a different animation style: Sft-short from top sfb-short to Bottom,sfr-short from Right,sfl-short to left, Lft-long from Top,lfb-long to Bottom,lfr-long from Right,lfl-long from left,fade-fading
Data-x: Lateral displacement of the current element relative to Li
Data-y: The longitudinal displacement of the current element relative to Li
Data-speed: Animation time, MS
Data-start after: The current element waits a few seconds before showing
Data-easing: Buffering animation, there are easeoutback ... A variety of animation effects, can refer to the jquery easing animation effect extension

In addition, if you want to add a timeline as a timer, you can add the following code at the end of the slide:

The above is the entire contents of this article, I hope you can enjoy.