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.
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:
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.
@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:
1. How to Create an Auto-Play Slideshow
3. Transforming a Card Collection into a 3D Continuous Carousel with CSS
