Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility - HTML CSS Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to design a Responsive Image Slider(Slideshow / Carousel) with Manual Navigation Buttons and Auto-Play Navigation functionalities only using pure javascript. In this Image Slider, you can add more images you want without changing any CSS styles because manual image transitions and auto-play image transitions working with vanilla javascript. This image slider is fully responsive and perfectly fine for any device screen. And there is a text title and a text paragraph description on each image on the slider.

First, create the index.html file and the style.css file. After you created these two files, Add the responsive meta tag and link the style.css file in between <head></head> tags to the index.html file. Then start the HTML part of the responsive image slider in the index.html file as you can see in the video. After the HTML part of the image slider is complete, then go to the style.css file and do the styling part of the product card as you can see in the video. After the styling part with the responsive styling part of the image slider is complete, then go to the index.html file to start the javascript part of the image slider manual and auto transitions. In the index.html file before the body close tag open <script></script> tags and then complete the javascript part of the image slider to transition images when clicking navigation buttons and auto transition on a time out as you can see in the video. Here we are using CSS clip-path property to the slide transition. So that's all, Hope this video will be helpful to design an awesome responsive image slider using HTML, CSS, and Vanilla Javascript.

Recommended For You

Responsive Image Slider With Next & Previous Buttons | Autoplay - Pause/Play

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Slider | With Manual Buttons and Autoplay Navigation Visibility</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

<div class="img-slider">
      <div class="slide active">
        <img src="1.jpg" alt="">
        <div class="info">
          <h2>Slide 01</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="slide">
        <img src="2.jpg" alt="">
        <div class="info">
          <h2>Slide 02</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="slide">
        <img src="3.jpg" alt="">
        <div class="info">
          <h2>Slide 03</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="slide">
        <img src="4.jpg" alt="">
        <div class="info">
          <h2>Slide 04</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="slide">
        <img src="5.jpg" alt="">
        <div class="info">
          <h2>Slide 05</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="navigation">
        <div class="btn active"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
        <div class="btn"></div>
      </div>
    </div>

// Javascript for image slider manual navigation
    var manualNav = function(manual){
      slides.forEach((slide) => {
        slide.classList.remove('active');

btns.forEach((btn) => {
          btn.classList.remove('active');
        });
      });

slides[manual].classList.add('active');
      btns[manual].classList.add('active');
    }

btns.forEach((btn, i) => {
      btn.addEventListener("click", () => {
        manualNav(i);
        currentSlide = i;
      });
    });

// Javascript for image slider autoplay navigation
    var repeat = function(activeClass){
      let active = document.getElementsByClassName('active');
      let i = 1;

var repeater = () => {
        setTimeout(function(){
          [...active].forEach((activeSlide) => {
            activeSlide.classList.remove('active');
          });

slides[i].classList.add('active');
        btns[i].classList.add('active');
        i++;

if(slides.length == i){
          i = 0;
        }
        if(i >= slides.length){
          return;
        }
        repeater();
      }, 10000);
      }
      repeater();
    }
    repeat();
    </script>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1D212B;
}

.img-slider{
  position: relative;
  width: 800px;
  height: 500px;
  margin: 10px;
  background: #1D212B;
}

.img-slider .slide{
  z-index: 1;
  position: absolute;
  width: 100%;
  clip-path: circle(0% at 0 50%);
}

.img-slider .slide.active{
  clip-path: circle(150% at 0 50%);
  transition: 2s;
  transition-property: clip-path;
}

.img-slider .slide img{
  z-index: 1;
  width: 100%;
  border-radius: 5px;
}

.img-slider .slide .info{
  position: absolute;
  top: 0;
  padding: 15px 30px;
}

.img-slider .slide .info h2{
  color: #fff;
  font-size: 45px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 2px;
}

.img-slider .slide .info p{
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  font-size: 16px;
  width: 60%;
  padding: 10px;
  border-radius: 4px;
}

.img-slider .navigation{
  z-index: 2;
  position: absolute;
  display: flex;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.img-slider .navigation .btn{
  background: rgba(255, 255, 255, 0.5);
  width: 12px;
  height: 12px;
  margin: 10px;
  border-radius: 50%;
  cursor: pointer;
}

.img-slider .navigation .btn.active{
  background: #2696E9;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 820px){
  .img-slider{
    width: 600px;
    height: 375px;
  }

.img-slider .slide .info{
    padding: 10px 25px;
  }

.img-slider .slide .info h2{
    font-size: 35px;
  }

.img-slider .slide .info p{
    width: 70%;
    font-size: 15px;
  }

.img-slider .navigation{
    bottom: 25px;
  }

.img-slider .navigation .btn{
    width: 10px;
    height: 10px;
    margin: 8px;
  }
}

@media (max-width: 620px){
  .img-slider{
    width: 400px;
    height: 250px;
  }

.img-slider .slide .info{
    padding: 10px 20px;
  }

.img-slider .slide .info h2{
    font-size: 30px;
  }

.img-slider .slide .info p{
    width: 80%;
    font-size: 13px;
  }

.img-slider .navigation{
    bottom: 15px;
  }

.img-slider .navigation .btn{
    width: 8px;
    height: 8px;
    margin: 6px;
  }
}

@media (max-width: 420px){
  .img-slider{
    width: 320px;
    height: 200px;
  }

.img-slider .slide .info{
    padding: 5px 10px;
  }

.img-slider .slide .info h2{
    font-size: 25px;
  }

.img-slider .slide .info p{
    width: 90%;
    font-size: 11px;
  }

.img-slider .navigation{
    bottom: 10px;
  }
}

Download File Setup

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

UnknownJanuary 23, 2021 at 11:39 PM
This is so great! Keep it up..
GabrielSaenz94March 3, 2021 at 9:53 AM
Thank you! do you have the images?
UnknownMarch 10, 2021 at 1:16 AM
How do i increase the sliding speed
Subrahmanya PoojariMarch 16, 2021 at 2:38 AM
awesome bro
UnknownMarch 26, 2021 at 10:51 PM
hello, how do i adjust the image width and height? because all of my images were 1920x1080, and it didnt fit.
johncruzm10April 2, 2021 at 9:07 PM
Great job, guys. Thanks for sharing your knowledge!
AnonymousApril 3, 2021 at 11:47 AM
Really nice! Can u explain me what is this in the js "[...active]"? Why "..." ?
VictorMay 5, 2021 at 7:38 PM
Cool!! How Could I position it to the center of my page? Im having some issues with that
AnonymousJune 7, 2021 at 8:48 AM
iam getting this error can anyone please help on this line let currentSlide = 1;
Mohammad FadelJune 9, 2021 at 8:32 AM
good idea
Mohammad FadelJune 9, 2021 at 8:33 AM
good idea
BlackieJuly 1, 2021 at 11:51 AM
Where is the javascript?
UnknownOctober 6, 2021 at 9:25 AM
Im having an issue with the active Class in the javascript. In the debug window, at the beginning it says var repeat = function(activeClass), it says its been declared but its value is never read. ts(6133), parameter activeClass:any. What does that mean.
AnonymousJanuary 17, 2022 at 10:25 AM
Which i insert arrows?
AnonymousJuly 17, 2022 at 6:52 AM
If I make more than one slider the code breaks, how can I solve it?
AnonymousDecember 17, 2022 at 6:42 PM
If i want to take images from database
ammuDecember 21, 2022 at 11:46 PM
Thankyou so much

Wednesday, January 13, 2021

Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility - HTML CSS Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility - HTML CSS Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form