Dynamic Web - Class 9 - Slider

HTML

<div class="slider-container">
    <div class="slides-container">
        <div class="slide-item" style="background-color:#F00">
            
        </div>
        <div class="slide-item" style="background-color:#0F0">
            slide 2
        </div>
        <div class="slide-item" style="background-color:#00F">
            slide 3
        </div>
    </div>
    <div class="slides-container">
        <div class="slide-item1" style="background-color:#F00">
            
        </div>
        <div class="slide-item1" style="background-color:#0F0">
            slide 2
        </div>
        <div class="slide-item1" style="background-color:#00F">
            slide 3
        </div>
    </div>
</div>

<span class="next">NEXT</span>
<span class="prev">PREV</span>

CSS

.slider-container {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #ccc;
    overflow: hidden;
}

.slides-container {
    position: absolute;
    width: 1000px;
    background-color: #FF0;
}

.slides-containercap {
    top:60px;
    position: absolute;
    width: 1000px;
    background-color: #000;
    
}

.slide-item {
    width: 300px;
    height: 50px;
    float: left;
}

.slide-item1 {
    width: 300px;
    height: 50px;
    float: left;
}

JavaScript

var $slidesContainer = $(".slides-container");
var $slideItems = $(".slide-item");
var $slideItems = $(".slide-item1");
var slideWidth = $slideItems.width();
var totalSlides = $slideItems.length;
var currentSlide = 0;

function slideNext(){
    currentSlide += 1;
    
    if (currentSlide >= totalSlides){
        // when the last slide is reached, go back to 1
        currentSlide = 0; // reset counter
        $slidesContainer.animate({
            left: 0 // go back to the beginning
        });
    } else {
        $slidesContainer.animate({
            left: -(slideWidth * currentSlide)
        });
    }
}

// slideNext();

function slidePrev(){
    // slide backwards, but it continues into emptyness!
    if (currentSlide <= 0){
        // go to end of slideshow if at the beginning
        currentSlide = totalSlides -1; // set to last item
        $slidesContainer.animate({
            left: -(slideWidth * currentSlide)
        });
        return;
    } else {
        currentSlide -= 1;
        $slidesContainer.animate({
            left: -(slideWidth * currentSlide)
        });
    }
}

/* NEXT/PREV click event listeners */
$(".next").on("click", function(){
    slideNext();
});

$(".prev").on("click", function(){
    slidePrev();
});