[纯CSS自动旋转木马]：需要在纯css自动旋转木马中添加点

Question

我已经尝试建立一个自动旋转木马，这是纯css的解决方案。但我面临的问题是在我的旋转木马添加“点”在css驱动的方法。

所需功能：

• swipe/slide
• auto-play (infinite)
• dots指示器
• 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 Dynamic- -意味着您只需在css numbers variable中更改cssnumbers，而不需要复制过去的代码或
• 使用css variables
• Answers you question
• With两种样式的按钮(请参阅注释行)
• 仅用于cssH 224f 225

注释：相应地更改图像数量