Как сделать карусель (слайдер) без резких скачков между последним и первыс слайдом и анимировать элементы внутри ее?

Question

Делаю слайдер, нашел примеры в гугле и начал делать под себя. Но есть два вопроса, которые я не решил.

Как сделать так чтобы бегущая строка была полностью безконечной? (сейчас при окончании 40с есть очень заметный проброс)
Мне нужно чтобы первый элемент строки был немного больше остальных, а когда первый элемент уходил с поля видимости стили увеличения анимировано с него уходили и он становился обычного размера, а второй элемент, который встает на его место получил эти стили. (можно ли это сделать чистым css?)

В последующем буду интегрировать этот слайдер в проект на next js

body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(calc(-74px * 2));
  }
  30% {
    transform: translateX(calc(-74px * 2));
  }
  40% {
    transform: translateX(calc(-74px * 4));
  }
  50% {
    transform: translateX(calc(-74px * 4));
  }
  60% {
    transform: translateX(calc(-74px * 6));
  }
  70% {
    transform: translateX(calc(-74px * 6));
  }
  80% {
    transform: translateX(calc(-74px * 8));
  }
  90% {
    transform: translateX(calc(-74px * 8));
  }
  100% {
    transform: translateX(calc(-74px * 10));
  }
}

.slider {
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 710px;
}

.slider .slide-track {
  animation: scroll 4s linear infinite;
  display: flex;
  width: calc(250px * 10);
}

.slider .slide {
  margin-left: 20px;
  background: rgba(33, 150, 243, 0.04);
}

.imgMain {
  height: 70x;
  width: 100px;
  background-color: rgba(33, 150, 243, 0.1);
}

.img {
  margin-left: 20px;
  height: 60x;
  width: 90x;
}

<div class="slider">
  <div class="slide-track">
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
    </div>
    <div class="slide">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать карусель (слайдер) без резких скачков между последним и первыс слайдом и анимировать элементы внутри ее?

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