如何在Carousel下方添加居中样式的上一页/下一页按钮？

以下是修改后的完整代码，已实现按钮居中显示在轮播图下方的需求：

<section id="slider">
  <input type="radio" name="slider" id="s1" />
  <input type="radio" name="slider" id="s2" />
  <input type="radio" name="slider" id="s3" checked />
  <input type="radio" name="slider" id="s4" />
  <input type="radio" name="slider" id="s5" />
  <label for="s1" id="slide1"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label>
  <label for="s2" id="slide2"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label>
  <label for="s3" id="slide3"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label>
  <label for="s4" id="slide4"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label>
  <label for="s5" id="slide5"><script data-video="x8fgrog" src="https://geo.dailymotion.com/player/xbf9k.js"></script></label>
</section>

<!-- 新增按钮容器 -->
<div class="slider-controls">
  <button id="prev-btn">上一页</button>
  <button id="next-btn">下一页</button>
</div>

<style>
[type=radio] {
  display: none;
}

#slider {
  height: 55vw;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 80%;
  height: 80%;
  border-radius: 4px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(-30%,0,-200px);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-15%,0,-100px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(15%,0,-100px);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
  transform: translate3d(30%,0,-200px);
}

#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }

/* 新增按钮容器样式 */
.slider-controls {
  text-align: center;
  margin-top: 20px;
}

/* 新增按钮样式 */
.slider-controls button {
  padding: 8px 16px;
  margin: 0 10px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.slider-controls button:hover {
  background-color: #555;
}
</style>

<script>
// 新增按钮交互逻辑
const slides = document.querySelectorAll('input[name="slider"]');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');

// 获取初始选中的轮播图索引
let currentIndex = Array.from(slides).findIndex(slide => slide.checked);

// 上一页按钮点击事件
prevBtn.addEventListener('click', () => {
  // 循环处理边界：第一页点击上一页跳转到最后一页
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  slides[currentIndex].checked = true;
});

// 下一页按钮点击事件
nextBtn.addEventListener('click', () => {
  // 循环处理边界：最后一页点击下一页跳转到第一页
  currentIndex = (currentIndex + 1) % slides.length;
  slides[currentIndex].checked = true;
});

// 监听轮播图radio切换，更新当前索引
slides.forEach((slide, index) => {
  slide.addEventListener('change', () => {
    currentIndex = index;
  });
});
</script>

修改说明 #

• 添加按钮容器：在轮播图<section>后新增.slider-controls容器，通过text-align: center实现按钮居中，margin-top控制与轮播图的间距。
• 按钮样式优化：给按钮设置深色背景、白色文字，hover时加深背景色，提升交互体验，同时通过内边距和外边距保证按钮布局美观。
• 交互逻辑实现：
  • 初始时获取当前选中的轮播图索引；
  • 点击上/下一页按钮时，计算目标索引（通过取模实现循环切换），并对应选中radio按钮；
  • 监听radio的change事件，同步更新当前索引，确保手动切换轮播图时按钮逻辑正常。

内容的提问来源于stack exchange，提问作者sami lafi