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.

jQuery Image slider jQuery Image slider jQuery Image slider jQuery Image slider jQuery Image slider jQuery Image slider jQuery Image slider



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;
}


Download Code Files Total Downloads: 5135
Comments
19 January
2014
sticky
How can we add captions to the image?? Thank you for your help.
13 January
2014
El Diablo
Great guide - thank you for sharing :)
02 January
2014
Faisal sumra
This image slider is very easy to use and modyfy according to requirment. it impress me by fx function of different styles.
11 November
2013
Alidad Modjtabai
I love this thumbnail images, that is good idea for my shopping site, i was wondering if this possible to change images from mysql! for sample image file name in mysql and image file in folder and link to that images!

please let me know thanks.

Alidad
comments powered by Disqus