Home » Javascript » Vanilla Javascript slider not working

Vanilla Javascript slider not working

Posted by: admin November 1, 2017 Leave a comment

Questions:

There are 3 css classes/phases.

The active class is the current background that is show.

The unactive class is given to the previous background. And it makes the background slide out to the left of the screen.

The transport class is given to the background after it has received the unactive class. The transport class moves the background back to the right of the screen.

The slider totally ignores the unactive class for some reason. The background never slides to the left of the screen.

var slides = document.getElementsByClassName('bg');

var i = 0;

// When page loads show first background
(function() {
    slides[i].className += ' active';

    i++;
})();

function changeSlide() {
    // Slide previous slide to the left of the screen
    if(i === 0) {
        slides[2].className = 'bg unactive';
    }
    else {
        slides[i - 1].className = 'bg unactive';
    }

    // Slide the current slide in from the right of the screen
    slides[i].className += ' active';

    // Make the slide go back to the right of the screen
    if(i === 0) {
        slides[2].className = 'bg transport';

        slides[2].className = 'bg';
    }
    else {
        slides[i - 1].className = 'bg transport';

        slides[i - 1].className = 'bg';
    }

    i++

    if(i === slides.length) {
        i = 0;
    }
}

setInterval(changeSlide, 2000);
* {
    margin: 0;
    padding: 0;
}

html, body, .bg {
    width: 100%;
    height: 100%;
}

.bg {
    position: absolute;
    left: 100%;
    background-color: tan;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

/* The background that is shown */
.active {
    position: absolute;
    left: 0;
}

/* Make the background go to the left of the screen */
.unactive {
    position: absolute;
    left: -100%;  
}

/* Hide the background and make it go back to the right of the screen */
.transport {
    display: none;
    position: absolute;
    left: 100%;
    z-index: -1;
}
<!-- background 1 -->
<div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">  
</div>

<!-- background 2 -->
<div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">  
</div>

<!-- background 3 -->
<div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>
Answers:

You are overwriting unactive with slides[ ].className = 'bg'; a few lines below (same with transport), therefore its never applied.

I also had to change some z-index values and remove a few things to make it work. (See the comments in the code)

var slides = document.getElementsByClassName('bg');

var i = 0;

// When page loads show first background
(function() {
    slides[i].className += ' active';

    i++;
})();

function changeSlide() {
    // Slide previous slide to the left of the screen
    if(i === 0) {
        slides[slides.length-1].className = 'bg unactive';//Changed 2 to slides.length-1 to avoid hardcoding values
    }
    else {
        slides[i - 1].className = 'bg unactive';
    }

    // Slide the current slide in from the right of the screen
    slides[i].className = 'bg active';// removed += to override transport

    // Make the slide go back to the right of the screen
    
    // prepare NEXT slide
    if(i === slides.length-1) {
        slides[0].className = 'bg transport';

        //slides[2].className = 'bg';    // dont override transport
    }
    else {
        slides[i + 1].className = 'bg transport';

        //slides[i - 1].className = 'bg';    // dont override transport
    }

    i++

    if(i === slides.length) {
        i = 0;
    }
}

setInterval(changeSlide, 2000);
* {
    margin: 0;
    padding: 0;
}

html, body, .bg {
    width: 100%;
    height: 100%;
}

.bg {
    position: absolute;
    left: 100%;
    background-color: tan;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

/* The background that is shown */
.active {
    position: absolute;
    left: 0;
}

/* Make the background go to the left of the screen */
.unactive {
    position: absolute;
    left: -100%;  
    z-index: -1; /*added*/
}

/* Hide the background and make it go back to the right of the screen */
.transport {
    /*display: none;*/
    position: absolute;
    left: 100%;
    z-index: -2; /*changed to -2*/
}
<!-- background 1 -->
<div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">  
</div>

<!-- background 2 -->
<div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">  
</div>

<!-- background 3 -->
<div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>