Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Basic Image Slideshow With Previous And Next Button Using jQuery.

Tuesday, Apr 4, 2017

Tags:- jQuery HTML CSS

Image Slideshow is the best way to display multiple images without getting much space in your webpage.You can display as many images you want only with the space of single image. In this tutorial we will teach you how to build your own basic Image SlideShow with the help of jQuery.You may also like image slideshow with pause and resume function.

See Demo
Image SlideShow

To Make Basic Image SlideShow With Previous and Next Button It Takes Only Three Steps:-

  1. Make a HTML file and define markups for Image SlideShow
  2. Make a CSS file and define styling for Image SlideShow
  3. Make a Script file and define Effects for Image SlideShow

Step 1.Make a HTML file and define markups for Image SlideShow

We make a HTML file and save it with a name slideshow.html

<link rel="stylesheet" type="text/css" href="slideshow_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slideshow_effect.js"></script>

 <div id="slide_cont">
  <img src="images/image1.jpg" id="slideshow_image">
 <input type="image" id="prev_image" src="images/previous.png" >
 <input type="image" id="next_image" src="images/next.png" >
 <input type="hidden" id="img_no" value="0">


Step 2.Make a CSS file and define styling for Image SlideShow

Now we define styling for our Image SlideShow and save the file named slideshow_style.css

 box-shadow:0px 0px 10px 0px silver;

Step 3.Make a Script file and define Effects for Image SlideShow

In this we define effects for our SlideShow using jQuery and save it with a name slideshow_effect.js. You can dowload jQuery from this Site

 $( "#prev_image" ).click(function(){
 $( "#next_image" ).click(function(){

// Write all the names of images in slideshow
var images = [ "image1" , "image2" , "image3" , "image4" ];

function prev()
 $( '#slideshow_image' ).fadeOut(300,function()
  var prev_val = document.getElementById( "img_no" ).value;
  var prev_val = Number(prev_val) - 1;
  if(prev_val< = -1)
   prev_val = images.length - 1;
  $( '#slideshow_image' ).attr( 'src' , 'images/'+images[prev_val]+'.jpg' );
  document.getElementById( "img_no" ).value = prev_val;
 $( '#slideshow_image' ).fadeIn(1000);

function next()
 $( '#slideshow_image' ).fadeOut(300,function()
  var next_val = document.getElementById( "img_no" ).value;
  var next_val = Number(next_val)+1;
  if(next_val >= images.length)
   next_val = 0;
  $( '#slideshow_image' ).attr( 'src' , 'images/'+images[next_val]+'.jpg' );
  document.getElementById( "img_no" ).value = next_val;
 $( '#slideshow_image' ).fadeIn(1000);

You may also like simple image gallery with image preview using jQuery.In this step we write all the name of images we want to see in slideshow in images[] array then we have two functions prev() and next() everytime when we call these functions we get the value of hidden field of id img_no and we modify image src based on the value of img_no then we do simple maths to change images and then change the value of hidden field for further use. We use fadeIn() and fadeOut() effect you can use any effect you want. For more jQuery Effects you can also see our jQuery Effects Tutorial.

That's all, this is how to build a basic image slideshow with previous and next button using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Subscribe TalkersCode! One Of The Best
Web Development And Review Blog

Get Latest Tutorials And Reviews
Via Email