Simple Image Slider with Autoplay

Simple Image Slider with AutoPlay in JavaScript

This simple image slider has manual left and right controls and autoplay features using HTML, CSS, and JavaScript.

Watch Video Tutorial

https://youtu.be/PR9ZqwQx-kA

Live Preview.!

Image-1 Caption

Image-2 Caption

Image-3 Caption

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;700&display=swap');
  body{
      font-family: 'Nunito', sans-serif;
      background: radial-gradient(circle, rgba(240, 52, 52, 1) 20%, rgba(255, 203, 5, 1) 100%);
  }			
  .slider{
      width: 550px;
      height: 350px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0,0,0,0.2);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      background-clip: border-box;
      -webkit-background-clip: border-box;
      border: 6px solid rgba(255,255,255,0.5);
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      padding: 30px;
      overflow: hidden;
  }
  .slider-inner {
      width: 100%;
      height: 100%;				
  }
  .slider-inner .slide{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
      visibility: hidden;
      z-index: -1;
      overflow: hidden;
      transition: 0.5s ease-out;
  }
  .slider-inner .slide img{
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .slider-inner .slide h3{
      width: 100%;
      font-size: 16px;
      font-weight: 100;
      color: #fff;
      background-color: rgba(0,0,0,0.7);
      margin: 0;
      padding: 3px 10px;
      box-sizing: border-box;
      text-align: center;
      position: absolute;
      bottom: 0px;
      left: 0;
      margin-bottom: -25px;
      transition: 0.5s ease 0.5s;
  }
  .slider-inner .slide.current {
      opacity: 1;
      visibility: visible;
      z-index: 1;
  }
  .slider-inner .slide.current h3{
      bottom: 25px;
  }
  .slider-control{
      width: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: 10;
  }
  .slider-control .next,
  .slider-control .prev{
      display: inline-block;
      font-size: 30px;
      color: #eee;
      background-color: rgba(255,255,255,0.2);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      background-clip: border-box;
      -webkit-background-clip: border-box;
      border: 2px solid rgba(255,255,255,0.5);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);			
      padding: 0px 8px;
      cursor: pointer;
      border-radius: 1px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }
  .slider-control .next{
      right: 5px;
  }
  .slider-control .next:before{
      content: "\00BB";
      text-shadow: 0 0 2px rgba(0,0,0,0.8);
  }
  .slider-control .prev{
      left: 5px;
  }
  .slider-control .prev:before{
      content: "\00AB";
      text-shadow: 0 0 2px rgba(0,0,0,0.8);
  }
  .slider-control .next:hover,
  .slider-control .prev:hover{
      background-color: rgba(255,255,255,1);
  }
  .slider-control .next:hover:before,
  .slider-control .prev:hover:before{
      color: #333;
      text-shadow: none;
  }

HTML Code

<div class="slider">
<div class="slider-inner">
	<div class="slide current">
    	<img alt="" src="" />
        <h3>Image-1 Caption</h3>
    </div>
    <div class="slide">
    	<img alt="" src="" />
        <h3>Image-2 Caption</h3>
    </div>
    <div class="slide">
    	<img alt="" src="" />
        <h3>Image-3 Caption</h3>
    </div>
</div>
<div class="slider-control">
	<div class="prev"></div>
    <div class="next"></div>
</div>
</div>  

JavaScript Code

const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
const slides = document.querySelectorAll('.slide');
const auto = true;
const interval = 3000;
let initSlide;

next.addEventListener('click', function(){
    nextSlide();
    if (auto) {
        clearInterval(initSlide);
        initSlide = setInterval(nextSlide, interval);
    }
});

prev.addEventListener('click', function(){
    prevSlide();
    if (auto) {
        clearInterval(initSlide);
        initSlide = setInterval(nextSlide, interval);
    }				
});

const nextSlide = () => {
    const current = document.querySelector('.current');
    current.classList.remove('current');

    if (current.nextElementSibling) {
        current.nextElementSibling.classList.add('current');
    }
    else{
        slides[0].classList.add('current');
    }
    setTimeout(() => current.classList.remove('current'));
}

const prevSlide = () => {
    const current = document.querySelector('.current');
    current.classList.remove('current');

    if (current.previousElementSibling) {
        current.previousElementSibling.classList.add('current');
    }
    else{
        slides[slides.length - 1].classList.add('current');
    }
    setTimeout(() => current.classList.remove('current'));
}

if (auto) {
    initSlide = setInterval(nextSlide, interval);
}			

Simple Calculator using HTML CSS and JavaScript

Random Winner Picker System in JavaScript

Quote Maker UI Design in Adobe XD

Convert Quote Maker UI Design into HTML CSS