# 🎞 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:** 16\
**Page:** 3

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

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

</div>

> [@Sekayi\_Liburd](#):
>
> The loop from the last to the first image is a bit abrupt.

Stay tuned, it will be published soon. @Sekayi_Liburd

---

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

</div>

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

</div>

I’ve launched it. 😉

---

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

</div>

just noticed. Looking at it now ☺

---

<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:** [June 5, 2024, 4:00am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/46 "2024-06-05T04:00:10Z")

</div>

I noticed that your cardousel images fill up the entire width of the screen. Which part of the code controls that? I’m not sure if I changed it or not but the code i’m using leaves a little overlapping edge from the previous and next images - _which I like in certain cases but I want to use the standard for now…_

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/4/6427f43d1635061e07f47991681d0781bed0f4ef.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:** [June 5, 2024, 4:51am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/47 "2024-06-05T04:51:00Z")

</div>

You can try removing or keeping each subcode in this part of the code to see the differences. When all parts are applied, this code functions to clip the frame. If you remove all of them, the result will be a full frame display.

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

```

---

<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:** [June 5, 2024, 4:57am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/48 "2024-06-05T04:57:45Z")

</div>

this is the current set-up that I’m using ahead of the keyframe codes:

```auto
/*12 Images Complete Code*/
.cardousel .horizontal {
width: 100% !important;
gap:0;
overflow: visible;
padding:0; 
}
.cardousel [data-testid="horizontal-collection-container"] {
  display: flex;
  animation: slide-In 50s linear infinite; /*You may change the duration*/
}

.cardousel [data-testid="card-image"] {
 height: 10px !important;
}
.cardousel [data-testid="cc-card"] img {
border-radius: 0;
}

```

---

<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:** [June 5, 2024, 5:24am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/49 "2024-06-05T05:24:14Z")

</div>

> [@Sekayi\_Liburd](#):
>
> ```auto
> /*12 Images Complete Code*/
> .cardousel .horizontal {
> width: 100% !important;
> gap:0;
> overflow: visible;
> padding:0; 
> }
> 
> ```

If you use that code, try removing the padding in the first 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:** [June 5, 2024, 5:32am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/50 "2024-06-05T05:32:12Z")

</div>

I removed the padding first, then the other items but it didn’t seem to work.

---

<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:** [June 5, 2024, 5:53am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/51 "2024-06-05T05:53:12Z")

</div>

Your code is missing something if you want to override the default condition.

```auto
/* Container styling */
.cardousel {
    //display: block;
    //position: relative;
    width: calc(100%);
    //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;
}
/*12 Images Complete Code*/
.cardousel .horizontal {
width: 100% !important;
gap:0;
overflow: visible;
padding:0; 
}
.cardousel [data-testid="horizontal-collection-container"] {
  display: flex;
  animation: slide-In 50s linear infinite; /*You may change the duration*/
}

.cardousel [data-testid="card-image"] {
 height: 10px !important;
}
.cardousel [data-testid="cc-card"] img {
border-radius: 0;
}

```

---

<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:** [June 5, 2024, 6:08am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/52 "2024-06-05T06:08:16Z")

</div>

it broke when I used that. Maybe because the code was previously remade and adjusted without those parts, lol

---

<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:** [June 5, 2024, 6:10am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/53 "2024-06-05T06:10:43Z")

</div>

Provide comments in a description you understand to avoid forgetting.

---

<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:** [June 5, 2024, 6:14am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/54 "2024-06-05T06:14:33Z")

</div>

lol, yes. I kept all of the comments that you gave me. 😄

```auto
/*12 Images Complete Code*/
.cardousel .horizontal {
width: 100% !important;
gap:0;
overflow: visible;
padding:0; 
}

.cardousel [data-testid="horizontal-collection-container"] {
  display: flex;
  animation: slide-In 50s linear infinite; /*You may change the duration*/
}

.cardousel [data-testid="card-image"] {
 height: 10px !important;
}
.cardousel [data-testid="cc-card"] img {
border-radius: 0;
}

@keyframes slide-In {
  0% {
    transform: translateX(0%);
  }
2% {
    transform: translateX(0%);
  }
  4.1666% {
    transform: translateX(0%);
  }
  8.3333% {
    transform: translateX(-100%);
  }
  12.5% {
    transform: translateX(-100%);
  }
  16.6666% {
    transform: translateX(-200%);
  }
  20.8333% {
    transform: translateX(-200%);
  }
  25% {
    transform: translateX(-300%);
  }
  29.1666% {
    transform: translateX(-300%);
  }
  33.3333% {
    transform: translateX(-400%);
  }
  37.5% {
    transform: translateX(-400%);
  }
  41.6666% {
    transform: translateX(-500%);
  }
  45.8333% {
    transform: translateX(-500%);
  }
  50% {
    transform: translateX(-600%);
  }
  54.1666% {
    transform: translateX(-600%);
  }
  58.3333% {
    transform: translateX(-700%);
  }
  62.5% {
    transform: translateX(-700%);
  }
  66.6666% {
    transform: translateX(-800%);
  }
  70.8333% {
    transform: translateX(-800%);
  }
  74% {
    transform: translateX(-900%);
  }
  78.1666% {
    transform: translateX(-900%);
  }
  82.3333% {
    transform: translateX(-1000%);
  }
  86.5% {
    transform: translateX(-1000%);
  }
  90.6666% {
    transform: translateX(-1100%);
  }
  93.8333% {
    transform: translateX(-1100%);
  }
97% {
    transform: translateX(-1200%);
  }
  98% {
    transform: translateX(-1200%);
  }
 99% {
    transform: translateX(-1200%);
  }
 100% {
    transform: translateX(-1200%);
  }
}

```

---

<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:** [June 5, 2024, 6:17am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/55 "2024-06-05T06:17:06Z")

</div>

The last one, I didn’t fix the comment anymore. Lately, Glide has been feeling slow, and several times I’ve had to close the builder because of this.

---

<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:** [June 5, 2024, 6:19am UTC](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400/56 "2024-06-05T06:19:51Z")

</div>

hmmm… I wonder if they were doing some maintenance…

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