Simple Image Slider Using JQuery and CSS

Introduction

Creating an image slider is one of the most important thing one needs while developing a website. You may need to implement image slider for many reasons, here I will show you the simplest example of creating a image slider using only JQuery and CSS. This is the simplest way to implement this instead of using others JQuery library for Image Slider

Download Source Code Here

Behind The Scene

Here I am taking a simple html web page in which I will place a single div containing your images, those are for slider. Give an id to the div that will be used in the JQuery function we will write for the slider.

 <div id="s_show" class="divMain" style="margin-top: 5px; height: 155px;">
   <img class=" active" width="100%" src="images/home-1.jpg" style="opacity: 1;">
   <img class=" " width="100%" src="images/home-2.jpg" style="opacity: 1;">
   <img class=" " width="100%" src="images/home-4.jpg" style="opacity: 1;">
 </div>

Now add a floder to th root folder and named it as "images"  inside this folder put the images you want to show, and the JQuery files "jquery-1.4.1.js", "jquery-1.4.1.min.js".

Now add the following line of styles to the page .

 <style type="text/css">
 #s_show {
  position: relative;
  height: 350px;
 }
 #s_show IMG{
  position: absolute;
  top: -4px;
  left: 0px;
  z-index: 8;
  opacity: 0.0;
  height: 200px;
  width: 100%;
 }
 #s_show IMG.active{
  z-index: 10;
  opacity: 1.0;
 }
 #s_show IMG.last-active{
  z-index: 9;
 }
 .divMain{
  width: 721.2px;
  margin: 40px auto 0 auto;
  padding: 20px 35px;
  background: #FFFFFF;
 }
 .section{
  border: 1px groove #9FD0F6;
  border-right-width: 5px;
  width: 255px;
  float: left;
  background: #FFFFFF;
  margin-right: 5px;
  height: 155px;
 } 
</style> 

Fine, now add the below given script to the head section of the web page. And also add the "jquery-1.4.1.js" and "jquery-1.4.1.min.js" files to the header section of the page.

<script src="images/jquery-1.4.1.js" type="text/javascript"></script>
<script src="images/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
function slideShow() {
 var $active = $('#s_show IMG.active');
 if ($active.length == 0) $active = $('#s_show IMG:last');
 var $next = $active.next().length ? $active.next()
 : $('#s_show IMG:first');
 $active.addClass('last-active');
 $next.css({ opacity: 0.0 })
 .addClass('active')
 .animate({ opacity: 1.0 }, 1000, function () {
 $active.removeClass('active last-active');
 });
 }
 
$(function () {
 setInterval("slideShow()", 3000);
});
</script> 

Now you are done with your own image slider. For complete project download it form the above link and just run it.

Happy Coding...