1
const slides = document.querySelectorAll('[data-js="carousel__item"]')
const nextButton = document.querySelector('[data-js="carousel__button--next"]')
const prevButton = document.querySelector('[data-js="carousel__button--prev"]')
const lastSlideIndex = slides.length - 1
let timer = 2000
let currentSlideIndex = 0
// Manipula as classes tirando e adicionando a classe pra ficar visivel nas imagens
const manipulateSlideClasses = correctSlideIndex => {
slides.forEach(slide => slide.classList.remove('carousel__item--visible'))
slides[correctSlideIndex].classList.add('carousel__item--visible')
}
// Evento de apertar Botão de avançar slide
nextButton.addEventListener('click', () => {
const correctSlideIndex = currentSlideIndex === lastSlideIndex ?
currentSlideIndex = 0 :
++currentSlideIndex
manipulateSlideClasses(correctSlideIndex)
})
// Evento de apertar botão de retroceder slide
prevButton.addEventListener('click', () => {
const correctSlideIndex = currentSlideIndex === 0 ?
currentSlideIndex = lastSlideIndex :
--currentSlideIndex
manipulateSlideClasses(correctSlideIndex)
})
const intervalLogic = function() {
nextImage()
}
// função nextImage passa os slides automaticamente
function nextImage() {
const correctSlideIndex = currentSlideIndex === lastSlideIndex ?
currentSlideIndex = 0 :
++currentSlideIndex
manipulateSlideClasses(correctSlideIndex)
}
// abaixo a variavel que iniciei aqui fora myTimer pra ver se resolvia a questão do clearInterval
let myTimer
//função start inicia quando a pagina carrega, nessa função start que tudo começa
function start() {
myTimer = setInterval(intervalLogic, timer)
}
window.addEventListener('load', start).carousel {
overflow: hidden;
max-width: 600px;
position: relative;
}
.carousel .carousel__item,
.carousel .carousel__item--hidden {
display: none;
}
.carousel .carousel__item img {
width: 100%;
max-width: 600px;
height: auto;
}
.carousel .carousel__item--visible {
display: block;
animation: fadeVisibility 0.5s;
}
.carousel .carousel__actions {
display: flex;
width: 100%;
justify-content: space-between;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel .carousel__actions button {
border-radius: 50px;
border: 0;
font-weight: bold;
cursor: pointer;
width: 40px;
height: 40px;
color: #FFF;
background-color: #242424;
}
.carousel .carousel__actions button[data-js="carousel__button--prev"] {
margin-left: 20px;
}
.carousel .carousel__actions button[data-js="carousel__button--next"] {
margin-right: 20px;
}
@keyframes fadeVisibility {
0% {
opacity: 0;
}
100% {
opacity: 1;
transform: opacity linear;
}
}<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css" />
<title>Exercício 36</title>
</head>
<body>
<div class="carousel">
<div data-js="carousel__item" class="carousel__item carousel__item--visible">
<img src="./img/1.jpg" />
</div>
<div data-js="carousel__item" class="carousel__item">
<img src="./img/2.jpg" />
</div>
<div data-js="carousel__item" class="carousel__item">
<img src="./img/3.jpg" />
</div>
<div class="carousel__actions">
<button data-js="carousel__button--prev" aria-label="Slide anterior">
<
</button>
<button data-js="carousel__button--next" aria-label="Próximo slide">
>
</button>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>Hello guys I’m having a doubt and difficulty here, I implemented an image carousel code with pure JS with two buttons to move forward and back slide(carousel image), when I press the buttons it works normally, but ai..., I implemented a feature that makes the slides advance automatically in a period of time with the setInterval() but what I want to do now to complete this project is that the automatic slide continues passing, but when I press the back button or advance slide, the timer setInterval be reset..., I’m not able to implement that I’m having problems if you can help me with the solution would appreciate a lot, below will be the code in JS
NOTE: I would like to use only JS to solve this problem
OBS2: I couldn’t call clearInterval from inside the setInterval because they weren’t in global scope, but when I set up a global variable it still didn’t work
below the code of my last implementation which is with automatic advance but with exception of reset that I could not and I was in doubt
below the codes in JS, HTML, CSS