多个选项卡案例直接用
<div class="carousel-section">
<!-- Carousel 1 -->
<div id="carousel1" class="bannerbox">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" onclick="prevSlide('carousel1')">Previous</button>
<button class="carousel-control-next" onclick="nextSlide('carousel1')">Next</button>
<!-- Dot Indicators -->
<div class="slideshow__control-wrapper">
<button class="slider-counter__link slider-counter__link--dots link" aria-label="Load slide 1" onclick="currentSlide('carousel1', 0)"><span class="dot"></span></button>
<button class="slider-counter__link slider-counter__link--dots link" aria-label="Load slide 2" onclick="currentSlide('carousel1', 1)"><span class="dot"></span></button>
<button class="slider-counter__link slider-counter__link--dots link" aria-label="Load slide 3" onclick="currentSlide('carousel1', 2)"><span class="dot"></span></button>
</div>
</div>
<!-- Carousel 2 -->
<div id="carousel2" class="bannerbox">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image4.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="image5.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="image6.jpg" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" onclick="prevSlide('carousel2')">Previous</button>
<button class="carousel-control-next" onclick="nextSlide('carousel2')">Next</button>
<!-- Dot Indicators -->
<div class="slideshow__control-wrapper">
<button class="slider-counter__link slider-counter__link--dots link" aria-label="Load slide 1" onclick="currentSlide('carousel2', 0)"><span class="dot"></span></button>
<button class="slider-counter__link slider-counter__link--dots link" aria-label="Load slide 2" onclick="currentSlide('carousel2', 1)"><span class="dot"></span></button>
<button class="slider-counter__link slider-counter__link--dots link" aria-label="Load slide 3" onclick="currentSlide('carousel2', 2)"><span class="dot"></span></button>
</div>
</div>
<!-- Add more carousels as needed -->
</div>
<style>
.carousel {
position: relative;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 100%;
display: none;
}
.carousel-item.active {
display: block;
}
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
z-index: 1;
}
.carousel-control-prev {
left: 0;
}
.carousel-control-next {
right: 0;
}
.slideshow__control-wrapper {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
z-index: 1;
}
.slider-counter__link {
background: none;
border: none;
padding: 0;
margin: 0 5px;
cursor: pointer;
}
.dot {
display: block;
width: 12px;
height: 12px;
background-color: #bbb;
border-radius: 50%;
}
.slider-counter__link--active .dot {
background-color: #717171;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const carousels = document.querySelectorAll('.bannerbox');
carousels.forEach(carousel => {
const slides = carousel.querySelectorAll('.carousel-item');
const dots = carousel.querySelectorAll('.slider-counter__link');
let currentIndex = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.toggle('active', i === index);
});
dots.forEach((dot, i) => {
dot.classList.toggle('slider-counter__link--active', i === index);
});
}
function prevSlide() {
currentIndex = (currentIndex === 0) ? slides.length - 1 : currentIndex - 1;
showSlide(currentIndex);
}
function nextSlide() {
currentIndex = (currentIndex === slides.length - 1) ? 0 : currentIndex + 1;
showSlide(currentIndex);
}
function currentSlide(index) {
currentIndex = index;
showSlide(currentIndex);
}
// Show the first slide initially
showSlide(currentIndex);
// Assign functions to control buttons
carousel.querySelector('.carousel-control-prev').addEventListener('click', prevSlide);
carousel.querySelector('.carousel-control-next').addEventListener('click', nextSlide);
dots.forEach((dot, index) => {
dot.addEventListener('click', function() {
currentSlide(index);
});
});
});
});
</script>
