纯CSS实现图片滚动器：点击按钮切换图片行需求求助

需求说明 #

现有HTML和CSS代码，需不使用JavaScript实现点击左右按钮时，当前图片行消失并替换为新图片行的轮播效果。

原始代码 #

HTML

<h4 style="text-align: center; margin-top: 100px;">WE THINK YOU'D LIKE..</h4>
<div class="carousel-container">
  <img src="aspect images/arrow left.png" width="50px" style="margin-bottom: 40px; margin-right: -20px;">
  <div class="carousel-wrapper">
    <img src="aspect images/lily of the valley.png" width="250" alt="Lily of the Valley">
    <div class="item-details">
      <p>Lily of the Valley<br>$65.00</p>
      <img src="aspect images/plus_button.png" alt="Add to cart">
    </div>
  </div>
  <div class="carousel-wrapper">
    <img src="aspect images/Sundial Portulaca.png" width="250" alt="Sundial Portulaca">
    <div class="item-details">
      <p>Sundial Portulaca<br>$45.00</p>
      <img src="aspect images/plus_button.png" alt="Add to cart">
    </div>
  </div>
  <div class="carousel-wrapper">
    <img src="aspect images/Iris Snow Queen.png" width="250" alt="Iris Snow Queen">
    <div class="item-details">
      <p>Iris Snow Queen<br>$85.00</p>
      <img src="aspect images/plus_button.png" alt="Add to cart">
    </div>
  </div>
  <div class="carousel-wrapper">
    <img src="aspect images/Gold Hibiscus.png" width="250" alt="Gold Hibiscus">
    <div class="item-details">
      <p>Gold Hibiscus<br>$55.00</p>
      <img src="aspect images/plus_button.png" alt="Add to cart">
    </div>
  </div>
  <div class="carousel-wrapper">
    <img src="aspect images/Sunset Poppies.png" width="250" alt="Sunset Poppies">
    <div class="item-details">
      <p>Sunset Poppies<br>$75.00</p>
      <img src="aspect images/plus_button.png" alt="Add to cart">
    </div>
  </div>
  <img src="aspect images/arrow right.png" width="50px" style="margin-bottom: 40px; margin-left: -20px;">
</div>

CSS

.carousel-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 30px;
}

.carousel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-wrapper img {
  border-radius: 10px;
  overflow: hidden;
  width: 200px;
}

.carousel-wrapper p {
  margin-top: 10px;
  text-align: left;
  align-self: flex-start;
}

.item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  margin-top: 10px;
}

.item-details p {
  margin: 0;
  text-align: left;
  font-weight: bold;
}

.item-details img {
  width: 30px;
}

.item-details img:last-of-type {
  margin-left: 10px;
}

实现方案（无JavaScript） #

核心利用CSS :target 伪类实现点击锚点切换，结合过渡动画控制显示隐藏效果。

步骤1：重构HTML结构

• 把每组图片行包裹在带唯一ID的 <div class="carousel-slide"> 中
• 将箭头替换为 <a> 标签，通过锚点指向对应图片行的ID
• 给初始显示的图片行添加 active 类

修改后的HTML：

