Change Number of Items in this Carousel

I found this carousel and wanted to use it. The problem is that the original carousel had many slides (about 8) while I only want 3. It seems like it would be pretty straight-forward, but I just cannot get it to work properly with 3 slides. Instead it finishes the three slides then waits the amount of time it would have taken the extra slides which I removed to scroll through before repeating.

I have tried many things. Removing an element from .vertical_carousel__item:nth-child() does nothing. Doing this then adjusting animation: carousel-animate-vertical 27s linear infinite just causes the carousel to stutter rather than moving smoothly, also changing animation-delay: calc(3s * -1) causes the slides to overlap.

I've tried so many combinations of things but just can't get it to run smoothly and loop after my three slides without having to wait like 15 seconds before they loop again.

Any help would be muchly appreciated.

<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>


.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);
}

Thank you.

Solution

You can

Delete the number of HTML elements to 3.
Adjust the timing from 27s to 9s in the animation-duration.
You need to adjust the number of key frame steps according to the elements.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  height: 100vh;
}

.wrapper {
  background: linear-gradient(60deg, #420285, #08BDBD);
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.carousel {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

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

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

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

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

.carousel__item-head {
  border-radius: 50%;
  background-color: #d7f7fc;
  width: 90px;
  height: 90px;
  padding: 14px;
  position: relative;
  margin-right: -45px;
  flex-shrink: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  font-size: 50px;
}

.carousel__item-body {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px 20px 16px 70px;
}

.title {
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 10px;
}

@keyframes carousel-animate-vertical {
  0% {
    transform: translateY(100%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  }
  9%,
  33.3333333333% {
    transform: translateY(100%) scale(0.7);
    opacity: .4;
    visibility: visible;
  }
  42.3333333333%,
  66.6666666667% {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
  }
  75.6666666667% {
    transform: translateY(-100%) scale(0.7);
    opacity: .4;
    visibility: visible;
  }
  100% {
    transform: translateY(-100%) scale(0.7);
    opacity: .075;
    visibility: hidden;
  }
}

<div class='wrapper'>
  <div class='carousel'>
    <div class='carousel__item'>
      <div class='carousel__item-head'>
        🐳
      </div>
      <div class='carousel__item-body'>
        <p class='title'>spouting whale</p>
        <p>Unicode: U+1F433</p>
      </div>
    </div>
    <div class='carousel__item'>
      <div class='carousel__item-head'>
        🐋
      </div>
      <div class='carousel__item-body'>
        <p class='title'>whale</p>
        <p>Unicode: U+1F40B</p>
      </div>
    </div>
    <div class='carousel__item'>
      <div class='carousel__item-head'>
        🐬
      </div>
      <div class='carousel__item-body'>
        <p class='title'>dolphin</p>
        <p>Unicode: U+1F42C</p>
      </div>
    </div>
  </div>
</div>