component slider

🎓 Компонентная вёрстка

☕ CSS-компонент "Слайдер"

Обратите внимание, что компонент получает ссылки на картинки через CSS-переменные

CSS

:root {
    --slide1: url(https://images.pexels.com/photos/1089168/pexels-photo-1089168.jpeg);
    --slide2: url(https://images.pexels.com/photos/9568/summer-sun-yellow-photography.jpg);
    --slide3: url(https://images.pexels.com/photos/1300510/pexels-photo-1300510.jpeg);
    --duration: 5s;
    --delay1: 0s;
    --delay2: 1.5s;
    --delay3: 2.5s;
}

.gallery-slide {
  width: 80vw;
  height: 80vh;
  position :absolute;
  top: 10vh;
  left: 100vw;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.gallery-slide-1 {
  background-image: var(--slide1);
  -webkit-animation: slider-first var(--duration) var(--delay1) infinite;
  animation: slider-first var(--duration) var(--delay1) infinite;
}
.gallery-slide-2 {
  background-image: var(--slide2);
  -webkit-animation: slider-second var(--duration) var(--delay2) infinite;
  animation: slider-second var(--duration) var(--delay2) infinite;
}
.gallery-slide-3 {
  background-image: var(--slide3);
  -webkit-animation: slider-third var(--duration) var(--delay3) infinite;
  animation: slider-third var(--duration) var(--delay3) infinite;
}

/* ==================== first ==================== */
@-webkit-keyframes slider-first {
  25% { left: 100vw; opacity:0; }
  25%, 50% { left: 10vw; opacity:1; }
  50%, 100% { left: -100vw; opacity:0; }
}
@keyframes slider-first {
  25% { left: 100vw; opacity:0; }
  25%, 50% { left: 10vw; opacity:1; }
  50%, 100% { left: -100vw; opacity:0; }
}
/* ==================== second ==================== */
@-webkit-keyframes slider-second {
  0%, 25% { left: 100vw; opacity:0; }
  25%, 50% { left: 10vw; opacity:1; }
  50%, 100% { left: -100vw; opacity:0; }
}
@keyframes slider-second {
  0%, 25% { left: 100vw; opacity:0; }
  25%, 50% { left: 10vw; opacity:1; }
  50%, 100% { left: -100vw; opacity:0; }
}
/* ==================== third ==================== */
@-webkit-keyframes slider-third {
  0%, 50% { left: 100vw; opacity:0; }
  50%, 75% { left: 10vw; opacity:1; }
  75%, 100% { left: -100vw; opacity:0; }
}
@keyframes slider-third {
  0%, 50% { left: 100vw; opacity:0; }
  50%, 75% { left: 10vw; opacity:1; }
  75%, 100% { left: -100vw; opacity:0; }
}

html

<div class="gallery-slide gallery-slide-1"></div>
<div class="gallery-slide gallery-slide-2"></div>
<div class="gallery-slide gallery-slide-3"></div>