Simple jQuery Auto Loop Image Slideshow Plugin
File Size: | 1.02 MB |
---|---|
Views Total: | 2796 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
![Simple jQuery Auto Loop Image Slideshow Plugin](https://www.jqueryscript.net/images/Simple-jQuery-Auto-Loop-Image-Slideshow-Plugin.jpg)
Just another jQuery image slideshow plugin that features auto play, infinite loop, pause on hover and fade in/out transitions.
Basic Usage:
1. Load the required jQuery javascript library on your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Create the Html for an image slider with next/prev controls.
<div id="slider"> <img id="1" src="images/image1.png"/> <img id="2" src="images/image2.jpg"/> <img id="3" src="images/image3.jpg"/> <img id="4" src="images/image4.jpg"/> </div> <a class="left" href="#">Previous</a> <a class="right" href="#">Next</a>
3. The jQuery script.
sliderInt = 1; sliderNext = 2; $(document).ready(function() { $("#slider > img#1").fadeIn(300); startSlider(); }); function startSlider() { count = $("#slider > img").size(); function loop() { $("#slider > img").fadeOut(300); $("#slider > img#" + sliderNext).fadeIn(300); sliderInt = sliderNext; sliderNext = sliderNext + 1; if(sliderNext > count) { sliderNext = 1; } } interval = setInterval(loop, 3000); $("img").hover(function() { clearInterval(interval); $("p").fadeIn(0); }, function() { interval = setInterval(loop, 3000); $("p").fadeOut(0); }); $("a.left").click(function() { clearInterval(interval); sliderNext = sliderInt - 1; if(sliderInt == 1) { sliderNext = 4; } $("#slider > img").fadeOut(300); $("#slider > img#" + sliderNext).fadeIn(300); sliderInt = sliderNext; sliderNext = sliderNext + 1; if(sliderNext > count) { sliderNext = 1; } interval = setInterval(loop, 3000); }); $("a.right").click(function() { clearInterval(interval); sliderNext = sliderInt + 1; if(sliderInt == 4) { sliderNext = 1; } $("#slider > img").fadeOut(300); $("#slider > img#" + sliderNext).fadeIn(300); sliderInt = sliderNext; sliderNext = sliderNext + 1; if(sliderNext > count) { sliderNext = 1; } interval = setInterval(loop, 3000); }); };
4. The sample CSS to style the slider and controls.
#slider { width: 600px; height: 400px; overflow: hidden; margin: 30px auto; } #slider > img { width: 600px; height: 400px; float: left; display: none; } p { text-align: center; display: none; color: red; } a { padding: 5px 10px; background-color: #f7f7f7; margin-top: 30px; text-decoration: none; color: #666; } a.left { float: left; } a.right { float: right; }
This awesome jQuery plugin is developed by sahilda. For more Advanced Usages, please check the demo page or visit the official website.