Le plug-in jQuery Slider Revolution implémente la commutation d'image coulissante d'animation réactive effect_jquery

Il s'agit d'un plug-in de commutation de contenu très puissant. Il est basé sur jQuery, il est entièrement réactif, prend en charge les appareils mobiles, prend en charge le toucher des téléphones mobiles et le changement de page du clavier. Il intègre des diaporamas et des minuteries de lecture vidéo. et il dispose de différents modes : définition automatique, réponse automatique, plein écran ; il dispose d'une variété d'effets d'animation, d'effets 3D... Bref, il peut faire tous les effets auxquels vous pensez, et son nom est Slider Revolution.

HTML

Slider Revolution est un plug-in basé sur jQuery Lorsque vous l'utilisez, vous devez d'abord charger le fichier de la bibliothèque jQuery, ainsi que les fichiers css et js dont dépend Slider Revolution.

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

La structure HTML principale du changement de contenu est la suivante. div.tp-banner contient plusieurs balises

, et le contenu de changement est placé dans

, y compris les images principales, le texte et les informations sur les boutons. Ces informations sont associées à leurs attributs de données respectifs afin d'être reconnues par 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="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> 

Appel jQuery

Une fois la structure HTML organisée, vous pouvez appeler le plug-in Slider Revolution. Après avoir collé le code ci-dessus, ouvrez le navigateur et vous pourrez voir l'effet de commutation.

 
$(function() { 
 $('.tp-banner').revolution({ 
  delay:9000, 
  startwidth:1170, 
  startheight:500, 
  hideThumbs:10 
 }); 
}); 

Paramètres et descriptions des options

Slider Revolution propose de nombreux réglages d'options de paramètres :
delay : le temps de séjour du contenu glissant. Par défaut 9000 millisecondes
startheight : hauteur du contenu coulissant, 490 pixels par défaut.
startwidth : largeur du contenu coulissant, 890 pixels par défaut.
navigationType : affiche l'icône de changement de page, la valeur par défaut est "bullet" (point), si elle est définie sur "aucun", elle ne sera pas affichée. .
navigationArrows : affiche les flèches de changement de page. La valeur par défaut est nexttobullets, ce qui signifie que les flèches de changement de page gauche et droite sont affichées lorsque la souris glisse. Si la valeur est "aucun", elles ne seront pas affichées.
touchenabled : indique si le glissement tactile est autorisé. La valeur par défaut est activée, ce qui est autorisé s'il est désactivé, il n'est pas autorisé.
onHoverStop : s'il faut activer la pause lorsque la souris glisse, on : on, off : off.
fullWidth : s'il faut activer l'affichage plein écran du contenu de l'image, on : on, off : off.

Divers effets peuvent être définis pour chaque balise

data-transition : effet de glissement de contenu, vous pouvez définir les valeurs suivantes : boxslide, boxfade, slotzoom-horizontal, slotslide-horizontal, slotfade-horizontal, slotzoom-vertical, slotslide-vertical, slotfade-vertical, rideau-1, rideau-2 , rideau -3, slideleft, slideright, slideup, slidedown, fondu
data-slotamount : nombre de blocs carrés divisés lors de la commutation.
lien de données : lien d'image
data-delay : définissez le temps de séjour du contenu actuel du curseur

Pour chaque élément de li, vous pouvez définir les options suivantes pour obtenir divers effets.

Style d'animation, attribut de classe : la valeur de l'attribut de classe représente différents styles d'animation : 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 depuis la droite, lfl - Long depuis la gauche, fondu - fondu
data-x : déplacement horizontal de l'élément actuel par rapport à li
data-y : le déplacement vertical de l'élément actuel par rapport à li
vitesse des données : temps d'animation, millisecondes
data-start after : Attendez quelques secondes avant que l'élément actuel ne soit affiché
data-easing : animation de tampon, y compris easyOutBack... divers effets d'animation, veuillez vous référer à
jQuery Easing Animation Effect Extension

De plus, si vous souhaitez ajouter la timeline comme timer, vous pouvez ajouter le code suivant à la fin du contenu coulissant :

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.