<div class="slideshow-wrap">
    <ul class="slideshow">
        <li class="content">1</li>
        <li class="content">2</li>
        <li class="content">3</li>
        <li class="content">4</li>
    </ul>
    <ul class="slideshow">
        <li class="content">1</li>
        <li class="content">2</li>
        <li class="content">3</li>
        <li class="content">4</li>
    </ul>
    <ul class="slideshow">
        <li class="content">1</li>
        <li class="content">2</li>
        <li class="content">3</li>
        <li class="content">4</li>
    </ul>
  </div>

ul {
  padding: 0;
}
li {
  list-style: none;
  padding: 0;
}
.slideshow-wrap {
  display: flex;
  overflow: hidden;
}
.slideshow {
  display: flex;
}
.content {
  width: 320px;
  height: 180px;
  background-size: cover;
}
.content:nth-child(1) {
  background-image: url(https://drive.google.com/uc?export=view&id=1bfSSCnvHAP4lpRXuN71MHgyr50I9phkW);
  background-color: #111934;
  color: #ffffff;
}
.content:nth-child(2) {
  background-image: url(https://drive.google.com/uc?export=view&id=12-5Pbz-wbUOlMaFVo5lVXOSpRHBy8vvq);
  background-color: #e0e4eb;
}
.content:nth-child(3) {
  background-image: url(https://drive.google.com/uc?export=view&id=1Wk9SbYsMYGBlSpkZrQxlVFdKJUc9_RhY);
  background-color: #111934;
  color: #ffffff;
}
.content:nth-child(4) {
  background-image: url(https://drive.google.com/uc?export=view&id=1uTWYfzCKeqnkvyd0nPvkiqMvomp-xEZm);
  background-color: #e0e4eb;
}
.slideshow {
  display: flex;
  animation: slide-show 20s infinite linear 1s both;
}
@keyframes slide-show {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}