DEVHIDE
Login Or Sign up

How to make Slider move automatically?

53 Views Asked by At

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>

javascript html css slider slideshow
Original Q&A
1

There are 1 best solutions below

1
Shivanshu Rajput On BEST ANSWER 

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>

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in SLIDER

Related Questions in SLIDESHOW

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.