J'ai trouvé ce carrousel et je voulais l'utiliser. Le problème est que le carrousel d'origine avait de nombreuses diapositives (environ 8) alors que je n'en veux que 3. Il semble que ce serait assez simple, mais je n'arrive pas à le faire fonctionner correctement avec 3 diapositives. Au lieu de cela, il termine les trois diapositives, puis attend le temps qu'il aurait fallu aux diapositives supplémentaires que j'ai supprimées pour faire défiler avant de répéter.

J'ai essayé beaucoup de choses. Supprimer un élément de .vertical_carousel__item:nth-child() ne fait rien. En faisant cela, puis en ajustant animation: carousel-animate-vertical 27s linear infinite, le carrousel ne fait que bégayer au lieu de se déplacer en douceur, tandis que la modification de animation-delay: calc(3s * -1) provoque le chevauchement des diapositives.

J'ai essayé tellement de combinaisons de choses, mais je n'arrive pas à le faire fonctionner correctement et à boucler après mes trois diapositives sans avoir à attendre 15 secondes avant qu'elles ne bouclent à nouveau.

Toute aide serait grandement appréciée.

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

Je vous remercie.

1
horse 15 nov. 2020 à 03:15

1 réponse

Meilleure réponse

Vous pouvez

  1. Supprimez le nombre d'éléments HTML à 3.
  2. Ajustez le timing de 27s à 9s dans le animation-duration.
  3. Vous devez ajuster le nombre de pas d'images clés en fonction des éléments.
*,
*::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>
0
m4n0 15 nov. 2020 à 02:21