-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>
You are removing the class
current
twice? And another, thesetTimeout
asks for two arguments: the function to be executed (which is what you have already provided), and the time to wait, in milliseconds.– Gustavo Sampaio