<div class="carousel-wrapper">
  <div class="carousel-container">
    <div class="carousel">
      <div class="image-one"></div>
      <div class="image-two"></div>
      <div class="image-three"></div>
    </div>
  </div>
</div>
$size-width: 400px;
$size-height: 250px;

.carousel-wrapper {
  width: $size-width * 1.3;
  height: $size-height * 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
  border-radius: 20px;
  margin: 100px auto 20px;
}

.carousel-container {
  width: $size-width;
  height: $size-height;
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  display: flex;
  width: $size-width * 3;
  animation: sliding 12s infinite;
  div {
    width: $size-width;
    height: $size-height;
    background-size: cover;
    background-position: center;
  }
  &:hover {
    animation-play-state: paused;
  }
  .image-one {
    background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  }
  .image-two {
    background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  }
  .image-three {
    background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
  }
}

@keyframes sliding {
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-$size-width);
  }
  65% {
    transform: translateX(-$size-width);
  }
  70% {
    transform: translateX(-$size-width * 2);
  }
  98% {
    transform: translateX(-$size-width * 2);
  }
  100% {
    transform: translateX(0);
  }
}

@media screen and (max-width: 768px) {
  $size-width: 240px;
  $size-height: 150px;
  .carousel-wrapper {
    width: $size-width * 1.3;
    height: $size-height * 1.4;
  }

  .carousel-container {
    width: $size-width;
    height: $size-height;
  }

  .carousel {
    width: $size-width * 3;
    > div {
      width: $size-width;
      height: $size-height;
    }
  }

  @keyframes sliding {
    30% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-$size-width);
    }
    65% {
      transform: translateX(-$size-width);
    }
    70% {
      transform: translateX(-$size-width * 2);
    }
    98% {
      transform: translateX(-$size-width * 2);
    }
    100% {
      transform: translateX(0);
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.