jQuery Image Slider With Thumbnail

Let's create a simple jQuery image slider using jQuery cycle plugin, with next previous button and thumbnails. You didn't need to create the thumbnail seperately. Cycle plugin will create the thumbnails from the main image. To display slider effect we have used "scrollHorz" option here. You can use any for the following effect and test your slider.

Transition effect supported by cycle plugin are

blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom. You can download cycle plugin js file from here.

HTML Code:

 

<div id="slider1">
<img border="0" src="images/img1.jpg" width="625" height="345" alt="" />
<img border="0" src="images/img2.jpg" width="625" height="345" alt="" />
<img border="0" src="images/img3.jpg" width="625" height="345" alt="" />
<img border="0" src="images/img4.jpg" width="625" height="345" alt="" />
<img border="0" src="images/img5.jpg" width="625" height="345" alt="" />
<img border="0" src="images/img6.jpg" width="625" height="345" alt="" />
<img border="0" src="images/img7.jpg" width="625" height="345" alt="" />
</div>
<ul id="thumb"> </ul>
<div id='next' class="slider_next"><img src="images/next.png" alt=""/></div>
<div id='prev' class="slider_prev"><img src="images/prev.png" alt=""/></div>

jQuery Code

$(document).ready(function(){
   $('#slider1').cycle({
   fx: 'scrollHorz', // Here you can change the effect
   speed: 'slow', 
   timeout: 0,
   next: '#next', 
   prev: '#prev',
   pager: '#thumb',
   pagerAnchorBuilder: function(idx, slide) { 
     return '<li><a href="#"><img src="' + slide.src + '" /></a></li>'; 
   } 
  });
});

CSS Code

.slider{
   margin: 0 auto;
   width: 625px;
   height: 345px;
   border: 8px solid #FFFFFF;
   border-radius:5px;
   box-shadow: 2px 2px 4px #333333;
   position: relative;
}
.slider_next{
   width: 57px;
   height: 57px;
   background: #f8f8f8;
   border-radius: 65px;
   position: absolute;
   z-index: 99;
   top: 136px;
   left: 592px;
   padding: 5px; 
   cursor: pointer;
}
.slider_prev{
   width: 57px;
   height: 57px;
   background: #f8f8f8;
   border-radius: 65px;
   position: absolute;
   z-index: 99;
   top: 136px;
   left: -35px;
   padding: 5px; 
   cursor: pointer;
}

CSS Code to Generate thumbnails

#thumb { 
  width: 100%; 
  height: 80px; 
  margin: 20px 5px; 
}
#thumb li { 
  width: 60px; 
  float: left; 
  margin: 12px; 
  list-style: none 
}
#thumb a { 
  width: 60px; 
  padding: 3px; 
  display: block; 
  border: 3px solid #FFFFFF;
  border-radius:3px;
  box-shadow: 1px 1px 3px #333333;
}
#thumb li.activeSlide a { 
  border: 3px solid #0a526f;
  border-radius:3px;
  box-shadow: 1px 1px 3px #333333;
}
#thumb a:focus { 
  outline: none; 
}
#thumb img { 
  border: none; 
  display: block;
}