HTML
Slider Revolution is a jQuery plugin-based, use it when you need to load 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> Html content switching main structure is as follows, by the div.tp-banner contains multiple tag, Place the content switching, including the main image, text, buttons information. This information coupled with the respective data- attribute is to allow Slider Revolution identified.
<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 calling
When putting HTML structure layout well, you can call the Slider Revolution plugin, after paste the code above, open the browser, you can see the effect of the switch.
$(function() {
$('.tp-banner').revolution({
delay:9000,
startwidth:1170,
startheight:500,
hideThumbs:10
});
}); Options setting Description
Slider Revolution offers many options for setting parameters:
delay: slide content dwell time. Default 9000 ms
startheight: slide content height, the default 490 pixels.
startwidth: slide content width, the default 890 pixels.
navigationType: display flip icon, the default "bullet" (dot), if set to "none" is not displayed. .
navigationArrows: flip arrows show the default nexttobullets, scroll left and right arrow is displayed when the mouse slide, if set to none is not displayed.
touchenabled: whether to allow touch slide, the default on which allows, if set off is not allowed.
onHoverStop: whether to open when the mouse slide pause, on: turn on, off: closed.
fullWidth: whether to open full-screen display image content, on: turn on, off: closed.
For each li tag can be set to 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
Number of square block switching is divided: data-slotamount.
data-link: Image Link
data-delay: Set the current dwell time slider content
For each of the li elements inside, you can set the following options to achieve various effects.
Animation style, class attributes: class attribute values represent 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: The current lateral displacement element of relatively li
data-y: The current longitudinal displacement element of relatively li
data-speed: animation time, ms
data-start after: Wait a few seconds and then display the current element
data-easing: buffering animation, there are a variety of animation effects easeOutBack ...
In addition, if you want to add the timeline as a timer, you can add the following code at the end of the slide content:
<div class="tp-bannertimer"></div>
