Как сверстать слайдер

Question

Чтобы при нажатий на правую/левую стрелку изображение менялось. Два изображения (блока) слева должны меняться при нажатий на стрелку слайдера. На html/css

Answer 1

Ну, принцип понятен из этого кода. Адаптируйте под себя.

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>

БЛОГ НА HUSL

Как сверстать слайдер

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