Home>

The slider revolution plugin is a very powerful plugin,We can use it to create a variety of effects and also support mobile devices,Support mobile touch,Keyboard page turning;It has built-in slideshows, video playback timers, and more.Let's take a look.

This is a very powerful content switching plugin.It's based on jquery, it's fully responsive,Support for mobile devices,Support mobile touch,Keyboard page turning;It has a built-in slideshow, video playback timer,It has various modes:custom, automatic response,Full screen;it has a variety of animation effects, 3d effects ... In short, all the effects you think of it have done,Its name is slider revolution.

html

Slider revolution is a plugin based on jquery. To use it, you need to load the jquery library file and the css and js files that the 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 the content switch is as follows,Div.tp-banner contains multiple<li>tags,<li>to place the content of the switch,Includes main picture, text, and button information.This information is paired with their respective data-attributes for recognition by the slider revolution.

<div>
 <div>
  <ul>
   <!-Slide->
   <li data-transition="fade" data-slotamount="7" data-masterspeed="1500">
    <!-Main image->
    <img src="images/bg1.jpg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
    <!-Layers->
    <!-Layer nr. 1->
    <div
     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" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
    <!-Layers->
    <!-Layer nr. 1->
    <div
     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 laid out,You can call the slider revolution plugin. 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

The slider revolution provides many parameter options:

delay:Slide content dwell time.Default 9000 milliseconds

startheight:slide content height,The default is 490 pixels.

startwidth:sliding content width,The default is 890 pixels.

navigationtype:show page turning icon,The default "bullet" is not displayed if set to "none"..

navigationarrows:show page turning arrows,The default nexttobullets, that is, the left and right page turning arrows are displayed when the mouse is moved to the right,Not displayed if set to none.

touchenabled:whether to allow touch swipe,On is allowed by default, and is not allowed if set to off.

onhoverstop:whether to enable pause when the mouse is turned on,on:on, off:off.

fullwidth:whether to enable full screen display of picture content,on:on, off:off.

Various effects can be set for each

  • tag:

    data-transition:content sliding effect,The following values ​​can be set:boxeslide, boxfade, slotzoom-horizontal, slotslide-horizontal, slotfade-horizontal, slotszoom-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 divided when switching.

    data-link:image link

    data-delay:Set the dwell time of the current slider content

    For each element in li,The following options can be set 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, lbb-long from bottom, lfr-long from right , lfl-long from left , fade-fading

    data-x:the 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,millisecond

    data-start after:the current element waits for a few seconds before displaying

    data-easing:buffered animation,There is easeoutback ... a variety of animation effects,Can refer tojquery easingAnimation effect extension

    Also, if i want to add the timeline as a timer,You can add the following code to the end of the slide:

    <div></div>
    

    That's all for this article.Hope everyone likes it.

  • Previous Aspnet implementation of file upload without refresh summary
  • Next Python deadlock avoidance method instance analysis
  • Trends