Currently, I am experiencing an issue with my custom slider where the auto sliding set interval function is not working after using the bullet navigation. Despite trying to implement "setTimeout(autoSlide, 1000);", it doesn't seem to be resolving the problem. Below is the code snippet that I have been working on. Any assistance or solution provided would be greatly appreciated. Thank you.
<!doctype html>
<head>
<title> Custom Slider </title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
.slide
{
float: left;
width: 960px;
height: 300px;
background-color: #000;
}
.slide h1
{
color: #fff;
}
#container
{
width: 960px;
overflow: hidden;
margin: auto;
margin-top: 100px;
}
#wrapper
{
position: relative;
right: 0px;
}
#bullets li
{
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div class="slide">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
<div style="clear: both;"> </div>
</div>
</div>
<ol id="bullets">
</ol>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideWidth = $('.slide').width();
var slideLength = $('.slide').length;
var totalWidth = slideWidth * slideLength;
$('#wrapper').css('width', totalWidth);
var currentPos = $('#wrapper').position().right;
var currentIndex = 0;
var autoSlide;
function slideAuto(){
currentIndex += 1;
if(currentIndex > slideLength - 1)
{
currentIndex = 0;
}
$('#wrapper').animate({right: currentIndex * slideWidth});
}
var autoSlide = setInterval(slideAuto, 1000);
$('.slide').each(function(){
$('#bullets').append('<li class="bullet"> </li>');
});
$('.bullet').click(function(){
clearInterval(autoSlide);
var bulletIndex = $(this).index();
if(bulletIndex > slideLength - 1)
{
bulletIndex = 0;
}
$('#wrapper').animate({right: bulletIndex * slideWidth});
currentIndex = bulletIndex;
setTimeout(autoSlide, 1000);
});
});
</script>
</body>