Как корректно отображать первое фото в слайдере?

Question

[Рундук]

Как сделать так, чтобы при открытии страницы сразу отображалась первая картинка и только потом запускалась анимация слайдера?

Answer 1

[Николай]

img:nth-child(1) {
            animation-delay: 0s;
          }

          img:nth-child(2) {
            animation-delay: 3s;
          }

          img:nth-child(3) {
            animation-delay: 6s;
          }

Comments

[Рундук]

так же как и было

[Николай]

У вас первая картинка - это котенок, при загрузке, появляется он и потом начинается анимация

Как сделать так, чтобы при открытии страницы сразу отображалась первая картинка и только потом запускалась анимация слайдера?

Вот ваш запрос

.container_slider_css {
            margin: 50px auto;
            width: 1427px;
            height: 1427px;
            overflow: hidden;
            position: relative;
          }

          .photo_slider_css {
            position: absolute;
            animation: round 9s infinite;
            opacity: 0;
            width: 100%;
          }

          @keyframes round {
            35% {
              opacity: 1;
            }
            50% {
              opacity: 0;
            }
          }
          img:nth-child(1) {
            animation-delay: 0s;
          }

          img:nth-child(2) {
            animation-delay: 3s;
          }

          img:nth-child(3) {
            animation-delay: 6s;
          }