I've encountered a small issue while trying to create a slider with images. As someone who is new to javascript and jquery, I attempted to build it based on my past experience with Codeacademy. However, the code that used to work fine there is now causing an error when I click the previous arrow. The console displays the message "Uncaught TypeError: currentSlide.fadeOut(...).removeCLass is not a function".
Here is the code snippet:
HTML:
<div class="slider">
<div class="slide slide1 active-slide">
</div>
<div class="slide slide2">
</div>
<div class="slide slide3">
</div>
<div class="slide slide4">
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="images/props/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="images/props/arrow-next.png"></a>
</div>
CSS:
.slider{
position:relative;
width:100%;
height:550px;
}
.slide{
background-size:cover;
background-repeat:no-repeat;
background-position:center;
display:none;
position:absolute;
top:0;
left:0;
width:100%;
}
.slide1{
background-image:url('images/main/slider/1.jpg');
height:100%
}
.slide2{
background-image:url('images/main/slider/2.jpg');
height:100%
}
.slide3{
background-image:url('images/main/slider/3.jpg');
height:100%
}
.slide4{
background-image:url('images/main/slider/4.jpg');
height:100%
}
.active-slide{
display:block;
}
JAVASCRIPT:
var main = function(){
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if (nextSlide.length == 0){
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot = $('.active-dot');
nextDot = currentDot.next();
if (nextDot.length == 0){
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function(){
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if (prevSlide.length == 0){
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600).removeCLass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot = $('.active-dot');
prevDot = currentDot.prev();
if (prevDot.lenth == 0){
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);