Css 更改此传送带中的项目数

我找到了这个旋转木马，想用它。问题是原来的旋转木马有很多幻灯片（大约8张），而我只想要3张。这看起来很简单，但我就是不能让它在3张幻灯片上正常工作。相反，它会完成三张幻灯片，然后等待我删除的额外幻灯片在重复之前滚动所需的时间

我试过很多东西。从

.vertical\u carousel\u项目中删除元素：nth-child（）

不会执行任何操作。执行此操作，然后调整

动画：旋转木马动画垂直27s线性无限

只会导致旋转木马结巴而不是平滑移动，同时更改

动画延迟：计算（3s*-1）

会导致幻灯片重叠

我尝试了很多东西的组合，但就是不能让它在我的三张幻灯片之后平稳地运行并循环，而不需要等待15秒才能再次循环

任何帮助都将不胜感激

<div class="vertical_carousel_div">
      <div class="vertical_carousel">

      <div class="vertical_carousel__item">
      <div class="vertical_carousel__item-head">
      </div>
      <div class="vertical_carousel__item-body">
      <p class="vertical_carousel_title">1</p>
      </div>
      </div>

      <div class="vertical_carousel__item">
      <div class="vertical_carousel__item-head">
      </div>
      <div class="vertical_carousel__item-body">
      <p class="vertical_carousel_title">2</p>
      </div>
      </div>

      <div class="vertical_carousel__item">
      <div class="vertical_carousel__item-head">
      </div>
      <div class="vertical_carousel__item-body">
      <p class="vertical_carousel_title">3</p>
      </div>
      </div>

      </div>
</div>

谢谢。

你可以

将HTML元素的数量删除为3

在

动画持续时间中，将计时从27秒调整到9秒

您需要根据元素调整关键帧步数

*，
*：：之前，
*：：之后{
框大小：边框框；
}
身体{
字体系列：“无衬线工作”，无衬线；
字体大小：400；
高度：100vh；
}
.包装纸{
背景：线性梯度（60度，#420285，#08BDBD）；
身高：100%；
宽度：100%；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
}
旋转木马{
位置：相对位置；
宽度：100%；
最大宽度：500px；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
}
.旋转木马项目{
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
位置：绝对位置；
宽度：100%；
填充：0 12px；
不透明度：0；
-webkit过滤器：投影（0 2px 2px#555）；
过滤器：投影（0 2px 2px#555）；
将改变：变换，不透明度；
-webkit动画：旋转木马动画垂直9s线性无限；
动画：旋转木马动画垂直9s线性无限；
}
.旋转木马项目：第n个子项（1）{
-webkit动画延迟：计算（3s*-1）；
动画延迟：计算（3s*-1）；
}
.旋转木马项目：第n个子项（2）{
-webkit动画延迟：计算（3s*0）；
动画延迟：计算（3s*0）；
}
.carousel_uu项目：最后一个孩子{
-webkit动画延迟：计算（-3s*2）；
动画延迟：计算（-3s*2）；
}
.旋转木马项目头{
边界半径：50%；
背景色：#d7f7fc；
宽度：90px；
高度：90px；
填充：14px；
位置：相对位置；
右边距：-45px；
弹性收缩：0；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
字体大小：50px；
}
.carousel_uu项目主体{
宽度：100%；
背景色：#fff；
边界半径：8px；
填充：16px 20px 16px 70px；
}
.头衔{
文本转换：大写；
字体大小：20px；
边缘顶部：10px；
}
@关键帧旋转设置垂直动画{
0% {
变换：translateY（100%）标度（0.5）；
不透明度：0；
可见性：隐藏；
}
9%,
33.3333333333% {
转换：translateY（100%）量表（0.7）；
不透明度：.4；
能见度：可见；
}
42.3333333333%,
66.6666666667% {
变换：translateY（0）比例（1）；
不透明度：1；
能见度：可见；
}
75.6666666667% {
转换：translateY（-100%）标度（0.7）；
不透明度：.4；
能见度：可见；
}
100% {
转换：translateY（-100%）标度（0.7）；
不透明度：.075；
可见性：隐藏；
}
}

你可以

将HTML元素的数量删除为3
在
动画持续时间中，将计时从27秒调整到9秒

您需要根据元素调整关键帧步数

*，
*：：之前，
*：：之后{
框大小：边框框；
}
身体{
字体系列：“无衬线工作”，无衬线；
字体大小：400；
高度：100vh；
}
.包装纸{
背景：线性梯度（60度，#420285，#08BDBD）；
身高：100%；
宽度：100%；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
}
旋转木马{
位置：相对位置；
宽度：100%；
最大宽度：500px；
显示：-网络工具包盒；
显示器：flex；
-webkit盒包：中心；
证明内容：中心；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
}
.旋转木马项目{
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
位置：绝对位置；
宽度：100%；
填充：0 12px；
不透明度：0；
-webkit过滤器：投影（0 2px 2px#555）；
过滤器：投影（0 2px 2px#555）；
将改变：变换，不透明度；
-webkit动画：旋转木马动画垂直9s线性无限；
动画：旋转木马动画垂直9s线性无限；
}
.旋转木马项目：第n个子项（1）{
-webkit动画延迟：计算（3s*-1）；
动画延迟：计算（3s*-1）；
}
.旋转木马项目：第n个子项（2）{
-webkit动画延迟：计算（3s*0）；
动画延迟：计算（3s*0）；
}
.carousel_uu项目：最后一个孩子{
-webkit动画延迟：计算（-3s*2）；
动画延迟：计算（-3s*2）；
}
.旋转木马项目头{
边界半径：50%；
背景色：#d7f7fc；
宽度：90px；
高度：90px；
填充：14px；
位置：相对位置；
右边距：-45px；
弹性收缩：0；
显示：-网络工具包盒；
显示器：flex；
-webkit框对齐：居中；
对齐项目：居中；
-webkit盒包：中心；
证明内容：中心；
字体大小：50px；
}
.carousel_uu项目主体{
宽度：100%；
背景色：#fff；
边界半径：8px；
填充：16px 20px 16px 70px；
}
.头衔{
文本转换：大写；
字体大小：20px；
边缘顶部：10px；
}
@关键帧旋转设置垂直动画{

.vertical_carousel__item {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  padding: 0 12px;
  opacity: 0;
  filter: drop-shadow(0 2px 2px #555);
  will-change: transform, opacity;
  animation: carousel-animate-vertical 27s linear infinite;
}

.vertical_carousel__item:nth-child(1) {
  animation-delay: calc(3s * -1);
}

.vertical_carousel__item:nth-child(2) {
  animation-delay: calc(3s * 0);
}

.vertical_carousel__item:nth-child(3) {
  animation-delay: calc(3s * 1);
}

.vertical_carousel__item:nth-child(4) {
  animation-delay: calc(3s * 2);
}

.vertical_carousel__item:nth-child(5) {
  animation-delay: calc(3s * 3);
}

.vertical_carousel__item:nth-child(6) {
  animation-delay: calc(3s * 4);
}

.vertical_carousel__item:nth-child(7) {
  animation-delay: calc(3s * 5);
}

.vertical_carousel__item:nth-child(8) {
  animation-delay: calc(3s * 6);
}

.vertical_carousel__item:last-child {
  animation-delay: calc(-3s * 2);
}