(() => {
const arrowPrevious = document.querySelector(".chevron__previous");
const arrowNext = document.querySelector(".chevron__next");
const carousselPictures = document.querySelector(".caroussel__pictures");
const caroussel = document.querySelector(".caroussel");
const interval = document
.querySelector(".caroussel__pictures")
.getAttribute("data-interval");
const size = 1000;
const nextSlide = () => {
carousselPictures.style.transform = "translateX(" + -size + "px)";
setTimeout(() => {
carousselPictures.appendChild(carousselPictures.firstElementChild);
carousselPictures.style = "left: 0; transition: none !important;";
}, 1000);
setTimeout(() => {
carousselPictures.style = "left: 0;";
}, 1020);
};
const previousSlide = () => {
setTimeout(() => {
carousselPictures.prepend(carousselPictures.lastElementChild);
carousselPictures.style =
"left: " + -size + "px !important; transition: none !important;";
}, 1);
setTimeout(() => {
carousselPictures.style.transform = "translateX(" + -size + "px)";
carousselPictures.style = "transition: all 1s ease-out !important;";
}, 2);
};
arrowPrevious.addEventListener("click", (e) => {
previousSlide();
e.stopImmediatePropagation();
});
arrowNext.addEventListener("click", (e) => {
nextSlide();
});
let timer = setInterval((e) => {
nextSlide();
}, parseInt(interval) + 40);
caroussel.addEventListener("mouseenter", (e) => {
clearInterval(timer);
});
caroussel.addEventListener("mouseleave", (e) => {
timer = setInterval(() => {
nextSlide();
}, parseInt(interval) + 40);
});
})();
// slider();
@import url(reset.css);
html, body{
font-size: 16px;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.container{
width: 1000px;
margin: 0 auto;
}
.title__h1{
font-size: 2rem;
font-weight: 600;
letter-spacing: 0.25rem;
margin: 2rem 0;
text-align: center;
}
.caroussel, .caroussel__pictures{
width: 1000px;
height: 400px;
transition: all 1s ease-out !important;
}
.picture{
position: relative;
}
.caroussel{
overflow: hidden;
position: relative;
}
.caroussel__pictures{
display: flex;
position: relative;
left: 0;
}
.transition__toggle{
transition: none !important;
}
.arrow{
position: absolute;
width: calc(100% - 2rem);
display: flex;
justify-content: space-between;
align-items: center;
top: calc(50% - (48px / 2));
padding: 0 1rem;
}
.chevron__previous, .chevron__next{
color: #fff;
font-size: 48px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Caroussel javascript</title>
</head>
<body>
<div class="container">
<h1 class="title__h1">Caroussel javascript</h1>
<div class="caroussel">
<div class="caroussel__pictures" data-interval="2000">
<img src="https://picsum.photos/id/10/1000/400" alt="image caroussel 1" class="picture" />
<img src="https://picsum.photos/id/11//1000/400" alt="image caroussel 2" class="picture" />
<img src="https://picsum.photos/id/12//1000/400" alt="image caroussel 3" class="picture" />
<img src="https://picsum.photos/id/13//1000/400" alt="image caroussel 4" class="picture" />
</div>
<div class="arrow">
<i class="fa-solid fa-chevron-left chevron__previous"></i>
<i class="fa-solid fa-chevron-right chevron__next"></i>
</div>
</div>
</div>
<script src="script/script.js"></script>
</body>
</html>
Good morning,
I have a problem with a carousel, it works more or less well but I cannot stop the click event between each slide of the carousel, if I click several times on the arrows, the carousel does not work correctly, I I think the click event is propagating, but stopPropation() doesn’t work, I’m not sure I’m going in the right direction. Here is my code. Thank you in advance
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Caroussel javascript</title>
</head>
<body>
<div class="container">
<h1 class="title__h1">Caroussel javascript</h1>
<div class="caroussel">
<div class="caroussel__pictures" data-interval="2000">
<img src="assets/images/caroussel-5.jpg" alt="image caroussel 1" class="picture" />
<img src="assets/images/caroussel-6.jpg" alt="image caroussel 2" class="picture" />
<img src="assets/images/caroussel-3.jpg" alt="image caroussel 3" class="picture" />
<img src="assets/images/caroussel-4.webp" alt="image caroussel 4" class="picture" />
</div>
<div class="arrow">
<i class="fa-solid fa-chevron-left chevron__previous"></i>
<i class="fa-solid fa-chevron-right chevron__next"></i>
</div>
</div>
</div>
<script src="script/script.js"></script>
</body>
</html>
(() => {
const arrowPrevious = document.querySelector(".chevron__previous");
const arrowNext = document.querySelector(".chevron__next");
const carousselPictures = document.querySelector(".caroussel__pictures");
const caroussel = document.querySelector(".caroussel");
const interval = document
.querySelector(".caroussel__pictures")
.getAttribute("data-interval");
const size = 1000;
const nextSlide = () => {
carousselPictures.style.transform = "translateX(" + -size + "px)";
setTimeout(() => {
carousselPictures.appendChild(carousselPictures.firstElementChild);
carousselPictures.style = "left: 0; transition: none !important;";
}, 1000);
setTimeout(() => {
carousselPictures.style = "left: 0;";
}, 1020);
};
const previousSlide = () => {
setTimeout(() => {
carousselPictures.prepend(carousselPictures.lastElementChild);
carousselPictures.style =
"left: " + -size + "px !important; transition: none !important;";
}, 1);
setTimeout(() => {
carousselPictures.style.transform = "translateX(" + -size + "px)";
carousselPictures.style = "transition: all 1s ease-out !important;";
}, 2);
};
arrowPrevious.addEventListener("click", (e) => {
previousSlide();
e.stopImmediatePropagation();
});
arrowNext.addEventListener("click", (e) => {
nextSlide();
});
let timer = setInterval((e) => {
nextSlide();
}, parseInt(interval) + 40);
caroussel.addEventListener("mouseenter", (e) => {
clearInterval(timer);
});
caroussel.addEventListener("mouseleave", (e) => {
timer = setInterval(() => {
nextSlide();
}, parseInt(interval) + 40);
});
})();
// slider();