Photo Slider w/ JSON data block

by lasha

HTML

<span class="prevSlide">PREV</span>
<span class="nextSlide">NEXT</span>

<div class="slider-container">
    <div class="slider-images-container">
        <!--images will get inserted here-->
    </div>
    
    <div class="slider-text-container">
        <!--text will get inserted here-->
    </div>
</div>

CSS

.slider-container {
    position: relative;
}

.slider-images-container {
    position: relative;
    border: 1px solid #000;
    height: 150px;
}

.slider-text-container {
    position: relative;
    border: 1px solid #000;
    height: 120px;
    margin-top: 10px;
}

.slideItem {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .6s ease-in-out;
}

.slideItem.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.slideTextItem {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    padding: 0;
    margin: 0;
    -webkit-transition: all .6s ease-in-out;
}

.slideTextItem.active {
    display: block;
    opacity: 1;
    visibility: visible;
    padding: 0;
    margin: 0;
}

JavaScript

var sliderData = {
    "0": {
        "imageSrc": "http://placehold.it/350x150/ff0",
        "imageTxt": "0. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ultrices consectetur dapibus. Nulla facilisi. Vestibulum porta sagittis sem, sed tincidunt orci tincidunt et."
    },
    "1": {
        "imageSrc": "http://placehold.it/350x150/f5f",
        "imageTxt": "1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ultrices consectetur dapibus. Nulla facilisi. Vestibulum porta sagittis sem, sed tincidunt orci tincidunt et. Aenean et nulla magna. Duis at urna orci. Duis cursus dignissim eros. Nulla dignissim varius dictum. Mauris sagittis pretium viverra."
    },
    "2": {
        "imageSrc": "http://placehold.it/350x150/fdf",
        "imageTxt": "2. Nulla facilisi. Vestibulum porta sagittis sem, sed tincidunt orci tincidunt et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ultrices consectetur dapibus."
    }
};

var $imagesContainer = $(".slider-images-container");
var $textContainer = $(".slider-text-container");

for(var slide in sliderData){
    if (!sliderData.hasOwnProperty(slide)) continue;
    var sliderImage = sliderData[slide].imageSrc;
    var sliderText = sliderData[slide].imageTxt;
    
    $imagesContainer.append('<img class="slideItem" src="'+ sliderImage +'">');
    $textContainer.append('<p class="slideTextItem">'+ sliderText +'</p>');
    console.log(slide);
}

var totalSlides;
function initSlider(){
    $imagesContainer.find(".slideItem").eq(0).addClass("active");
    $textContainer.find(".slideTextItem").eq(0).addClass("active");
    totalSlides = $imagesContainer.find(".slideItem").length;
}

function nextSlide(){
    var $currentSlide = $(".slideItem.active"),
        $currentText = $(".slideTextItem.active");
    var currentSlideIndex = $currentSlide.index();
    if (currentSlideIndex >= totalSlides-1){
        console.log("if", currentSlideIndex);
        $imagesContainer
           ...