БЛОГ НА HUSL


анимация движения горизонтального ряда картинок

Автор вопроса: rabbit

Имеется ряд картинок. Нужно, что бы данные картинки передвигались, справа налево, с остановкой на одну секунду. Пытался делать через css, но ничего не получается. Т.е. некий автоматический слайдер, с возможностью перемещать картинки вручную (не обязательно, но было бы хорошо). Лучше с использованием js. Подскажите, пожалуйста, как это можно реализовать? Или примеры кода хотя бы посмотреть. Или подскажите, что использовать для реализации. Код ниже. Из-за этого у меня верстка адаптива тормознулась. Спасибо. Надеюсь на вашу помощь.

  .header_content_two {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header_content_two_block {
    display: grid;
    grid-template-rows: 100px 1fr;
    justify-items: center;
    align-items: center;
  }

  .header_content_two_block_text {
    font-family: RobotoCondensed;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #000000;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_content_two">
                    <div class="header_content_two_block">
                        <img src="/templates/german/img/clients/black-audi.png" alt="">
                        <span class="header_content_two_block_text">
                            1
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/480px-Icecat1-300x300.svg.png" alt="">
                        <span class="header_content_two_block_text">
                            2
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/480px-Icecat1-300x300.svg.png" alt="">
                        <span class="header_content_two_block_text">
                            3
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/480px-Icecat1-300x300.svg.png" alt="">
                        <span class="header_content_two_block_text">
                            4
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/480px-Icecat1-300x300.svg.png" alt="">
                        <span class="header_content_two_block_text">
                            5
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/480px-Icecat1-300x300.svg.png" alt="">
                        <span class="header_content_two_block_text">
                            6
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/480px-Icecat1-300x300.svg.png" alt="">
                        <span class="header_content_two_block_text">
                            7
                        </span>
                    </div>
                    <div class="header_content_two_block">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/480px-Icecat1-300x300.svg.png" alt="">
                        <span class="header_content_two_block_text">
                            8
                        </span>
                    </div>
                </div>


Источник

Ответы (1 шт):

Автор решения: Andrey Fedorov

Развлекайтесь. )

body {
   display: flex;
   min-height: 100vh;
}
.carousel {
   margin: auto;
}
.carousel,
.viewport,
.item {
   width: 400px;
   height: 300px;
}
.viewport {
   overflow: hidden;
}
.item:nth-child(1) {
   animation: x1 10s infinite;
}
.item:nth-child(2) {
   animation: x2 10s infinite;
}
.item:nth-child(3) {
   animation: x3 10s infinite;
}
.item:nth-child(4) {
   animation: x4 10s infinite;
}
.item:nth-child(5) {
   animation: x5 10s infinite;
}
@keyframes x1 {
   0%,95%,100% {transform: translate(0, 0);}
   15% {transform: translate(-400px, 0);}
   20% {transform: translate(-400px, 0);}
   35% {transform: translate(-400px, 300px);}
   40% {transform: translate(-400px, 300px);}
   55{transform: translate(400px, 300px);}
   60% {transform: translate(400px, 300px);}
   75% {transform: translate(400px, 0);}
   80% {transform: translate(400px, 0);}
}
@keyframes x2 {
   0%,95%,100% {transform: translate(400px, -300px);}
   15% {transform: translate(0, -300px);}
   20% {transform: translate(0, -300px);}
   35% {transform: translate(-400px, -300px);}
   40% {transform: translate(-400px, -300px);}
   55% {transform: translate(-400px, 0);}
   60% {transform: translate(-400px, 0);}
   75% {transform: translate(400px, 0);}
   80% {transform: translate(400px, 0);}
}
@keyframes x3 {
   0%,95%,100% {transform: translate(400px, -300px);}
   15% {transform: translate(400px, -600px);}
   20% {transform: translate(400px, -600px);}
   35% {transform: translate(0px, -600px);}
   40% {transform: translate(0px, -600px);}
   55% {transform: translate(-400px, -600px);}
   60% {transform: translate(-400px, -600px);}
   75% {transform: translate(-400px, -300px);}
   80% {transform: translate(-400px, -300px);}
}
@keyframes x4 {
   0%,95%,100% {transform: translate(-400px, -600px);}
   15% {transform: translate(400px, -600px);}
   20% {transform: translate(400px, -600px);}
   35% {transform: translate(400px, -900px);}
   40% {transform: translate(400px, -900px);}
   55% {transform: translate(0, -900px);}
   60% {transform: translate(0, -900px);}
   75% {transform: translate(-400px, -900px);}
   80% {transform: translate(-400px, -900px);}
}
@keyframes x5 {
   0%,95%,100% {transform: translate(-400px, -1200px);}
   15% {transform: translate(-400px, -900px);}
   20% {transform: translate(-400px, -900px);}
   35% {transform: translate(400px, -900px);}
   40% {transform: translate(400px, -900px);}
   55% {transform: translate(400px, -1200px);}
   60% {transform: translate(400px, -1200px);}
   75% {transform: translate(0, -1200px);}
   80% {transform: translate(0, -1200px);}
}
<div class="carousel">
  <div class="viewport">
    <div class="item" style="background-color: red"></div>
    <div class="item" style="background-color: green"></div>
    <div class="item" style="background-color: blue"></div>
    <div class="item" style="background-color: yellow"></div>
    <div class="item" style="background-color: magenta"></div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.