<h4 style="text-align: center; margin-top: 100px;">WE THINK YOU'D LIKE..</h4>
<div class="carousel-container">
  <!-- 左箭头：切换到上一组 -->
  <a href="#slide-1" class="carousel-arrow prev-arrow">
    <img src="aspect images/arrow left.png" width="50px" alt="Previous">
  </a>

  <!-- 轮播容器：包裹所有图片行 -->
  <div class="carousel-slides">
    <!-- 第一组图片行（默认显示） -->
    <div id="slide-1" class="carousel-slide active">
      <div class="carousel-wrapper">
        <img src="aspect images/lily of the valley.png" width="250" alt="Lily of the Valley">
        <div class="item-details">
          <p>Lily of the Valley<br>$65.00</p>
          <img src="aspect images/plus_button.png" alt="Add to cart">
        </div>
      </div>
      <div class="carousel-wrapper">
        <img src="aspect images/Sundial Portulaca.png" width="250" alt="Sundial Portulaca">
        <div class="item-details">
          <p>Sundial Portulaca<br>$45.00</p>
          <img src="aspect images/plus_button.png" alt="Add to cart">
        </div>
      </div>
    </div>

    <!-- 第二组图片行 -->
    <div id="slide-2" class="carousel-slide">
      <div class="carousel-wrapper">
        <img src="aspect images/Iris Snow Queen.png" width="250" alt="Iris Snow Queen">
        <div class="item-details">
          <p>Iris Snow Queen<br>$85.00</p>
          <img src="aspect images/plus_button.png" alt="Add to cart">
        </div>
      </div>
      <div class="carousel-wrapper">
        <img src="aspect images/Gold Hibiscus.png" width="250" alt="Gold Hibiscus">
        <div class="item-details">
          <p>Gold Hibiscus<br>$55.00</p>
          <img src="aspect images/plus_button.png" alt="Add to cart">
        </div>
      </div>
    </div>

    <!-- 第三组图片行 -->
    <div id="slide-3" class="carousel-slide">
      <div class="carousel-wrapper">
        <img src="aspect images/Sunset Poppies.png" width="250" alt="Sunset Poppies">
        <div class="item-details">
          <p>Sunset Poppies<br>$75.00</p>
          <img src="aspect images/plus_button.png" alt="Add to cart">
        </div>
      </div>
      <div class="carousel-wrapper">
        <img src="aspect images/lily of the valley.png" width="250" alt="Lily of the Valley">
        <div class="item-details">
          <p>Lily of the Valley<br>$65.00</p>
          <img src="aspect images/plus_button.png" alt="Add to cart">
        </div>
      </div>
    </div>
  </div>

  <!-- 右箭头：切换到下一组 -->
  <a href="#slide-2" class="carousel-arrow next-arrow">
    <img src="aspect images/arrow right.png" width="50px" alt="Next">
  </a>
</div>

步骤2：更新CSS样式

• 设置轮播容器为相对定位，隐藏溢出内容
• 控制图片行默认状态为隐藏，添加过渡动画
• 用 :target 和 .active 类控制当前图片行显示
• 调整箭头样式，移除默认链接样式

修改后的CSS：

.carousel-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 30px;
  position: relative;
}

/* 轮播容器：包裹所有图片行 */
.carousel-slides {
  display: flex;
  gap: 20px;
  overflow: hidden;
  width: calc(100% - 100px); /* 预留箭头位置 */
}

/* 图片行默认状态：隐藏 */
.carousel-slide {
  display: flex;
  gap: 20px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  position: absolute;
  left: 50px; /* 对齐箭头位置 */
}

/* 默认显示的图片行 */
.carousel-slide.active,
.carousel-slide:target {
  opacity: 1;
  visibility: visible;
  position: static;
}

.carousel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-wrapper img {
  border-radius: 10px;
  overflow: hidden;
  width: 200px;
}

.carousel-wrapper p {
  margin-top: 10px;
  text-align: left;
  align-self: flex-start;
}

.item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  margin-top: 10px;
}

.item-details p {
  margin: 0;
  text-align: left;
  font-weight: bold;
}

.item-details img {
  width: 30px;
}

.item-details img:last-of-type {
  margin-left: 10px;
}

/* 箭头样式 */
.carousel-arrow {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.prev-arrow {
  margin-right: -20px;
}

.next-arrow {
  margin-left: -20px;
}

补充说明 #

1. 若需循环切换，可修改箭头的 href 属性，比如第三组的右箭头指向 #slide-1
2. 过渡动画的时长和曲线可根据需求调整 transition 属性
3. 可添加 tabindex 属性提升箭头的键盘可访问性

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