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-->
<li data-transition= "Fade" data-slotamount= "7" data-masterspeed= "1500" >
<!--MAIN IMAGE-->
<!--LAYERS-->
<!--LAYER NR. 1-->
<div class= "tp-caption lightgrey_divider skewfromrightshort fadeout"
data-x= "85"
data-y= "224"
Data-speed= "500"
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-caption lightgrey_divider skewfromrightshort fadeout"
data-x= "85"
data-y= "224"
Data-speed= "500"
data-start= "1200"
data-easing= "Power4.easeout" >my Caption
</div>
...
</li>
....
</ul>
</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,
In addition, if you want to add a timeline as a timer, you can add the following code at the end of the slide:
<div class= "Tp-bannertimer" ></div>