Last updated on May 10th, 2022 at 05:22 pm
This tutorial walk you through the process of creating a image slideshow using jQuery. Let us load the jQuery library first. Latest available at the time of writing this tutorial is 3.6.0
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Add the below Javascript and jQuery script. This will add some function that help us in navigating images inside the slider-wrapper div. It also have an area to display the description of each image.
Update these variables according to your preference.
var SlideWidth = 550;
var SlideSpeed = 500;
Complete Javascript/Jquery code below, I have added some comments before each variables for your convenience.
var SlideWidth = 550;
var SlideSpeed = 500;
$(document).ready(function () {
// set the prev and next buttons display
SetNavigationDisplay();
});
function CurrentMargin() {
// get current margin of slider
var currentMargin = $("#slider-wrapper").css("margin-left");
// first page load, margin will be auto, we need to change this to 0
if (currentMargin == "auto") {
currentMargin = 0;
}
// return the current margin to the function as an integer
return parseInt(currentMargin);
}
function SetNavigationDisplay() {
// get current margin
var currentMargin = CurrentMargin();
// if current margin is at 0, then we are at the beginning, hide previous
if (currentMargin == 0) {
$("#PreviousButton").hide();
}
else {
$("#PreviousButton").show();
}
// get wrapper width
var wrapperWidth = $("#slider-wrapper").width();
// turn current margin into postive number and calculate if we are at last slide, if so, hide next button
if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
$("#NextButton").hide();
}
else {
$("#NextButton").show();
}
}
function NextSlide() {
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() - SlideWidth;
// slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() });
}
function PreviousSlide() {
// get the current margin and subtract the slide width
var newMargin = CurrentMargin() + SlideWidth;
// slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
$("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() });
}
Add some style to the slideshow using CSS
You might also be interested in Automatic Image slideshow with fade in / out effect
#container
{
width: 550px;
overflow: hidden;
border: 1px;
background-color:#000;
}
/* SET TO THE TOTAL WIDTH OF ALL DIVS */
#slider-wrapper
{
width: 2200px;
}
/* THESE ARE THE INDIVIDUAL SLIDE PROPERTIES */
.slide
{
width: 550px;
height: 200px;
overflow: hidden;
border: 1px;
float: left;
color:#fff;
}
HTML with Images added
This also has some Javascript navigation links added to the bottom which calls functions NextSlide and PreviousSlide along with description of each image added inside each div with id’s slide1 , slide2 etc.,
<div id="container">
<!-- OUTTER WRAPPER -->
<div id="slider-wrapper">
<!-- SLIDE 1 -->
<div id="slide1" class="slide">
<img src="/Uploaded_Images/jquery-sliding-div-1.jpg" alt="Slide 1" style="float: left;
margin-right: 20px;" />
<h2>
THIS IS SLIDE 1</h2>
<p>
This is the description that I put for slide one. You can use any html elements
or put anything you wish in these containers.
</p>
</div>
<!-- SLIDE 2 -->
<div id="slide2" class="slide">
<img src="/Uploaded_Images/jquery-sliding-div-2.jpg" alt="Slide 2" style="float: left;
margin-right: 20px;" />
<h2>
THIS IS SLIDE 2</h2>
<p>
This is the description that I put for slide two. You can use any html elements
or put anything you wish in these containers.
</p>
</div>
<!-- SLIDE 3 -->
<div id="slide3" class="slide">
<img src="/Uploaded_Images/jquery-sliding-div-3.jpg" alt="Slide 3" style="float: left;
margin-right: 20px;" />
<h2>
THIS IS SLIDE 3</h2>
<p>
This is the description that I put for slide three. You can use any html elements
or put anything you wish in these containers.
</p>
</div>
<div id="slide4" class="slide">
<img src="/Uploaded_Images/jquery-sliding-div-3.jpg" alt="Slide 4" style="float: left;
margin-right: 20px;" />
<h2>
THIS IS SLIDE 4</h2>
<p>
This is the description that I put for slide four. You can use any html elements
or put anything you wish in these containers.
</p></div>
</div>
</div>
<!--- NAVIGATION BUTTONS -->
<a href="javascript:void(0)" onclick="NextSlide()" id="NextButton">Next
Slide</a>
<a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="margin-right: 10px;">
Previous Slide</a>
admin