嘿，完全懂你的感受！纯HTML+CSS实现这种文本滑块真的没问题，不用依赖任何第三方库，我给你整了一个完整的可运行方案，包含你要的所有功能：居中显示的文本、左右切换箭头、底部可点击的导航小球，而且代码很容易扩展。

纯HTML+CSS文本滑块实现方案 #

首先，先看完整的HTML结构，我会给你解释每个部分的作用：

<div class="text-slider">
  <!-- 隐藏的单选按钮：用来控制幻灯片的激活状态，name相同保证同一时间只能选一个 -->
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">

  <!-- 幻灯片容器：所有幻灯片横向排列在这里 -->
  <div class="slides-container">
    <div class="slide">
      <h3>第一份文本内容</h3>
      <p>这里是幻灯片1的详细描述，所有文本都会居中显示哦</p>
    </div>
    <div class="slide">
      <h3>第二份文本内容</h3>
      <p>这是幻灯片2的内容，纯文本无图片，完全符合你的需求</p>
    </div>
    <div class="slide">
      <h3>第三份文本内容</h3>
      <p>最后一张幻灯片，你可以根据需要添加更多</p>
    </div>
  </div>

  <!-- 左右切换箭头：每个幻灯片对应一组箭头，实现循环切换 -->
  <label for="slide3" class="arrow prev slide1-prev">←</label>
  <label for="slide2" class="arrow next slide1-next">→</label>

  <label for="slide1" class="arrow prev slide2-prev">←</label>
  <label for="slide3" class="arrow next slide2-next">→</label>

  <label for="slide2" class="arrow prev slide3-prev">←</label>
  <label for="slide1" class="arrow next slide3-next">→</label>

  <!-- 底部导航小球：点击直接跳转到对应幻灯片 -->
  <div class="nav-dots">
    <label for="slide1" class="dot"></label>
    <label for="slide2" class="dot"></label>
    <label for="slide3" class="dot"></label>
  </div>
</div>

接下来是CSS样式，分模块解释：

基础样式重置 #

先消除浏览器的默认边距和样式，确保滑块在不同浏览器里表现一致：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

滑块容器样式 #

设置滑块的宽度、居中对齐，并用overflow: hidden隐藏超出容器的幻灯片：

.text-slider {
  width: 80%;
  max-width: 800px;
  margin: 50px auto;
  position: relative; /* 让箭头和导航小球可以绝对定位 */
  overflow: hidden;
}

隐藏单选按钮 #

我们用单选按钮做状态控制器，但不需要显示在页面上：

.text-slider input[type="radio"] {
  display: none;
}

幻灯片布局 #

让所有幻灯片横向排列，添加过渡动画实现平滑滑动效果：

.slides-container {
  display: flex;
  width: 300%; /* 3张幻灯片，所以宽度设为300%，n张就设为n*100% */
  transition: transform 0.5s ease-in-out; /* 滑动过渡动画 */
}

.slide {
  width: 100%; /* 每张幻灯片占容器的1/3 */
  padding: 40px 20px;
  text-align: center; /* 文本居中 */
  color: #333;
}

.slide h3 {
  font-size: 2rem;
  margin-bottom: 15px;
}

.slide p {
  font-size: 1.1rem;
  line-height: 1.6;
}

幻灯片切换逻辑 #

通过:checked伪类控制幻灯片容器的偏移量，显示对应的幻灯片：

#slide1:checked ~ .slides-container {
  transform: translateX(0%); /* 显示第1张 */
}

#slide2:checked ~ .slides-container {
  transform: translateX(-33.33%); /* 显示第2张，偏移1/3宽度 */
}

#slide3:checked ~ .slides-container {
  transform: translateX(-66.66%); /* 显示第3张，偏移2/3宽度 */
}

箭头按钮样式 #

设置箭头的位置、外观，并且根据当前激活的幻灯片显示对应的箭头（实现循环切换）：

.arrow {
  display: none; /* 默认隐藏所有箭头 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  font-size: 2rem;
  padding: 10px 15px;
  background-color: rgba(0,0,0,0.2);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.arrow:hover {
  background-color: rgba(0,0,0,0.4); /* hover时加深背景 */
}

.prev {
  left: 15px;
}

.next {
  right: 15px;
}

/* 根据选中的幻灯片显示对应的箭头 */
#slide1:checked ~ .slide1-prev,
#slide1:checked ~ .slide1-next,
#slide2:checked ~ .slide2-prev,
#slide2:checked ~ .slide2-next,
#slide3:checked ~ .slide3-prev,
#slide3:checked ~ .slide3-next {
  display: block;
}

底部导航小球样式 #

设置小球的外观，并且高亮当前激活幻灯片对应的小球：

.nav-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  display: flex;
  gap: 10px; /* 小球之间的间距 */
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot:hover {
  background-color: rgba(0,0,0,0.5);
}

/* 高亮当前激活的小球 */
#slide1:checked ~ .nav-dots label[for="slide1"],
#slide2:checked ~ .nav-dots label[for="slide2"],
#slide3:checked ~ .nav-dots label[for="slide3"] {
  background-color: rgba(0,0,0,0.7);
}

扩展说明 #

如果需要添加更多幻灯片，只需要做这几步：

1. 添加一个新的单选按钮，比如id="slide4"，name保持为slider
2. 添加一个新的.slide元素到.slides-container里
3. 调整.slides-container的宽度为400%（4张幻灯片的话）
4. 添加对应的箭头组（第4张的prev指向slide3，next指向slide1）
5. 添加对应的导航小球
6. 新增一条:checked控制的transform规则，比如#slide4:checked ~ .slides-container { transform: translateX(-75%); }

这样就能轻松扩展更多幻灯片啦！

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