# 🎞 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:** 2

<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, 11:47am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/21 "2024-05-17T11:47:33Z")

</div>

ok thanks a mil! I got it.  
I’ll test it out a little later.

---

<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:25pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/22 "2024-05-17T21:25:44Z")

</div>

It’s lovely! Only slight problem for longer captions.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/1/a1f6f2f2d4c70069fd1dc081d38a395bad59447c.jpeg)

---

<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, 9:50pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/23 "2024-05-17T21:50:04Z")

</div>

It seems that I missed copying a part of the code for the height of the frame on the cellphone display.

```auto
.mobile-layer #main-root:has(.cardousel) [data-testid="card-image"] {
    height: 300px;
}

```

---

<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:59pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/24 "2024-05-17T21:59:11Z")

</div>

you are the best!

---

<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 18, 2024, 3:23am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/25 "2024-05-18T03:23:01Z")

</div>

my cardousel on PC. I added a gap for the clothes-line look and shadow for 3-d appearance. Everything is travelling to the left at a comfortable speed and pausing to make reading easy. Love it.

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

And if you don’t know what the clothes-line look is, hehe:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c75072a64b5ed1077519e26fa5eafa416f076e33.jpeg)

---

<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 18, 2024, 3:27am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/26 "2024-05-18T03:27:54Z")

</div>

> [@Sekayi\_Liburd](#):
>
> And if you don’t know what the clothes-line look is

Maybe you have never experienced using bamboo instead of rope. 😀

---

<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 18, 2024, 3:31am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/27 "2024-05-18T03:31:08Z")

</div>

this is how we use bamboo 😁

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

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/4/e42f034102711daec155d120c7d228c8181103ea.jpeg)

---

<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 18, 2024, 7:22am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/28 "2024-05-18T07:22:20Z")

</div>

@Himaladin , my vertical text looks good on the mobile phone but it is too big on the PC. Is there a way to fix it?’

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

It looks like my images are shorter on the pc.

---

<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 18, 2024, 7:38am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/29 "2024-05-18T07:38:17Z")

</div>

For the text section, I have provided paired text settings for each code block on the desktop and mobile displays.  
Meanwhile, when it comes to image size, you can use the aspect-ratio settings in the Glide configuration panel.  
And it looks like you have modified the initial code, so I don’t know what code you are implementing. Maybe you can return them one by one to understand the effect.

Actually, If you want to make it autoscroll, you can simply remove this part:

```auto
/*Desktop style*/
//.cardousel {
    display: block;
    position: relative;
    width: calc(100% - 20px);
    height:100%;
    overflow: hidden;
    border-radius: 10px;
    margin-left:10px;
}

```

Set the asect-ratio in the configuration panel. Each of these changes requires resetting all the code in the text section, especially the width and font-size

---

<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 18, 2024, 8:21am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/30 "2024-05-18T08:21:15Z")

</div>

ok. In this part, I only changed the border-radius to zero to close the curved gap at the edge of the container. Other than that, I added frames, balanced the translated offset so the pictures appear in the middle of the screen, decreased the speed and created a second version vcardousel for the carousel where I want vertical text…  
I didn’t change much 😂

but I see that there are some different elements in the code you just provided. For example, margin-left.

```auto
/* Container styling */
.vcardousel {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    width: 100%;
    border-radius: 0px;
}

/*First frame*/
#main-root [data-testid="wire-container-vcardousel"] > div {
    padding: 0;
}
.vcardousel .horizontal {
width: 100% !important;
gap:5 ;
overflow: visible;
padding:0;
}
.vcardousel [data-testid="horizontal-collection-container"].horizontal img {
border-radius: 0;
}

.vcardousel [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)); 
  }
}

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

/* Slide animation with pause */
@keyframes slide-In {
  0% {
    transform: translateX(0%);
  }
  5% {
    transform: translateX(0%);
  }
  10% {
    transform: translateX(-102%);
  }
  15% {
    transform: translateX(-102%);
  }

  20% {
    transform: translateX(-205%);
  }
  25% {
    transform: translateX(-205%);
  }
  30% {
    transform: translateX(-307%);
  }
  35% {
    transform: translateX(-307%);
  }
  40% {
    transform: translateX(-409%);
  }
  45% {
    transform: translateX(-409%);
  }

  50% {
    transform: translateX(-511%);
  }
  55% {
    transform: translateX(-511%);
  }

  60% {
    transform: translateX(-613%);
  }
  65% {
    transform: translateX(-613%);
  }

  70% {
    transform: translateX(-715%);
  }
  75% {
    transform: translateX(-715%);
  }

  80% {
    transform: translateX(-819%);
  }
  84% {
    transform: translateX(-819%);
  }

  88% {
    transform: translateX(-920%);
  }
  92% {
    transform: translateX(-920%);
  }
  94% {
    transform: translateX(-1022%);
  }

96% {
    transform: translateX(-1022%);
  }
  100% {
    transform: translateX(-1022%);
  }

}

```

