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

Community Resources
, ,
41

ok. :+1:

1 Like
42

Stay tuned, it will be published soon. @Sekayi_Liburd

1 Like
43

looking forward to it!! :grin:

44

I’ve launched it. :wink:

1 Like
45

just noticed. Looking at it now :smiling_face:

1 Like
46

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

47

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.

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

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

/*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;
}
49

If you use that code, try removing the padding in the first code.

50

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

51

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

/* 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;
}
1 Like
52

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

1 Like
53

Provide comments in a description you understand to avoid forgetting.

1 Like
54

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

/*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%);
  }
}
55

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.

56

hmmm… I wonder if they were doing some maintenance…

1 Like