【纯CSS自动轮播】：需要在纯css自动轮播中加点

Question

我尝试构建一个纯基于 css 的解决方案的自动轮播。但是我在以 css 驱动的方法向我的轮播添加“点”时遇到了问题。

所需功能：

• 滑动/滑动
• 自动播放（无限）
• 点指示器
• css3 动画

如果社区中的任何人可以在这个项目中帮助我，将会非常有帮助。

Answer 1

这就是答案，

:root{
  --numeberOfImages:4;
  --Seconds: 8s;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: coral;
}

.container {
  width: 500px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  overflow: hidden;
  border: 10px solid #ffffff;
  border-radius: 8px;
  box-shadow: 10px 25px 30px rgba(0, 0, 0, 0.3);
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-100%);
  }
  55% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-200%);
  }
  80% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-300%);
  }
}
@keyframes mmo {
  0% {
    transform: translateX(-1.75rem);
  }
  100% {
    transform: translateX(calc(1.75rem * (var(--numeberOfImages) - 1)));
  }
}

img {
  width: 100%;
}
.wrapper {
  width: 100%;
  display: flex;
  animation: slide var(--Seconds) infinite; 
}

ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.backbt {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}
.listbt {
  display: inline-block;
}
.caslnav {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
/*------------------*/
.curtbt {
  display: inline-block;
  /*
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem;
  */

  /*uncommment and use the above for diffrent style*/

  width: 1.5rem;
  height: 1.5rem;
  margin: 0rem;

  background-color: white;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;

  animation: mmo var(--Seconds) steps(var(--numeberOfImages), start) infinite; 
}
.emptbt {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: transparent;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  font-size: 0;
}

<div class="container">
      <div class="wrapper">
        <img src="https://picsum.photos/800/400" /><!-- photo -->
        <img src="https://picsum.photos/800/400" /><!-- photo -->
        <img src="https://picsum.photos/800/400" /><!-- photo -->
        <img src="https://picsum.photos/800/400" /><!-- photo -->
      </div>
      <aside class="caslnav">
        <ol>
          <li class="listbt"><div class="backbt">O</div></li><!-- grey background -->
          <li class="listbt"><div class="backbt">O</div></li><!-- grey background -->
          <li class="listbt"><div class="backbt">O</div></li><!-- grey background -->
          <li class="listbt"><div class="backbt">O</div></li><!-- grey background -->
        </ol>
      </aside>
      <aside class="caslnav">
        <ol>
          <li class="listbt"><div class="curtbt">o</div></li><!--white button-->
          <li class="listbt"><div class="emptbt"></div></li><!-- spacer -->
          <li class="listbt"><div class="emptbt"></div></li><!-- spacer -->
          <li class="listbt"><div class="emptbt"></div></li><!-- spacer -->
        </ol>
      </aside>
    </div>

特点

• 3/4 动态 - 意味着您只需在 css 中更改 numbers variable，并且无需复制过去的代码 差不多
• css 变量的使用
• 回答您的问题
• 有两种样式的按钮（见注释行）
• 只有 css

注意： 根据图片数量相应地更改 HTML