❮
  ❯

.slider-container {
  width: 500px;
  overflow: hidden;
  position: relative;
  margin: 20px auto;
}
.slider-track {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
height: auto;
}
prevBtn, #nextBtn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
prevBtn { left: 10px; }
nextBtn { right: 10px; }

const track = document.querySelector('.slider-track');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;
const totalSlides = slides.length;
// 更新滑动位置
function updateSlidePosition() {
const slideWidth = track.clientWidth;
track.style.transform = translateX(${-slideWidth * currentIndex}px);
}
// 下一张
nextBtn.addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
}
updateSlidePosition();
});
// 上一张
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
}
updateSlidePosition();
});

setInterval(() => {
  if (currentIndex