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

<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 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

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.