Home >Web Front-end >JS Tutorial >The jQuery plug-in Elastislide implements responsive focus map seamless scrolling switching effects_jquery
Supports responsive jQuery focus image seamless scrolling switching special effects plug-in Elastislide, a very beautiful picture carousel special effects plug-in that supports left and right carousel pictures, up and down carousel pictures, adaptive mobile display, and supports numerous parameter configurations: orientation: 'horizontal' (horizontal switching), speed: 500 (switching speed in milliseconds), easing: 'ease-in-out' (animation effect), minItems: 3 (default number of displays), etc., browser compatibility : IE8 and more modern browsers can be used if you don’t mind lower version browsers. Of course, you can also use mobile touch screens.
Supports responsive jQuery focus image seamless scrolling switching special effects plug-in Elastislide
Usage:
1. Load jQuery and 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.HTML content
<ul id="carousel" class="elastislide-list"> <li><a href="#"><img src="images/small/1.jpg" alt="The jQuery plug-in Elastislide implements responsive focus map seamless scrolling switching effects_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. Function call
<script type="text/javascript"> $(document).ready(function() { $( '#carousel' ).elastislide(); }); </script>
The above is the entire content of this article, I hope you all like it.