Basic Image Slideshow With Previous And Next Button Using jQuery
Last Updated : Jul 1, 2023
In this tutorial we will teach you how to build your own basic Image SlideShow with the help of jQuery, 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. You may also like image slideshow with pause and resume function.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Make Basic Image SlideShow With Previous and Next Button It Takes Only Three Steps:-
- Make a HTML file and define markups for Image SlideShow
- Make a CSS file and define styling for Image SlideShow
- 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
<html> <head> <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> </head> <body> <center> <div id="slide_cont"> <img src="images/image1.jpg" id="slideshow_image"> </div> <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"> </center> </body> </html>
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
#slide_cont { box-shadow:0px 0px 10px 0px silver; width:600px; height:400px; margin-top:100px; } #slideshow_image { width:600px; height:400px; } #prev_image,#next_image { width:40px; height:40px; }
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
$(document).ready(function(){ $( "#prev_image" ).click(function(){ prev(); }); $( "#next_image" ).click(function(){ next(); }); }); // 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.
I hope this tutorial on multiple image slider jquery example helps you and the steps and method mentioned above are easy to follow and implement.