This is a very powerful content switching plug-in. It is based on jQuery. It is fully responsive, supports mobile devices, supports mobile phone touch, and keyboard page turning; it has built-in slideshows and video playback timers, and it has various modes: automatic Definition, automatic response, full screen; it has a variety of animation effects, 3D effects... In short, it can do all the effects you think of, and its name is Slider Revolution.
HTML
Slider Revolution is a jQuery-based plug-in. When using it, you need to load the jQuery library file first, as well as the css and js files that Slider Revolution depends on.
<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 of content switching is as follows. div.tp-banner contains multiple
<div class="tp-banner-container"> <div class="tp-banner" > <ul> <!-- SLIDE --> <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" > <!-- MAIN IMAGE --> <img src="images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- 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 --> <img src="images/bg2.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- 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 arranged, you can call the Slider Revolution plug-in. After pasting the above code, open the browser and you can see the switching effect.
$(function() { $('.tp-banner').revolution({ delay:9000, startwidth:1170, startheight:500, hideThumbs:10 }); });
Option settings and descriptions
Slider Revolution provides many parameter option settings:
delay: the dwell time of sliding content. Default 9000 milliseconds
startheight: sliding content height, default 490 pixels.
startwidth: sliding content width, default 890 pixels.
navigationType: Display the page turning icon, the default is "bullet" (dot), if set to "none" it will not be displayed. .
navigationArrows: Displays page turning arrows. The default is nexttobullets, which means that the left and right page turning arrows are displayed when the mouse slides. If set to none, it will not be displayed.
touchenabled: Whether touch sliding is allowed. The default is on, which is allowed. If set to off, it is not allowed.
onHoverStop: Whether to enable pausing when the mouse slides, on: on, off: off.
fullWidth: Whether to enable full-screen display of image content, on: on, off: off.
Various effects can be set for each
For each element in li, you can set the following options to achieve various effects.
Animation style, class attribute: The class attribute value represents different animation styles: sft - Short from Top, sfb - Short from Bottom, sfr - Short from Right, sfl - Short from Left, lft - Long from Top, lfb - Long from Bottom, lfr - Long from Right, lfl - Long from Left, fade - fading
data-x: horizontal displacement of the current element relative to li
data-y: the vertical displacement of the current element relative to li
data-speed: animation time, milliseconds
data-start after: Wait a few seconds before the current element is displayed
data-easing: buffer animation, including easeOutBack... various animation effects, please refer to jQuery Easing Animation Effect Extension
In addition, if you want to add the timeline as a timer, you can add the following code at the end of the sliding content:
<div class="tp-bannertimer"></div>
The above is the entire content of this article, I hope you all like it.