Responsive Image Slider With Next & Previous Buttons | Autoplay - Pause/Play - HTML CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you will learn how to design a Responsive Image Slider with Next and Previous Buttons Navigation and Autoplay with Pause/Play on mouseover and mouseout EventListeners using HTML, CSS and Vanilla Javascript. Hope this video will be helpful.

Source Codes

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 Next And Previous Buttons</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  </head>
  <body>

<div class="slider">
      <div class="slide active">
        <img src="1.jpg" alt="">
        <div class="info">
          <h2>Winter Mountains</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>Tropical Desert</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>Steaming Volcanoes</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>Mountain River</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>Egypt Pyramids</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">
        <i class="fas fa-chevron-left prev-btn"></i>
        <i class="fas fa-chevron-right next-btn"></i>
      </div>
      <div class="navigation-visibility">
        <div class="slide-icon active"></div>
        <div class="slide-icon"></div>
        <div class="slide-icon"></div>
        <div class="slide-icon"></div>
        <div class="slide-icon"></div>
      </div>
    </div>
  </body>
</html>

Javascript

//image slider next button
    nextBtn.addEventListener("click", () => {
      slides.forEach((slide) => {
        slide.classList.remove("active");
      });
      slideIcons.forEach((slideIcon) => {
        slideIcon.classList.remove("active");
      });

slideNumber++;

if(slideNumber > (numberOfSlides - 1)){
        slideNumber = 0;
      }

slides[slideNumber].classList.add("active");
      slideIcons[slideNumber].classList.add("active");
    });

//image slider previous button
    prevBtn.addEventListener("click", () => {
      slides.forEach((slide) => {
        slide.classList.remove("active");
      });
      slideIcons.forEach((slideIcon) => {
        slideIcon.classList.remove("active");
      });

slideNumber--;

if(slideNumber < 0){
        slideNumber = numberOfSlides - 1;
      }

slides[slideNumber].classList.add("active");
      slideIcons[slideNumber].classList.add("active");
    });

//image slider autoplay
    var playSlider;

var repeater = () => {
      playSlider = setInterval(function(){
        slides.forEach((slide) => {
          slide.classList.remove("active");
        });
        slideIcons.forEach((slideIcon) => {
          slideIcon.classList.remove("active");
        });

slideNumber++;

if(slideNumber > (numberOfSlides - 1)){
          slideNumber = 0;
        }

slides[slideNumber].classList.add("active");
        slideIcons[slideNumber].classList.add("active");
      }, 4000);
    }
    repeater();

//stop the image slider autoplay on mouseover
    slider.addEventListener("mouseover", () => {
      clearInterval(playSlider);
    });

//start the image slider autoplay again on mouseout
    slider.addEventListener("mouseout", () => {
      repeater();
    });
    </script>

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: #000116;
}

.slider{
  position: relative;
  background: #000116;
  width: 800px;
  min-height: 500px;
  margin: 20px;
  overflow: hidden;
  border-radius: 10px;
}

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

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

.slider .slide img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider .slide .info{
  position: absolute;
  color: #222;
  background: rgba(255, 255, 255, 0.3);
  width: 75%;
  margin-top: 50px;
  margin-left: 50px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 5%);
}

.slider .slide .info h2{
  font-size: 2em;
  font-weight: 800;
}

.slider .slide .info p{
  font-size: 1em;
  font-weight: 400;
}

.navigation{
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider:hover .navigation{
  opacity: 1;
}

.prev-btn, .next-btn{
  z-index: 999;
  font-size: 2em;
  color: #222;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  cursor: pointer;
}

.prev-btn{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.next-btn{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.navigation-visibility{
  z-index: 999;
  display: flex;
  justify-content: center;
}

.navigation-visibility .slide-icon{
  z-index: 999;
  background: rgba(255, 255, 255, 0.5);
  width: 20px;
  height: 10px;
  transform: translateY(-50px);
  margin: 0 6px;
  border-radius: 2px;
  box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
}

.navigation-visibility .slide-icon.active{
  background: #4285F4;
}

@media (max-width: 900px){
  .slider{
    width: 100%;
  }

.slider .slide .info{
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 500px){
  .slider .slide .info h2{
    font-size: 1.8em;
    line-height: 40px;
  }

.slider .slide .info p{
    font-size: 0.9em;
  }
}

Download Image Files

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.

AnonymousMay 13, 2021 at 8:35 AM
So beautiful, honestly breathtaking.
desaMay 16, 2021 at 10:02 AM
best slides
UnknownMay 18, 2021 at 12:41 AM
fablouselyy amazingg workk
SueliJuly 8, 2021 at 3:20 PM
Voce pode enviar a explicação do codigo do Javascript? eu quero entender linha por linha
The artsheetsAugust 4, 2021 at 3:28 AM
good.....
AnonymousAugust 24, 2021 at 11:44 PM
thank you
VeljkoAugust 30, 2021 at 9:25 AM
!!! important

If code doesnt work add script tag at the end of file
TomasSeptember 13, 2021 at 9:13 AM
Very nice article which helped me a lot! Thank you so much !
Python Courses
AnonymousOctober 21, 2021 at 9:36 AM
Bonito.. Gracias!!!
AnonymousJuly 9, 2022 at 4:36 AM
code is not working
AnonymousJuly 9, 2022 at 4:37 AM
why code is not working
AnonymousOctober 5, 2022 at 6:49 AM
the code doesnt work :((
AnonymousNovember 1, 2022 at 1:22 AM
hey good sir, your code is amazing and i am using it make a website. I had query that "I am unable to center my images and it is loading only 7 of those images out of 18 can you help me out?"
AnonymousDecember 3, 2022 at 8:50 PM
If I use this source code, do I need to give credit where credit is due?
AnonymousFebruary 21, 2023 at 6:34 AM
cool bro thank you so much
AnonymousMarch 14, 2023 at 4:59 AM
Thank you for slides

Wednesday, May 12, 2021

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

Description

Source Codes

HTML

Javascript

CSS

Featured Post

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

Popular Posts

Tags

Contact Form

Wednesday, May 12, 2021

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

Description

Source Codes

HTML

Javascript

CSS

Follow Us on

Featured Post

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

Popular Posts

Tags

Contact Form