Le plug-in jQuery Elastislide implémente une carte de mise au point réactive, une commutation à défilement transparente, effect_jquery

Prend en charge le plug-in d'effets spéciaux de commutation de défilement transparent d'image de mise au point jQuery réactif Elastislide, un très beau plug-in d'effets spéciaux de carrousel d'images qui prend en charge les images de carrousel gauche et droite, les images de carrousel haut et bas, l'affichage mobile adaptatif et prend en charge de nombreux paramètres. configurations : orientation : 'horizontal' (commutation horizontale), vitesse : 500 (vitesse de commutation en millisecondes), easing : 'ease-in-out' (effet d'animation), minItems : 3 (nombre d'affichages par défaut), etc., navigateur compatibilité : IE8 et les navigateurs plus modernes peuvent être utilisés si les versions inférieures des navigateurs ne vous dérangent pas. Bien sûr, vous pouvez également utiliser des écrans tactiles mobiles.

Prend en charge le plug-in d'effets spéciaux de commutation de défilement transparent d'image de mise au point jQuery réactive Elastislide

Utilisation :

1. Chargez jQuery et les plug-ins

<script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquerypp.custom.js"></script> 
<script type="text/javascript" src="js/jquery.elastislide.js"></script> 
<link rel="stylesheet" type="text/css" href="css/elastislide.css" /> 

2.Contenu HTML

<ul id="carousel" class="elastislide-list"> 
<li><a href="#"><img src="images/small/1.jpg" alt="Le plug-in jQuery Elastislide implémente une carte de mise au point réactive, une commutation à défilement transparente, effect_jquery" /></a></li> 
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 
</ul> 

3. Appel de fonction

<script type="text/javascript"> 
$(document).ready(function() { 
  $( '#carousel' ).elastislide(); 
}); 
</script> 

Voir la DÉMO Télécharger

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