Slider- I can’t apply Javascript to a slider

Asked

Viewed 46 times

-3

Good afternoon. I’m developing a website for a university project. I’m still new to web development, but I’m very interested in it. I’m using templates to guide me in the development of the project itself. However, I don’t understand why java functions aren’t applying to slider buttons or slider transitions.

I thank you for all kinds of help and I hope you are all in good health :)

const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = false; // Auto scroll
const intervalTime = 5000;
let slideInterval;

const nextSlide = () => {
  // Get current class
  const current = document.querySelector(".current");
  // Remove current class
  current.classList.remove("current");
  // Check for next slide
  if (current.nextElementSibling) {
    // Add current to next sibling
    current.nextElementSibling.classList.add("current");
  } else {
    // Add current to start
    slides[0].classList.add("current");
  }
  setTimeout(() => current.classList.remove("current"));
};

const prevSlide = () => {
  // Get current class
  const current = document.querySelector(".current");
  // Remove current class
  current.classList.remove("current");
  // Check for prev slide
  if (current.previousElementSibling) {
    // Add current to prev sibling
    current.previousElementSibling.classList.add("current");
  } else {
    // Add current to last
    slides[slides.length - 1].classList.add("current");
  }
  setTimeout(() => current.classList.remove("current"));
};

// Button events
next.addEventListener("click", (e) => {
  nextSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

prev.addEventListener("click", (e) => {
  prevSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

// Auto slide
if (auto) {
  // Run next slide at interval time
  slideInterval = setInterval(nextSlide, intervalTime);
}
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <link rel="stylesheet" href="css/css_home.css">



  <title>Official 7R</title>

</head>





<body>

  <!-- NAVBAR -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white shadow fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><img src="img/7R.png" width="80px" height="80px"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">


        <ul class="navbar-nav ml-auto">


          <li class="nav-item active">
            <a class="nav-link" href="#">HOME
                <span class="sr-only">(current)</span>
              </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">A STORY</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">WHO MADE YOUR CLOTHES</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">ARTICLES</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">SUPPORT US</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">OUR TEAM</a>
          </li>

        </ul>
      </div>
    </div>
  </nav>

  <!-- Slider -->

  <div class="slider">
    <div class="slide current">
      <div class="content">
        <h1>Slide One</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Two</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Three</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Four</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Five</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Six</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
  </div>
  <div class="buttons">
    <button id="prev"><i class="fas fa-arrow-left" onclick=""></i></button>
    <button id="next"><i class="fas fa-arrow-right"></i></button>
  </div>
  <script src="Java%2520Script/main.js"></script>

</body>

</html>

javascript html slider

  • You are removing the class current twice? And another, the setTimeout asks for two arguments: the function to be executed (which is what you have already provided), and the time to wait, in milliseconds.

1 answer

0

I think you are missing importing your Javascript file into your HTML no? Apparently you only added style sheets.

Browser other questions tagged javascript html slider

You are not signed in. Login or sign up in order to post.