<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Carousel</title>
<style>
.carousel-container {
width: 600px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.carousel-slides {
display: flex;
transition: transform 0.5s ease-in-out;
width: 300%; /* 3 times the width of the container for 3 images */
}
.carousel-slide {
width: calc(100% / 3); /* Each slide takes 1/3 of the container width */
flex-shrink: 0; /* Prevent slides from shrinking */
}
.carousel-slide img {
width: 100%;
height: 100%;
display: block; /* Prevent small gap below image */
}
.carousel-navigation {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.carousel-navigation button {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-slides">
<div class="carousel-slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="carousel-slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="carousel-slide">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<div class="carousel-navigation">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
</div>
<script>
const slides = document.querySelector('.carousel-slides');
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
let slideIndex = 0;
nextButton.addEventListener('click', () => {
slideIndex++;
if (slideIndex > 2) { slideIndex = 0; }
slides.style.transform = `translateX(-${slideIndex * 100 / 3}%)`;
});
prevButton.addEventListener('click', () => {
slideIndex--;
if (slideIndex < 0) { slideIndex = 2; }
slides.style.transform = `translateX(-${slideIndex * 100 / 3}%)`;
});
</script>
</body>
</html>
Explanation and Key improvements:
- HTML Structure: Sets up the container, slides, and navigation buttons. Uses semantic HTML where possible.
- CSS Styling: Styles the carousel for basic appearance and layout.
overflow: hiddenon the container is crucial.calc(100% / 3)dynamically sizes slides based on the number of images.flex-shrink: 0prevents layout issues. - JavaScript Functionality:
- Uses
slideIndexto track the current slide. translateXin the JavaScript moves the slides container. The calculation-${slideIndex * 100 / 3}%is key for correct positioning.- Wraps around when reaching the first or last slide.
- Uses
- Image Placeholders: Uses
image1.jpg,image2.jpg, andimage3.jpgas placeholders. Replace these with your actual image URLs. - Responsive Design (Consideration): This example has a fixed width. For responsive design, you'll want to use relative units like percentages or viewport units for the container width.
This improved example provides a functional and more robust CSS carousel. You
标签：container,轮播,实现,slides,width,slide,slideIndex,carousel,CSS From： https://www.cnblogs.com/ai888/p/18580955