〔纯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动态-意味着您只需在cssvariable 中更改numbers，并且不需要复制过去的代码左右
• css变量的使用
• 回答您的问题
• 有两种按钮样式(参见注释行(
• 仅css

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