jQuery plug-in Slider Revolution implements responsive animation sliding picture switching effect_jquery

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

tags, and the switching content is placed in

, including main images, text, and button information. This information is paired with their respective data-attributes in order to be recognized by Slider Revolution.

<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="/static/imghwm/default1.png"  data-src="images/bg1.jpg"  class="lazy" 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="/static/imghwm/default1.png"  data-src="images/bg2.jpg"  class="lazy" 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

tag:
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 divided into when switching.
data-link: image link
data-delay: Set the dwell time of the current slider content

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.