jquery Plug-in slider Revolution implementation of the response animation sliding picture switching effect _jquery

Source: Internet
Author: User
Tags jquery library

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.

<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--> <l I data-transition= "Fade" data-slotamount= "7" data-masterspeed= "1500" > <!--MAIN IMAGE-->  <!--L AYERS--> <!--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-captionLightgrey_divider skewfromrightshort fadeout "data-x=" data-y= "224" data-speed= "Data-start" = "1200" data-easing= "Power4.easeout" >my Caption </div> ... </li> ... </ul&gt 
 </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 ({ 

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, can refer to 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 slide:


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

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.