How to loop images from right to left sliding with keyframe

Question

I have html like this:

And here is my css:

.slider {
  display: flex;
}

.slider .slider-row {
  width: 100%;
  top: calc(50% - 97.25px);
  overflow: hidden;
}
.slider .slider-row .slider-column {
  width: 160ppx;
  height: 194.5px;
  background-size: 2956px 194.5px;
  animation: slide-left 50s linear infinite;
}

@keyframes slide-left {
  0%{transform:translateX(0)}to{transform:translateX(-3200px)}
}

.card {
  list-style: none;
  position: relative;
  filter: brightness(0.9) saturate(0);
}

.card:before {
  content: "";
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card-background {
  background-size: cover;
  background-position: center;
  border-radius: 24px;
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: filter 200ms linear, transform 200ms linear;
}

.card:hover {
  filter: unset;
}

.card:hover .card-background {
  transform: scale(1.05) translateZ(0);
  cursor: pointer;
}

What I am trying to achieve slide these images from the right to left infinitely in loop. So when the first item goes to the left, the rest of it should start from the beginning of the right. Do you think I can do it only with css? Every answer will be appreciated.

user_18312494 · Answer

If I have understood right, what you are trying to achieve it is just not possible with plain css. You need to calculate x coord all the time in order to know where each slide is. My recommendation is to use some slider javascript library. My favorite is swiperjs. It allows a lot of features to display slides. But there are many options of js libraries to use.

How to loop images from right to left sliding with keyframe

1 Answers