jquery Plugin Slider Revolution implement response animation sliding picture switching effect

Source: Internet
Author: User
Tags min relative touch jquery library

Slider Revolution Plug-in is a very powerful plug-in, we can use it to produce a variety of effects and also support mobile devices, mobile phone to support the touch, keyboard paging, and its built-in slide, video playback timer and so on, specifically we look.

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.


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.


1 2 3 4 <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 multiple Div.tp-banner

  • Label
  • the contents of the switch, including the main picture, text, button information. This information is matched with the respective data-attributes to allow the slider revolution to be identified.


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The <div class=", "Tp-banner-contain" Er "> <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= "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-caption lightgrey_divider skewfromrightshort fadeout" data-x= "data-y=" 224 "data-speed=" 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.


    1 2 3 4 5 6 7 8 9 $ (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

  • labels can set various 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: Picture link

    Data-delay: Setting the time to stay in the current slider

    For each element in Li, you can set the following options to achieve a variety of effects.

    Animation style, Class Property: The Class Property value represents a different animation style: Sft-short from top sfb-short to Bottom,sfr-short from Right,sfl-short From Left,lft-long to Top,lfb-long from Bottom,lfr-long to Right,lfl-long from left,fade-fading

    Dat A-x: Lateral displacement of the current element relative to Li

    data-y: Vertical displacement of the current element relative to Li

    data-speed: Animation time, milliseconds

    Data-start after: The current element waits a few seconds before it is displayed

    data-easing: Buffering animation, there are easeoutback ... Multiple animation effects, referencing 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 slider:


      <div class= "Tp-bannertimer" ></div>

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.