Как я могу запрограммировать слайд-шоу с html и css?

Question

Я хочу запрограммировать слайд-шоу, или как бы вы ни называли строку изображений, текущую с одной стороны на другую: D. Мой код пока работает довольно хорошо, но я не знаю, как его запрограммировать, чтобы, если «строка» заканчивалась, строка помещалась в конец, поэтому она непрерывно текла. У тебя есть какие-нибудь советы для меня? И до сих пор я работаю с ключевыми кадрами, и он переходит с одного кадра на другой. Что я должен сделать, чтобы все прошло гладко? (Извините за мой плохой Энгли sh Я немец: D)

Это код, который я написал для анимации. Здесь есть код, который я не написал, потому что он просто форматируется для разных устройств.

`slider figure img {float: left; ширина: 25%; }

@keyframes slider {
    0% {
        left: 0;
    }
    10% {
        left: -50%;
    }
    20% {
        left: -100%;
    }
    30% {
        left -150%;
    }
    40% {
        left: -200%;
    }
    50% {
        left: -250%;
    }
    60% {
        left: -300%;
    }
    70% {
        left: -350%;
    }
    80% {
        left: -400%;
    }
    90% {
        left: -450%;
    }
    100% {
        left: -500%;
        left: 0;
    }`

Спасибо за вашу помощь, ребята: D

Answer 1

Надеюсь, это поможет вам.

.slideshow {
  overflow: hidden;
  height: 300px;
  width: 500px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 2912px;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide {
  background: #FFC300;
}


.slide-number {
  color: #000;
  text-align: left;
  font-size: 4em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
}

<div class="slideshow">
  <div class="slide-wrapper">
    <div class="slide"><h1 class="slide-number">First</h1></div>
    <div class="slide"><h1 class="slide-number">Second</h1></div>
    <div class="slide"><h1 class="slide-number">Third</h1></div>
    <div class="slide"><h1 class="slide-number">Fourth</h1></div>
    <div class="slide"><h1 class="slide-number">Fifth</h1></div>
  </div>
</div>

Answer 2

Я вижу, что вы программируете каждое движение с помощью css и ключевых кадров. Я предлагаю лучшую альтернативу для этого будет https://cssanimate.com/, где вы можете анимировать с большей точностью.

Вы сказали, что ваш код работает нормально, поэтому я предполагаю, что вы используете что-то вместе с ложью style.display = "none". Если это так, то вы должны использовать задержку и установить отображение сразу после воспроизведения анимации с помощью setTimeout (); функция. Как то так:

setTimeout(function(){ alert("Hello"); }, 3000);

Дайте мне знать, если это работает!