如何使用CSS实现支持箭头切换的图片缩略图滑块

仅通过CSS完全可以实现缩略图前后切换效果，不需要引入JavaScript代码，核心依赖单选框的选中状态绑定与CSS位移属性控制。

• 新增隐藏的单选框控件作为切换状态的触发器
• 新增左右箭头的label元素与对应单选框绑定，点击箭头即可触发对应单选框的选中状态
• 给缩略图外层容器增加overflow: hidden隐藏超出可视区域的内容，所有缩略图采用弹性布局横向排列
• 通过CSS相邻兄弟选择器匹配单选框的选中状态，动态修改缩略图容器的水平位移值，实现滚动切换效果

HTML代码 #

<!-- 新增单选框触发器 -->
<input type="radio" name="slide" id="slide-1" checked hidden>
<input type="radio" name="slide" id="slide-2" hidden>
<input type="radio" name="slide" id="slide-3" hidden>

<div class="img-container">
  <!-- 箭头控件 -->
  <label for="slide-1" class="arrow arrow-left">&lt;</label>
  <label for="slide-3" class="arrow arrow-right">&gt;</label>
  
  <!-- 缩略图滚动容器 -->
  <div class="slider-wrapper">
    <div class="woocommerce-product-gallery__image">
      <img class="wvs-attachment-image" src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c21hbGx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="woocommerce-product-gallery__image">
      <img class="wvs-attachment-image" src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c21hbGx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="woocommerce-product-gallery__image">
      <img class="wvs-attachment-image" src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c21hbGx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="woocommerce-product-gallery__image">
      <img class="wvs-attachment-image" src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c21hbGx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="woocommerce-product-gallery__image">
      <img class="wvs-attachment-image" src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c21hbGx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
    </div>
  </div>
</div>

CSS代码 #

.img-container{
  width:700px;
  height:200px;
  background:#ccc;
  position: relative;
  overflow: hidden;
}
.slider-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}
.woocommerce-product-gallery__image{
  flex-shrink: 0;
  padding:20px 20px;
}
.wvs-attachment-image{
  width:150px;
  height:150px;
}
/* 箭头样式 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}
.arrow-left {
  left: 10px;
}
.arrow-right {
  right: 10px;
}
/* 切换逻辑 */
#slide-2:checked ~ .img-container .slider-wrapper {
  transform: translateX(-190px);
}
#slide-3:checked ~ .img-container .slider-wrapper {
  transform: translateX(-380px);
}

如果需要支持更多分页，只需要新增对应数量的单选框，新增对应选中状态下的位移规则即可。你也可以根据需求调整箭头样式、滑动动画的时长与缓动效果。

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