Search code examples
javascripthtmlcsssliderslideshow

How to make Slider move automatically?

Please help me make my slider move automatically. Everything works well, the only thing missing is to make the slider move automatically. The code below is a template of my work. Please help make the photos move automatically for around 3 to 5 seconds per photo. I have tried different ways to make the slider automatically move but it makes the photos lose its responsiveness and position.

const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");

menuBtn.addEventListener("click", () => {
  menuBtn.classList.toggle("active");
  navigation.classList.toggle("active");
});

const btns = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".img-slide");
const contents = document.querySelectorAll(".content");

var sliderNav = function(manual) {
  btns.forEach((btn) => {
    btn.classList.remove("active");
  });

  slides.forEach((slide) => {
    slide.classList.remove("active");
  });

  contents.forEach((content) => {
    content.classList.remove("active");
  });

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

btns.forEach((btn, i) => {
  btn.addEventListener("click", () => {
    sliderNav(i)
  });
});
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

header {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 200px;
  transition: 0.5s ease;
}

header .brand {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
}

header .brand:hover {
  color: #14723d
}

header .navigation {
  position: relative;
}

header .navigation .navigation-items a {
  position: relative;
  color: #fff;
  font-size: 1.5em;
  font-weight: 900;
  text-decoration: none;
  margin-left: 30px;
  transition: 0.3s ease;
}

header .navigation .navigation-items a:before {
  content: '';
  position: absolute;
  background: #fff;
  font-weight: 900;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  transition: 0.3s ease;
}

header .navigation .navigation-items a:hover:before {
  width: 100%;
  background: #14723d;
  font-weight: 900;
}

section {
  padding: 100px 200px;
}

.home {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #14723d
}

.home:before {
  z-index: 777;
  content: '';
  position: absolute;
  background: rgba(251, 3, 3, 0.034);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.home .content {
  z-index: 888;
  color: white;
  font-weight: bold;
  width: 70%;
  margin-top: 50px;
  display: none;
}


/*
.home .content .wrapper
{
    
    width: 300px;
    height: 200px;
    max-width: 100%;
    top: 30%;
    color:white;
    position:fixed;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.4);
      
}

*/

.home .content.active {
  display: block;
}

.home .content h1 {
  font-size: 6em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: 75px;
  margin-bottom: 40px;
  text-shadow: 7px 7px/*#14723d */
  black;
}

.home .content span {
  font-size: 20px;
  font-weight: 400;
}

.home .content span1 {
  font-size: 20px;
  font-weight: 400;
  opacity: 0;
}

.home .content p {
  margin-bottom: 65px;
}

.home .content a {
  background: #fff;
  padding: 15px 25px;
  color: #14723d;
  font-size: 1.1em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
  justify-content: center;
  text-align: center;
}

.home .content a:hover {
  background: #14723d;
  color: #fff;
}

.home .media-icons {
  z-index: 888;
  position: fixed;
  right: 30px;
  display: flex;
  flex-direction: column;
  transition: 0.5s ease;
}

.home .media-icons a {
  color: #fff;
  font-size: 1.6em;
  transition: 0.3s ease;
}

.home .media-icons a:not(:last-child) {
  margin-bottom: 20px;
}

.home .media-icons a:hover {
  transform: scale(1.3);
  color: #14723d
}

.home img {
  z-index: 000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-navigation {
  z-index: 888;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(135px);
  margin-bottom: 12px;
}

.slider-navigation .nav-btn {
  width: 25px;
  height: 25px;
  background: #fff;
  font-weight: bold;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  transition: 0.3s ease;
}

.slider-navigation .nav-btn.active {
  background: #14723d;
}

.slider-navigation .nav-btn:not(:last-child) {
  margin-right: 20px;
}

.slider-navigation .nav-btn:hover {
  transform: scale(1.2);
}

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

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

@media (max-width: 1040px) {
  header {
    padding: 12px 20px;
  }
  section {
    padding: 100px 20px;
  }
  .home .media-icons {
    right: 15px;
  }
  header .navigation {
    display: none;
  }
  header .navigation.active {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(1, 1, 1, 0.5);
  }
  header .navigation .navigation-items a {
    color: #222;
    font-size: 1.2em;
    margin: 20px;
  }
  header .navigation .navigation-items a:before {
    background: #222;
    height: 5px;
  }
  header .navigation .navigation-items {
    background: #fff;
    width: 600px;
    max-width: 600px;
    margin: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
  }
  .menu-btn {
    background: url(menu.png)no-repeat;
    background-size: 30px;
    background-position: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: 0.3s ease;
  }
  .menu-btn.active {
    z-index: 999;
    background: url(close.png)no-repeat;
    background-size: 25px;
    background-position: center;
    transition: 0.3s ease;
  }
}

@media (max-width: 560px) {
  .home .content h1 {
    font-size: 2em;
    line-height: 60px;
  }
}

@media (max-width: 560px) {
  .home .content a {
    background: white;
    padding: 7px 15px;
    color: #14723d;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px;
    justify-content: center;
    text-align: center;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<header>
  <a href="#" class="brand">SAMPLE</a>
  <div class="menu-btn">
    <div class="navigation">
      <div class="navigation-items">
        <a href="#">SAMPLE</a>
        <a href="#">SAMPLE</a>
        <a href="#">SAMPLE</a>
        <a href="#">SAMPLE</a>
        <a href="#">SAMPLE</a>
      </div>
    </div>
  </div>
</header>

<section class="home">

  <img decoding="async" class="img-slide active" src="1.jpg"></img>
  <img decoding="async" class="img-slide" src="2.jpg"></img>
  <img decoding="async" class="img-slide" src="3.jpg"></img>
  <img decoding="async" class="img-slide" src="4.jpg"></img>
  <img decoding="async" class="img-slide" src="5.jpg"></img>
  <img decoding="async" class="img-slide" src="6.jpg"></img>
  <div class="content active">
    <div class="wrapper">
      <h1>SAMPLE<br> </h1>
      <span1>SAMPLE TEXT</span1> <br><br>
      <!--   <p>text</p> -->
      <a href="#">Visit</a>
    </div>
  </div>
  <div class="content">
    <h1>SAMPLE<br> </h1> <span>SAMPLE</span> <br><br>
    <!--  <p>text</p> -->
    <a href="#">Visit</a>
  </div>
  <div class="content">
    <h1>try<br> </h1> <span>SAMPLE</span> <br><br>
    <!--  <p>try</p> -->
    <a href="#">Visit</a>
  </div>
  <div class="content">
    <h1>help<br> </h1>
    <span1>SAMPLE TEXT</span1> <br><br>
    <!--  <p>help</p> -->
    <a href="#">Visit</a>
  </div>
  <div class="content">
    <h1>SAMPLE<br> </h1>
    <span1>SAMPLE TEXT</span1> <br><br>
    <!--  <p>sample</p> -->
    <a href="#">Visit</a>
  </div>
  <div class="content">
    <h1>SAMPLE<br> </h1>
    <span1>SAMPLE TEXT</span1> <br><br>
    <!--  <p>sample</p> -->
    <a href="#">Visit </a>
  </div>
  <div class="media-icons">
    <a href="#"><i class="fab fa-facebook-f"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
  </div>
  <div class="slider-navigation">
    <div class="nav-btn active"></div>
    <div class="nav-btn"></div>
    <div class="nav-btn"></div>
    <div class="nav-btn"></div>
    <div class="nav-btn"></div>
    <div class="nav-btn"></div>
  </div>
</section>
<script src="main.js" defer data-deferred="1"></script>

Solution 

  • const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
const btns = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".img-slide");
const contents = document.querySelectorAll(".content");
let currentIndex = 0;
let intervalId;

menuBtn.addEventListener("click", () => {
    menuBtn.classList.toggle("active");
    navigation.classList.toggle("active");
});

const sliderNav = function(manual) {
    btns.forEach((btn) => {
        btn.classList.remove("active");
    });

    slides.forEach((slide) => {
        slide.classList.remove("active");
    });

    contents.forEach((content) => {
        content.classList.remove("active");
    });

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

btns.forEach((btn, i) => {
    btn.addEventListener("click", () => {
        sliderNav(i);
        currentIndex = i;
        clearInterval(intervalId); // Stop auto-slide when user manually clicks on a navigation button
        startAutoSlide(); // Restart auto-slide after manual interaction
    });
});

// Function to auto slide
const autoSlide = () => {
    currentIndex = (currentIndex + 1) % slides.length;
    sliderNav(currentIndex);
}

// Start auto slide
const startAutoSlide = () => {
    intervalId = setInterval(autoSlide, 1000);
    // Change slide every 3 seconds
}

startAutoSlide(); // Start auto-slide when the page loads
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

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



header{
    z-index: 999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 200px;
    transition: 0.5s ease;
}

header .brand{
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0;
    
}

header .brand:hover{
    color: #14723d
}

header .navigation{
    position: relative;
}

header .navigation .navigation-items a{
    position: relative;
    color: #fff;
    font-size: 1.5em;
    font-weight: 900;
    text-decoration: none;
    margin-left: 30px;
    transition: 0.3s ease;
   
}

header .navigation .navigation-items a:before{
    content: '';
    position: absolute;
    background: #fff;
    font-weight: 900;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
}

header .navigation .navigation-items a:hover:before{
    width: 100%;
    background: #14723d;
    font-weight: 900;
}

section{
    padding: 100px 200px;
}

.home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #14723d
}

.home:before{
    z-index: 777;
    content: '';
    position: absolute;
    background: rgba(251, 3, 3, 0.034);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.home .content{
    z-index: 888;
    color: white;
    font-weight: bold;
    width: 70%;
    margin-top: 50px;
    display: none;
}


/*
.home .content .wrapper
{
    
    width: 300px;
    height: 200px;
    max-width: 100%;
    top: 30%;
    color:white;
    position:fixed;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.4);
      
}

*/
.home .content.active{
    display: block;
}

.home .content h1{
    font-size: 6em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 75px;
    margin-bottom: 40px;
    text-shadow: 7px 7px /*#14723d */ black;
}


.home .content span{
    font-size: 20px;
    font-weight: 400;
    
}
.home .content span1{
    font-size: 20px;
    font-weight: 400;
    opacity: 0;
    
}

.home .content p{
    margin-bottom: 65px;
}

.home .content a{
    background: #fff;
    padding: 15px 25px;
    color: #14723d;
    font-size: 1.1em;
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px;
    justify-content: center;
    text-align: center;

    
  
}

.home .content a:hover{
    background: #14723d;
    color: #fff;
}

.home .media-icons{
    z-index: 888;
    position: fixed;
    right: 30px;
    display: flex;
    flex-direction: column;
    transition: 0.5s ease;
}

.home .media-icons a{
    color: #fff;
    font-size: 1.6em;
    transition: 0.3s ease;
}

.home .media-icons a:not(:last-child){
    margin-bottom: 20px;
}

.home .media-icons a:hover{
    transform: scale(1.3);
    color: #14723d
}

.home img{
    z-index: 000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-navigation{
    z-index: 888;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(135px);
    margin-bottom: 12px;
}

.slider-navigation .nav-btn{
    width: 25px;
    height: 25px;
    background: #fff;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    transition: 0.3s ease;
}

.slider-navigation .nav-btn.active{
    background: #14723d;
}

.slider-navigation .nav-btn:not(:last-child){
    margin-right: 20px;
}

.slider-navigation .nav-btn:hover{
    transform: scale(1.2);
}

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

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

@media (max-width: 1040px){
    header{
        padding: 12px 20px;
    }
    section{
        padding: 100px 20px;
    }
    .home .media-icons{
        right: 15px;
    }
    header .navigation{
        display: none;
    }
    header .navigation.active{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(1, 1, 1, 0.5);
    }

    header .navigation .navigation-items a{
        color: #222;
        font-size: 1.2em;
        margin: 20px;
    }
    header .navigation .navigation-items a:before{
        background: #222;
        height: 5px;
    }
    header .navigation .navigation-items{
        background: #fff;
        width: 600px;
        max-width: 600px;
        margin: 20px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 5px;
        box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
    }
    .menu-btn{
        background: url(menu.png)no-repeat;
        background-size: 30px;
        background-position: center;
        width: 40px;
        height: 40px;
        cursor: pointer;
        transition: 0.3s ease;
    }
    .menu-btn.active{
        z-index: 999;
        background: url(close.png)no-repeat;
        background-size: 25px;
        background-position: center;
        transition: 0.3s ease;
    }
}

@media (max-width: 560px){
    .home .content h1{
        font-size: 2em;
        line-height: 60px;
    }
}

@media (max-width: 560px){
    .home .content a{
        background: white;
        padding: 7px 15px;
        color: #14723d;
        font-size: 1.1em;
        font-weight: 500;
        text-decoration: none;
        border-radius: 2px;
        justify-content: center;
        text-align: center;
    }
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LANDING PAGE</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <a href="#" class="brand">SAMPLE</a>
        <div class="menu-btn">
            <div class="navigation">
                <div class="navigation-items">
                    <a href="#">SAMPLE</a>
                    <a href="#">SAMPLE</a>
                    <a href="#">SAMPLE</a> 
                    <a href="#">SAMPLE</a>
                    <a href="#">SAMPLE</a>
                </div>
            </div>
        </div>
    </header>

    <section class="home">

        <img decoding="async" class="img-slide active" src="1.jpg" ></img>
        <img decoding="async" class="img-slide" src="2.jpg" ></img>
        <img decoding="async" class="img-slide" src="3.jpg" ></img>
        <img decoding="async" class="img-slide" src="4.jpg" ></img>
        <img decoding="async" class="img-slide" src="5.jpg" ></img>
        <img decoding="async" class="img-slide" src="6.jpg" ></img>
        <div class="content active">
          <div class="wrapper">
            <h1>SAMPLE<br> </h1> <span1>SAMPLE TEXT</span1> <br><br>
        <!--   <p>text</p> --> 
          <a href="#">Visit</a>
          </div>
        </div>
        <div class="content">
          <h1>SAMPLE<br> </h1> <span>SAMPLE</span> <br><br>
        <!--  <p>text</p> --> 
          <a href="#">Visit</a>
        </div>
        <div class="content">
          <h1>try<br> </h1> <span>SAMPLE</span> <br><br>
        <!--  <p>try</p> --> 
          <a href="#">Visit</a>
        </div>
        <div class="content">
          <h1>help<br> </h1> <span1>SAMPLE TEXT</span1> <br><br>
        <!--  <p>help</p> --> 
          <a href="#">Visit</a>
        </div>
        <div class="content">
          <h1>SAMPLE<br> </h1>  <span1>SAMPLE TEXT</span1> <br><br>
        <!--  <p>sample</p> -->
          <a href="#">Visit</a>
        </div>
        <div class="content">
          <h1>SAMPLE<br>  </h1>  <span1>SAMPLE TEXT</span1> <br><br>
        <!--  <p>sample</p> -->
          <a href="#">Visit </a>
        </div>
        <div class="media-icons">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
        <div class="slider-navigation">
            <div class="nav-btn active"></div>
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>
            <div class="nav-btn"></div>

        </div>
    </section> 
    <script src="main.js" defer></script>
</body>
</html>