Originally Posted by
Acorn
Chris, I would have asked for example code for a responsive CSS3 sliding carousel of five or more images with links.
I got
Acorn
I asked: How do I create a responsive CSS3 sliding carousel with 5 images and individual links?
ChatGPT came back with:
Code:
<div class="carousel-container">
<div class="carousel-slides">
<a href="#"><img src="image1.jpg" alt="Image 1"></a>
<a href="#"><img src="image2.jpg" alt="Image 2"></a>
<a href="#"><img src="image3.jpg" alt="Image 3"></a>
<a href="#"><img src="image4.jpg" alt="Image 4"></a>
<a href="#"><img src="image5.jpg" alt="Image 5"></a>
</div>
</div>
Code:
.carousel-container {
position: relative;
overflow: hidden;
width: 100%;
height: 400px;
}
.carousel-slides {
display: flex;
width: 500%;
animation: slide 10s infinite;
}
.carousel-slides a {
flex: 1;
width: 100%;
}
.carousel-slides img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slide {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-100%);
}
45% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
70% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
95% {
transform: translateX(-300%);
}
100% {
transform: translateX(0);
}
}
Code:
const slides = document.querySelector('.carousel-slides');
const slideWidth = slides.clientWidth;
let slideIndex = 0;
function slideNext() {
slideIndex++;
if (slideIndex >= 5) {
slideIndex = 0;
}
slides.style.transform = `translateX(-${slideIndex * slideWidth}px)`;
}
setInterval(slideNext, 5000);
const links = document.querySelectorAll('.carousel-slides a');
links.forEach(link => {
link.addEventListener('click', (event) => {
event.stopPropagation();
});
});
Plus a brief explanation of what the code does.
I haven't tested any of the above, and only asked the one question.
Bookmarks