如何用CSS创建轮播？解决主题滑块失效及Bootstrap样式冲突问题

首先得先提一句：你原来的HTML结构有点小问题——<ul>标签里直接放<div>不符合HTML规范，应该把每个轮播内容放到<li>标签里，我先给你调整好基础结构，之后的CSS都基于这个规范结构来写：

<div class="slider-wrap">
  <ul class="home-slider slick-initialized slick-slider">
    <li class="slide-item">轮播内容1</li>
    <li class="slide-item">轮播内容2</li>
    <li class="slide-item">轮播内容3</li>
  </ul>
  <!-- 可选：手动切换的指示器，不用JS也能点 -->
  <div class="slider-controls">
    <input type="radio" name="slide-switch" id="slide-1" checked>
    <input type="radio" name="slide-switch" id="slide-2">
    <input type="radio" name="slide-switch" id="slide-3">
    <div class="dots-group">
      <label for="slide-1"></label>
      <label for="slide-2"></label>
      <label for="slide-3"></label>
    </div>
  </div>
</div>

接下来分步骤写CSS，完全不用碰JS，新手也能看懂：

1. 基础布局样式 #

先把容器和轮播列表的基础样式搭好，核心是隐藏超出部分，让轮播项横向排列：

/* 轮播容器，控制整体宽度和溢出 */
.slider-wrap {
  width: 100%;
  max-width: 900px; /* 你可以根据页面需求改宽度 */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* 轮播列表，宽度是轮播项数量×100% */
.home-slider {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 300%; /* 3个轮播项就设300%，以此类推 */
  display: flex;
  transition: transform 0.5s ease; /* 切换时的平滑过渡 */
}

/* 单个轮播项，占满容器宽度 */
.slide-item {
  width: 100%;
  height: 350px; /* 自定义轮播高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
}

/* 给每个轮播项加不同背景方便区分，你换成自己的内容就行 */
.slide-item:nth-child(1) { background-color: #2d3748; }
.slide-item:nth-child(2) { background-color: #3182ce; }
.slide-item:nth-child(3) { background-color: #e53e3e; }

2. 自动轮播动画 #

用CSS的@keyframes实现自动滚动，不用任何JS：

/* 自动轮播动画，12秒完成一轮，可根据需求调时长 */
@keyframes auto-slide {
  0%, 28% { transform: translateX(0); } /* 第一个轮播项停留 */
  33%, 61% { transform: translateX(-100%); } /* 第二个轮播项停留 */
  66%, 94% { transform: translateX(-200%); } /* 第三个轮播项停留 */
  100% { transform: translateX(0); } /* 回到第一个 */
}

/* 给轮播列表加上自动动画 */
.home-slider {
  animation: auto-slide 12s infinite;
}

/* 鼠标悬停时暂停动画，提升体验 */
.slider-wrap:hover .home-slider {
  animation-play-state: paused;
}

3. 手动切换功能（无需JS） #

用隐藏的单选框和标签实现点击切换，完全纯CSS：

/* 隐藏单选框 */
.slider-controls input {
  display: none;
}

/* 指示器样式 */
.slider-controls {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.dots-group label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.6);
  margin: 0 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 点击指示器时，切换到对应轮播项并暂停自动动画 */
#slide-1:checked ~ .home-slider {
  animation: none;
  transform: translateX(0);
}
#slide-2:checked ~ .home-slider {
  animation: none;
  transform: translateX(-100%);
}
#slide-3:checked ~ .home-slider {
  animation: none;
  transform: translateX(-200%);
}

/* 高亮当前选中的指示器 */
#slide-1:checked ~ .dots-group label[for="slide-1"],
#slide-2:checked ~ .dots-group label[for="slide-2"],
#slide-3:checked ~ .dots-group label[for="slide-3"] {
  background-color: white;
}

适配你原有的结构 #

如果你不想大幅修改原来的HTML，只需要把里面的<div>替换成<li class="slide-item">，然后把上面CSS里的类名对应上你的现有类就行。另外之前引入Bootstrap样式错乱的问题，大概率是Bootstrap的全局样式（比如默认的margin、box-sizing）和你原主题冲突了，以后如果还要用Bootstrap，可以用更具体的CSS选择器（比如加上父元素类名）来覆盖冲突样式。

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