---

<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 18, 2024, 8:39am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/31 "2024-05-18T08:39:11Z")

</div>

No. Just throw this away: .vcardousel

```auto
/* .vcardousel {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    width: 100%;
    border-radius: 0px;
} */

```

Then the gap problem should have units, for example px ~ gap: 5px;. Or you just throw it away to return to default (//gap:0;).

The vertical text problem is a bit difficult for me to explain. The point is -90deg rotation with the origin top left, you can try it with cut paper. 😀

---

<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 18, 2024, 8:46am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/32 "2024-05-18T08:46:47Z")

</div>

> [@Himaladin](#):
>
> No. Just throw this away: .vcardousel

Well, I’m not using vcardousel anymore because even when i chose another card dimension, the text didn’t fit well on wide screen and I didn’t want to interfere with the font size because it looked good on mobile.  
So for now, no vertical text.

> [@Himaladin](#):
>
> Then the gap problem should have units, for example px ~ gap: 5px;. Or you just throw it away to return to default (//gap:0;).

~~I will add units but it did not default. My gap is there. 🙂~~  
Actually, I need to leave it unitless for now. When I added units the gap size changed so I will have to adjust all those translations. Whatever is glide’s default unit, it works for me at the moment.  
Sorry for desecrating your code. 🥲

> [@Himaladin](#):
>
> The vertical text problem is a bit difficult for me to explain. The point is -90deg rotation with the origin top left, you can try it with cut paper. 😀

Lol, this is not hard to understand at all. I did enough math in school to know about rotation 🤣

---

<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 18, 2024, 8:53am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/33 "2024-05-18T08:53:33Z")

</div>

Another thing is that you try to return the translation with an increase in value per 100%, because each card has a fixed width by default. Otherwise it will make the text spacing complex again. Also translateX(calc(-100% \* 5)); for six images.

Not doubt your math. I have a hard time explaining it. It’s better if you just try it with some of the parameters that are already in my code. It’s your turn to explain to me if you succeeded. 😉

---

<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 18, 2024, 8:59am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/34 "2024-05-18T08:59:03Z")

</div>

> [@Himaladin](#):
>
> Another thing is that you try to return the translation with an increase in value per 100%, because each card has a limited width. Otherwise it will make the text spacing complex again. Also translateX(calc(-100% \* 5)); for six images.

ohhh, this is good to know. I didn’t want to make you work even harder so I just did it by trial and error until all the pictures looked nice in the mobile view.  
Now that I understand this better, I will use translateX(calc(-100% \* 14)); and see if it goes well with 100% intervals.

> [@Himaladin](#):
>
> Not doubt your math. I have a hard time explaining it. It’s better if you just try it with some of the parameters that are already in my code. It’s your turn to explain to me if you succeeded. 😉

lol, ok. In this case, the -90 degrees written in your code was enough explanation.

Since I didn’t want to change the text size, I just used the default card text but I will try the new translation and see if it fixes itself.

---

<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 18, 2024, 9:09am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/35 "2024-05-18T09:09:01Z")

</div>

It still became progressively offset from center using the original code but for translateX(calc(-100% \* 14));

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/0/b001faa0805cfd92abc4497a715ba9167728a6d7.png)

How do you keep it in the center?

---

<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 18, 2024, 9:13am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/36 "2024-05-18T09:13:08Z")

</div>

In mine it is full width. Looks like you are missing this code:

```auto
.mobile-layer #main-root:has(.cardousel) [data-testid="card-image"] {
    height: 300px;
}

```

---

<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 18, 2024, 10:28am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/37 "2024-05-18T10:28:20Z")

</div>

I added it. Still had to adjust the translation but that’s ok. It looks good. 👍

---

<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 18, 2024, 5:31pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/38 "2024-05-18T17:31:07Z")

</div>

@Sekayi_Liburd, I just remembered you placed your cardousel in a 3 column container. I provide code to set the container size (full, 1:1 and 3 column) which will affect the size of your frame. For mobile it is not necessary.

```auto
/*Frame in container size*/
.desktop [data-testid="wire-component-stack"]:has(.cardousel) .container-padding-md,
.desktop [data-testid="wire-component-stack"]:has(.cardousel) .oneToOne > *, .desktop [data-testid="wire-component-stack"]:has(.cardousel) .threeColumns > * {
width: 460px;
}

```

---

<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 18, 2024, 7:22pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/39 "2024-05-18T19:22:32Z")

</div>

Ok, I’ll try it. I was using 4 columns actually.

It looks even better! Better fit for the text too.

---

<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 18, 2024, 10:47pm UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/40 "2024-05-18T22:47:32Z")

</div>

You just have to change the selector; for example from .threeColumns to .fourColumns.  
However, keep in mind that this doesn’t necessarily mean that you can enlarge beyond the minmax limit in the grid rules. In general, the greater the number of columns, the smaller the size.

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

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