Slider

by Simon Hi

HTML

<div class="container">
  <div class="slider">
    <img width="240px" height="135px" class="active" src="https://upload.wikimedia.org/wikipedia/commons/7/75/Bicycle-ambulance-russian-empire.jpg">
    <img width="240px" height="135px" class="active" src="https://upload.wikimedia.org/wikipedia/commons/1/10/Bicycle%2C_1966_%2849716528817%29.jpg">
  </div>
  <div class="informations">
    <a class="maquette" href="#">
      <h1 class='title'>Vélo à vendre. Opportunité!!!</h1>
      <p class='category'>Vélos</p>
      <p class='price'>0</p>
      <p class='date'>2022-01-01</p>
    </a>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.container>div {
  width: 240px;
}

.slider {
  position: relative;
  height: 135px;
  overflow: hidden;
}

.slider img {
  display: block;
  position: absolute;
  width: 240px;
  height: 135px;
}

.slider img:nth-of-type(1) {
  animation: slidein1 8s linear infinite;
}

.slider img:nth-of-type(2) {
  animation: slidein2 8s linear infinite;
}

.informations {
  padding: 0.25em;
  background: #eee;
}

.informations a {
  text-decoration: none;
  color: #000;
}

@keyframes slidein1 {
  from {
    top: 0%;
  }

  25% {
    top: 0%;
  }

  50% {
    top: 100%;
    opacity: 1;
  }

  74.9% {
    top: 200%;
    opacity: 0;
  }

  75% {
    top: -100%;
    opacity: 0
  }

  75.1% {
    top: -100%;
    opacity: 1
  }

  to {
    top: 0%;
  }
}

@keyframes slidein2 {
  from {
    top: 100%;
  }

  24.9% {
    top: 200%;
    opacity: 0;
  }

  25% {
    top: -100%;
    opacity: 0;
  }

  25.1% {
    top: -100%;
    opacity: 1;
  }

  50% {
    top: 0%;
  }

  75% {
    top: 0%;
  }

  to {
    top: 100%;
  }
}

h1 {
  font-size: 1.125em;
  margin: 0.5em 0;
}

p {
  margin: 0.25em 0;
}