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 expl…

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

you are expanding, not breaking. I just requested a vertical text alignment caption. It would be a perfect match with this sliding carousel! [image] [image] Vertical Text Alignment Option Feature Requests To make more unique visual designs, it would be great to have a v…

This should be solvable with CSS.

yes. Well this week I surely learned that all things might be solvable with CSS :joy: 2 questions: Can we slide in from the left as well and can we manipulate the speed?

Yes, just change the value of translateX from negative to positive and regarding the duration in the section: [image] Himaladin: .cardousel [data-testid="horizontal-collection-container"] > div { animation: slide-In 10s linear infinite; }

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?

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 las…

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.

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

Community Resources

Sekayi_Liburd May 15, 2024, 9:24pm 4

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

Topic		Replies	Views
CSS for Responsive Header Ask for Help	198	1935	June 1, 2024
🎞️ 1. How to Create an Auto-Play Slideshow Community Resources custom-css , tutorial , custom-code	83	1070	May 12, 2024
Auto slider image carousel Project Showcase	36	4277	April 29, 2024
Help in Swipe animation Ask for Help custom-css	22	438	July 30, 2024
Beautiful Design App Project Showcase	819	36852	November 16, 2021

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

Related topics