After following a tutorial on Youtube (https://www.youtube.com/watch?v=KkzVFB3Ba_o) about creating a JQuery image gallery, I realized that my implementation is not working at all. Despite carefully reviewing my code and fixing any errors I could find, the gallery still fails to function. What am I missing?
Here's a snippet of my HTML:
<div id="slider">
<ul class="slides">
<li class="slide"><img src="images/1.jpg"></li>
<li class="slide"><img src="images/2.jpg"></li>
<li class="slide"><img src="images/3.jpg"></li>
<li class="slide"><img src="images/4.jpg"></li>
<li class="slide"><img src="images/5.jpg"></li>
<li class="slide"><img src="images/6.jpg"></li>
</ul>
</div>
My CSS:
#slider
{
width: 720px;
height: 400px;
overflow: hidden;
}
#slider.slides
{
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider.slide
{
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
Javascript/jQuery section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $slider=$('#slider');
var $slideContainer=$slider.find('.slides')
var $slides=$slideContainer.find('.slide');
var width=720;
var animationSpeed=1000;
var pause = 3000;
var CurrentSlide=1;
var interval;
function startSlider()
{
interval= setInterval(function(){
$slider.animate({'margin-left': '-='+width},animationSpeed,function()
CurrentSlide++;
if (CurrentSlide===$slides.length){
CurrentSlide=1;
$slideContainer.css('margin-left',0);
}
});
},pause);
}
function pauseSlider()
{
clearInterval(interval);
}
$slider.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
startSlider();
});
</script>
Mentioned source folder for my project: https://drive.google.com/open?id=1M3kvUAWlCRqiZIWLLmTH_60qo0gsxzgT