I have recently set up a div element for my slideshow. I've included a script to enable navigation using next and previous arrows. However, I am looking to add an automatic slideshow feature that stops on hover. As a beginner, I would appreciate any assistance in achieving this.
<div id="slideshow">
<a href="#" class="slideshow-prev">«</a>
<ul>
<li><img src="images/1.jpg" alt="photo1" /></li>
<li><img src="images/2.jpg" alt="photo2" /></li>
<li><img src="images/3.jpg" alt="photo3" /></li>
<li><img src="images/4.jpg" alt="photo4" /></li>
<li><img src="images/5.jpg" alt="photo5" /></li>
</ul>
<a href="#" class="slideshow-next">»</a>
</div>
<script>
//an image width in pixels
var imageWidth = $('#slideshow ul li').width();
//DOM and all content is loaded
$(window).ready(function() {
var currentImage = 0;
//set image count
var allImages = $('#slideshow li img').length;
//setup slideshow frame width
$('#slideshow ul').width(allImages*imageWidth);
//attach click event to slideshow buttons
$('.slideshow-next').click(function(){
//increase image counter
currentImage++;
//if we are at the end let set it to 0
if(currentImage>=allImages) currentImage = 0;
//calculate and set position
setFramePosition(currentImage);
});
$('.slideshow-prev').click(function(){
//decrease image counter
currentImage--;
//if we are at the end let set it to 0
if(currentImage<0) currentImage = allImages-1;
//calculate and set position
setFramePosition(currentImage);
});
// Automatic slideshow function
setInterval(function(){
currentImage++;
if(currentImage >= allImages){
currentImage = 0;
}
setFramePosition(currentImage);
}, 5000); // Change slide every 5 seconds
// Stop slideshow on hover
$('#slideshow').hover(function(){
clearInterval();
}, function(){
setInterval(function(){
currentImage++;
if(currentImage >= allImages){
currentImage = 0;
}
setFramePosition(currentImage);
}, 5000); // Resume slideshow after hovering out
});
});
//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos){
//calculate position
var px = imageWidth*pos*-1;
//set ul left position
$('#slideshow ul').animate({
left: px
}, 300);
}
</script>
I just created a div for my slideshow. Below I have script for make this slideshow workable using next and previous arrows. I want to make same slide to work auto slideshow and on hover it stop. Any one can help me out how do I do ? as I am beginner to this If possible, can someone please provide me with a JavaScript code that will automatically play the slide show