Цикличная прокрутка изображений

Question

Карусель работает, но не совсем правильно, ведь после последней картинки должна идти первая, а по факту пустое место какое-то время и обновление...

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 3));
  }
}

.works {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  width: auto;
}

.wrapper__works {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

.img__wrap {
  display: flex;
}

<section class="works">
  <h2 class="works__title">MY AMAZING WORKS</h2>
  <div class="wrapper__works">
    <div class="img__wrap">
      <img src="./img/white.png" alt="white">
    </div>
    <div class="img__wrap">
      <img src="./img/kombi.png" alt="kombi">
    </div>
    <div class="img__wrap">
      <img src="./img/bluza.png" alt="bluza">
    </div>
    <div class="img__wrap">
      <img src="./img/black dress.png" alt="black dress">
    </div>
    <div class="img__wrap">
      <img src="./img/silver set.png" alt="silver set">
    </div>
    <div class="img__wrap">
      <img src="./img/mini.png" alt="mini">
    </div>
    <div class="img__wrap">
      <img src="./img/balaklava.png" alt="balaklava">
    </div>
    <div class="img__wrap">
      <img src="./img/coral.png" alt="coral">
    </div>
    <div class="img__wrap">
      <img src="./img/pidzhak.png" alt="pidzhak">
    </div>
    <div class="img__wrap">
      <img src="./img/top.png" alt="top">
    </div>
  </div>
</section>

Answer 1

Для реализации с помощью css, нужно

продублировать элементы в разметке, причем количество дублей должно выбираться так, чтобы они заполняли весь контейнер, внутри которого будет идти прокрутка.
на 100% анимации должен быть сдвиг на ширину основных элементов

Пример

три картинки
дублируем им и получаем 6
translateX(calc(-250px * 3)); - конечный сдвиг, при условии что ширина каждой картинки 250px
общая ширина устанавливается calc(250px * 6) - 6 картинок, каждая шириной 250px

В этом случае переключение анимации пройдет бесшовно.

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 3));
  }
}

.works {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  width: auto;
}

.wrapper__works {
  animation: scroll 3s linear infinite;
  display: flex;
  width: calc(250px * 6);
}

.img__wrap {
  display: flex;
}

<section class="works">
  <h2 class="works__title">MY AMAZING WORKS</h2>
  <div class="wrapper__works">
    <div class="img__wrap">
      <img src="https://placehold.co/250x250?text=white" alt="white">
    </div>
    <div class="img__wrap">
      <img src="https://placehold.co/250x250?text=kombi" alt="kombi">
    </div>
    <div class="img__wrap">
      <img src="https://placehold.co/250x250?text=bluza" alt="bluza">
    </div>
    <div class="img__wrap">
      <img src="https://placehold.co/250x250?text=white" alt="white">
    </div>
    <div class="img__wrap">
      <img src="https://placehold.co/250x250?text=kombi" alt="kombi">
    </div>
    <div class="img__wrap">
      <img src="https://placehold.co/250x250?text=bluza" alt="bluza">
    </div>
  </div>
</section>

БЛОГ НА HUSL

Цикличная прокрутка изображений

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