🎞 2. Transforming Card Collection into a Slide-In Carousel with CSS

After a lengthy discussion with @Sekayi_Liburd and @Jeff_Hager in the “CSS for Responsive Header” workshop, and facing several challenging issues, especially regarding the duration problem based on the update time from Glide, which is now approaching completion.

Now I’m stepping out briefly to explore another aspect of moving image style, which might be more appropriately called a “Carousel,” with a slide-in effect, and you are free to determine its duration. Unlike the previous topic on “How to Create an Autoplay Slideshow” which purely displays one slide/image at a time.

ScreenRecording2024-05-15at18.13.46-ezgif.com-video-to-gif-converter

In this topic, you only need to display your images in the collection component with minimal style and horizontal orientation. Then copy and paste the code below into your custom CSS box.

/* Container styling */
.cardousel {
    display: block;
    position: relative;
    width: calc(100% - 20px);
    height:100%;
    overflow: hidden;
    border-radius: 10px;
    margin-left:10px;
}
.mobile-layer #main-root:has(.cardousel) [data-testid="card-image"] {
    height: 300px;
}
/*First frame*/
#main-root [data-testid="wire-container-cardousel"] > div {
    padding: 0;
}
.cardousel .horizontal {
width: 100% !important;
gap:0 ;
overflow: visible;
padding:0;
}
.cardousel [data-testid="horizontal-collection-container"].horizontal img {
border-radius: 0;
}
.cardousel [data-testid="cc-card"] > div {
padding:0;
flex-direction: row;/*Not contain text*/
gap: 0px;
}
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) {
padding: 0;
}

/* Slide animation */
@keyframes slide-In {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }
  90% {
    transform: translateX(calc(-100% * 5)); 
  }
  100% {
    transform: translateX(calc(-100% * 5)); 
  }
}

.cardousel [data-testid="horizontal-collection-container"] > div {
  animation: slide-In 10s linear infinite; 
}

If you want a pause between each frame, you need to know the total number of frames to adjust the keyframes. Here, I’m using 6 frames/images as an example.

Class-Name is cardousel

/* Slide animation */
@keyframes slide-In {
  0% {
    transform: translateX(0%);
  }
  5% {
    transform: translateX(0%);
  }
  10% {
    transform: translateX(-100%);
  }
  20% {
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(-200%);
  }
  40% {
    transform: translateX(-200%);
  }
  50% {
    transform: translateX(-300%);
  }
  60% {
    transform: translateX(-300%);
  }
  70% {
    transform: translateX(-400%);
  }
  80% {
    transform: translateX(-400%);
  }
  90% {
    transform: translateX(-500%);
  }
  100% {
    transform: translateX(-500%);
  }
}

This is the result:

ScreenRecording2024-05-15at20.39.03-ezgif.com-video-to-gif-converter

See also:

:film_strip:  1. How to Create an Auto-Play Slideshow
:arrows_counterclockwise: 3. Transforming a Card Collection into a 3D Continuous Carousel with CSS

6 Likes

I love it!

1 Like

It seems like I’m breaking the collection component.
So it reminds me of the story of Adam, Eve, and the apple. :apple: :slightly_smiling_face:

1 Like

you are expanding, not breaking. I just requested a vertical text alignment caption. It would be a perfect match with this sliding carousel!

This should be solvable with CSS.

yes. Well this week I surely learned that all things might be solvable with CSS :joy:

2 questions: Can we slide in from the left as well and can we manipulate the speed?

Yes, just change the value of translateX from negative to positive and regarding the duration in the section:

1 Like

thanks!

1 Like

The loop from the last to the first image is a bit abrupt. Is there a way to seamlessly slide in the first image after reaching the last?

Yes, that’s the nature of it, like a tape. I intentionally created a transition from -500% to 0% in the blink of an eye. You can achieve a smoother transition possibly only with reverse or going backwards through your keyframe settings.

I’ve seen solutions online for seamless animation from the last frame back to the first, but you need a 3D-like animation. Where all frames form a circle. However, this would require complex CSS.

In this case, I think it’s unnecessary, especially if you have many frames, then this can be seen as an indicator that it has ended and the next is the rewind (loop).

1 Like

I didn’t think digital data was bound by those rules. Thought the same way the code sees the 2nd picture and slides it in after the first, it can see the first picture after the last and slide that in.

All things are affected by space. Therefore, here we use translation code for images that already exist, unless you use JavaScript for looping before they appear.

1 Like

I see. Ok.
I will need to study about data and coding so I can understand these techniques better.

1 Like

@Sekayi_Liburd, If you use text, remove this part:

ScreenRecording2024-05-16at14.09.32-ezgif.com-crop

Rotate Text


/*VERTICAL TEXT*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) {
  position: absolute;
  width: 120px;
  height: fit-content;
  transform: rotate(-90deg);
  bottom: -90px; 
  left: auto;
  right:0px;
  padding: 5px 0 ;
  transform-origin: top left; 
}

/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) {
  position: absolute;
  width: 90px;
  height: fit-content;
  transform: rotate(-90deg);
  bottom: -90px; 
  left: auto;
  right:0px;
  padding: 5px 0 ;
  transform-origin: top left; 
} 

/*ITEM DATA: Meta*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(1){
width: 380px;
font-size: 2rem;
text-align: right;
}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(1){
width: 300px;
white-space: nowrap;
font-size: 1.5rem;
}

/*ITEM DATA: Title*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > h3{
width: 380px;
font-size: 2.8rem;
}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > h3{
width: 280px;
font-size: 2.0rem;
text-align: left;
padding-left:10px;
}

/*ITEM DATA: Desription*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(3) {
  width: 380px;
  font-size: 1.5rem;
  text-align: center;
}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(3) {
  width: 280px;
  font-size: 1.2rem;
  text-align: center;
}
3 Likes

How did you get your text vertical here @Himaladin ?? I can’t believe I only just noticed that!

If you want I will give you the code.

1 Like

that would be wonderful! Thanks :grin:

I need time to adjust it to display on mobile.

1 Like

ok

@Sekayi_Liburd, please check again, because the code is too long. I put it above according to the image.

1 Like