All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Basic Image Slideshow With Previous And Next Button Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery CSS | Written & Updated By - Pragati

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.

Basic Image Slideshow With Previous And Next Button Using jQuery

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

<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.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