How to Make Your Own Slide Show Using JQuery (A Simple One)

First of all, you will create the HTML structure of the images that will rotate in the slideshow as I created as follows

<div id="slideshow-area">
<div id="slideshow-scroller">
<div id="slideshow-holder">
<div class="slideshow-content">
<img src="https://via.placeholder.com/150">
</div>
<div class="slideshow-content">
<img src="https://via.placeholder.com/150">
</div>
<div class="slideshow-content">
<img src="https://via.placeholder.com/150">
</div>
</div>
</div>
<div id="slideshow-previous"></div>
<div id="slideshow-next"></div>
</div>

in this Html structure, the div that contains the images can contain anything that you want to rotate in the slides. it depends on your skills when you use this in the php then you place a loop there. but now it is Html so we will discuss only HTML here.

After this we will go for some css that will effect the silde show,

#slideshow-area, #slideshow-scroller {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
margin: 0 auto;
}

#slideshow-area {
border: 1px solid #000;
}
#slideshow-holder {
height: 500px;
}
#slideshow-previous, #slideshow-next {
width: 50px;
height: 50px;
position: absolute;
background: transparent url("prev.gif") no-repeat 50% 50%;
top: 225px;
display: none;
cursor: pointer;
cursor: hand;
}

#slideshow-next {
display: block;
background: transparent url("next.gif") no-repeat 50% 50%;
top: 225px;
right: 0;
}

.slideshow-content {
float: left;
}

If you are good in CSS then you understand this, as it’s the best online casino easy one for those who understand CSS.

At the end the main thing is the script that will run the slideshow.

var totalSlides = 0;
var currentSlide = 1;
var contentSlides = "";$(document).ready(function(){
$("#slideshow-previous").click(showPreviousSlide);
$("#slideshow-next").click(showNextSlide);var totalWidth = 0;
contentSlides = $(".slideshow-content");
contentSlides.each(function(i){
totalWidth = this.clientWidth;
totalSlides ;
});
$("#slideshow-holder").width(totalWidth);
$("#slideshow-scroller").attr({scrollLeft: 0});
updateButtons();
});
function showPreviousSlide()
{
currentSlide--;
updateContentHolder();
updateButtons();
}function showNextSlide()
{
currentSlide ;
updateContentHolder();
updateButtons();
}function updateContentHolder()
{
var scrollAmount = 0;
contentSlides.each(function(i){
if(currentSlide - 1 > i) {
scrollAmount = this.clientWidth;
}
});
$("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);
}

function updateButtons()
{
if(currentSlide < totalSlides) {
$("#slideshow-next").show();
} else {
$("#slideshow-next").hide();
}
if(currentSlide > 1) {
$("#slideshow-previous").show();
} else {
$("#slideshow-previous").hide();
}
}

here is the function of the Script that will work in the slideshow, when you click on the next or previous image that was added by the use of CSS. the slideshow will work smoothly. and the last one important thing that you should know when you working with scripts in jquery. add the jquery libraries in your header section of the file by placing the following line in your header

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

If you do not add the last code in any script the script will not run. Hope you understand this, there may also b more tutorials about this, I found this one is easy among them all so I shared it!