Basic jQuery Image Slider with Fade In Effect
File Size: | 1.56 MB |
---|---|
Views Total: | 8031 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A very basic and lightweight jQuery plugin to create an image slider/slideshow with a simple fade-in effect.
How to use it:
1. Include the latest version of jQuery library from a CDN.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Create an image slider with a little bit of markup.
<div id="slider"> <div> <div class="slide" style="display:none;"> <img src="1.jpg" alt="" /> </div> <div class="slide" style="display:none;"> <img src="2.jpg" alt="" /> </div> <div class="slide" style="display:none;"> <img src="3.jpg" alt="" /> </div> <div class="slide" style="display:none;"> <img src="4.jpg" alt="" /> </div> </div> </div>
3. The sample CSS to style the image slider.
#slider { width: 960px; height: 380px; position: relative; z-index: 0; overflow: hidden; padding: 9px; border: 1px solid #ccc; } .slide { float: left; width: 960px !important; } #slider img { width: 960px; height: 380px; position: relative; z-index: -100; } #prev, #next { z-index: 100; position: absolute; top: 45%; display: block; width: 32px; height: 32px; text-indent:-9999px; opacity: 0.8; } #prev { left: 25px; background: url(../images/prev.png) 0 0 no-repeat; } #next { right: 25px; background: url(../images/next.png) 0 0 no-repeat; } #prev:hover, #next:hover { opacity: 1; }
4. Add the following JS snippet to your javascript file or include the main.js
on your web page directly.
jQuery(document).ready(function(){ jQuery('<a id="prev" href="#">Prev</a>').appendTo("#slider"); jQuery('<a id="next" href="#">Next</a>').appendTo("#slider"); var slide = jQuery("#slider .slide"); jQuery("#slider .slide").first().show(); jQuery("#prev").click(function(){ var currentSlide = jQuery("#slider .slide:visible"); if (currentSlide.prev().length > 0) { currentSlide.prev().fadeIn("slow").show(); } else { slide.last().fadeIn("slow").show(); } currentSlide.fadeTo("slow").hide(); }); jQuery("#next").click(function(){ var currentSlide = jQuery("#slider .slide:visible"); if (currentSlide.next().length > 0) { currentSlide.next().fadeIn("slow").show(); } else { slide.first().fadeIn("slow").show(); } currentSlide.fadeTo("slow").hide(); }); });
This awesome jQuery plugin is developed by dmitriy-muratov. For more Advanced Usages, please check the demo page or visit the official website.