responsive full-screen auto slider 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

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

swiper.js demo — -autoslider

Auto Slider with Javascript

Learn this full screen slider demo from Traversy Media

link font-awesome for button arrow.

link google fonts called Amatic SC.

Each slide contains background and caption box.

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

Select all the dom needed.

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

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

With the setInterval function, nextSlide runs in 4 seconds automatically.

responsive when screen max width is 660px

the info box slide from bottom

👉Follow me for more useful web development content! love sharing🥰