responsive full screen autoslider with Javascript

I've tried so many demos about slider with or without libraries.

Here is other slider demos for reference:

carousel with html,css and javascript

css animation slider

slick.js---fully functional slides example

Rotating Slider jQuery Plugin

Javascript Animated Frame Slideshow

xSlider.js---automatic slider plugin with jQuery

View Switcher without JavaScript

Css Slider Without JavaScript

flexslider.js demo

swiper.js demo---autoslider

Auto Slider with Javascript

Learn this full screen slider demo from Traversy Media

Github 

HTML

CSS

JS

Step1:

link font-awesome for button arrow .

link google fonts called Amatic SC.

Step2:

structures

Each slide contains background and caption box.

Step3:

When the slide named current, opacity changes,meanwhile the content inside slide in with animation.

Step4:

JS

Select all the dom needed. 

The function nextSlide and prevSlide are both manipulated with class named current.

When click next button, the current class will be removed and added on next sibling slide. There are two special situations:when reach last slide click next or first slide click prev. 

With setInterval function, nextSlide run in 4 second automatically.

Step5:

responsive when screen max width is 660px 

the info box slide from bottom