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

**URL:** <https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial, custom-code\
**Created:** [May 15, 2024, 1:07pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400 "2024-05-15T13:07:51Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 15, 2024, 1:07pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/1 "2024-05-15T13:07:51Z")

</div>

After a lengthy discussion with @Sekayi_Liburd and @Jeff_Hager in the “[CSS for Responsive Header](https://community.glideapps.com/t/css-for-responsive-header/73303)” 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](https://community.glideapps.com/t/how-to-create-an-auto-play-slideshow/73271)” which purely displays one slide/image at a time.

![ScreenRecording2024-05-15at18.13.46-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/0/b0b9a89fbcdfa1ebc3cefecda61e72cdb71cc05a.gif)

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.

```auto
/* 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**

```auto
/* 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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/f/4f9594a839129902d8417106620af4e25e67e6fe.gif)

## Update: Seamless frame transition

* * *
If you want a smooth transition from the last frame to the first, you can use the trick of duplicating some of your frames to cover the movement gaps. In other words, make a fake trailing move. Of course, this will add a few rows to your Glide table. Alternatively, you can try the 3D method I've included in the link below. This way all the code remains the same, you just need to change the keyframe animation code as shown below.

 ![Screenshot 2024-05-30 at 09.04.28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c1f068334f2ce883e856a16ee6e45140b162e948.jpeg)

```auto
@keyframes slide-In {
  0% {
    transform: translateX(0%);
  }
  8.33% {
    transform: translateX(0%);
  }
  16.66% {
    transform: translateX(-100%);
  }
  25% {
    transform: translateX(-100%);
  }
  33.33% {
    transform: translateX(-200%);
  }
  41.66% {
    transform: translateX(-200%);
  }
  50% {
    transform: translateX(-300%);
  }
  58.33% {
    transform: translateX(-300%);
  }
  66.66% {
    transform: translateX(-400%);
  }
  75% {
    transform: translateX(-400%);
  }
  83.33% {
    transform: translateX(-500%);
  }
  91.66% {
    transform: translateX(-500%);
  }
  100% {
    transform: translateX(-600%);
  }
}

```

See also:

> **[🎞 &nbsp;1. How to Create an Auto-Play Slideshow](https://community.glideapps.com/t/1-how-to-create-an-auto-play-slideshow/73271)**  
> **[🔄 3. Transforming a Card Collection into a 3D Continuous Carousel with CSS](https://community.glideapps.com/t/3-transforming-a-card-collection-into-a-3d-continuous-carousel-with-css/73558)**

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 15, 2024, 5:24pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/2 "2024-05-15T17:24:42Z")

</div>

I love it!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 15, 2024, 9:18pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/3 "2024-05-15T21:18:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 15, 2024, 9:24pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/4 "2024-05-15T21:24:10Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/0/c0a381d17865a2f72df086c42829d572d13215b3.jpeg)

> [@Vertical Text Alignment Option](https://community.glideapps.com/t/vertical-text-alignment-option/73419):
>
> To make more unique visual designs, it would be great to have a vertical text alignment option (especially for image captions). This can make Gliders stand out pretty easily I think. More font styles have been requested in the past… I would like to second those as well +1 +1.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 15, 2024, 9:31pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/5 "2024-05-15T21:31:44Z")

</div>

This should be solvable with CSS.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 15, 2024, 9:34pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/6 "2024-05-15T21:34:21Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 15, 2024, 9:39pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/7 "2024-05-15T21:39:08Z")

</div>

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

> [@Himaladin](#):
>
> ```auto
> .cardousel [data-testid="horizontal-collection-container"] > div {
> animation: slide-In 10s linear infinite; 
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 15, 2024, 9:41pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/8 "2024-05-15T21:41:55Z")

</div>

thanks!

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 15, 2024, 11:23pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/9 "2024-05-15T23:23:36Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 16, 2024, 1:39am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/10 "2024-05-16T01:39:11Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 16, 2024, 3:23am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/11 "2024-05-16T03:23:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 16, 2024, 3:38am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/12 "2024-05-16T03:38:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 16, 2024, 3:41am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/13 "2024-05-16T03:41:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 16, 2024, 6:32am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/14 "2024-05-16T06:32:03Z")

</div>

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

> [@Himaladin](#):
>
> ```auto
> .cardousel [data-testid="cc-card"] > div {
> padding:0;
> flex-direction: row;/*Not contain text. Delete if using text*/
> gap: 0px;
> }
> 
> ```

![ScreenRecording2024-05-16at14.09.32-ezgif.com-crop](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88beccc0bcc457dc0af10c4d3d867344afc47dfd.gif)

### Rotate Text

* * *

```auto
/*VERTICAL TEXT*/
.cardousel .horizontal > div {
  flex-direction: row;
}
.cardousel .horizontal > div > div > div:nth-child(2) {
  position: absolute;
  right: 105px;
  width: calc(2/3 * 100%);
  min-width: calc(2/3 * 100%); /* Aspect ratio used */
  top: 0px;
  padding:15px;
  transform: rotate(-90deg) translateY(0%);
  transform-origin: top right;
  background: rgba(0, 0, 0, 0.5);
}
.mobile-layer .cardousel .horizontal > div > div > div:nth-child(2) {
  position: absolute;
  right: 86px;
  top: 0px;
  padding:10px;
  width: calc(2/3 * 100%); /* Aspect ratio used */
  transform: rotate(-90deg) translateY(0%);
  transform-origin: top right;
  background: rgba(0, 0, 0, 0.5);
}
/*Meta Text*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(1){
width: 100%; /*Don't change it*/
font-size: 2rem;
text-align: right;
}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(1){
width: 100%; /*Don't change it*/
font-size: 1.0rem;
text-align: right;
white-space:nowrap;
overflow: hidden;
}
/*Title Text*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > h3{
  width: 100%; /*Don't change it*/
font-size: 2rem;
text-align: left;

}
/*MOBILE*/
.mobile-layer .cardousel [data-testid="cc-card"] > div > div:nth-child(2) > h3{
width: 100%; /*Don't change it*/
font-size: 1.5rem;
text-align: left;
white-space:nowrap;
overflow: hidden;
}

/*Description Text*/
.cardousel [data-testid="cc-card"] > div > div:nth-child(2) > p:nth-child(3){
width: 100%; /*Don't change it*/
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: 100%; /*Don't change it*/
font-size: 1.0rem;
text-align: right;
white-space:nowrap;
overflow: hidden;
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 17, 2024, 9:15am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/15 "2024-05-17T09:15:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 17, 2024, 10:08am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/16 "2024-05-17T10:08:44Z")

</div>

If you want I will give you the code.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 17, 2024, 10:09am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/17 "2024-05-17T10:09:22Z")

</div>

that would be wonderful! Thanks 😁

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 17, 2024, 10:11am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/18 "2024-05-17T10:11:44Z")

</div>

I need time to adjust it to display on mobile.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 17, 2024, 10:13am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/19 "2024-05-17T10:13:17Z")

</div>

ok

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 17, 2024, 11:13am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/20 "2024-05-17T11:13:04Z")

</div>

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

[Next page](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400.md?page=2)