CMS Ribbon Carousel

CMS Ribbon Carousel bends a collection into a ribbon: cards curve away in 3D, the middle one stays sharp and upright, and the cards beside it tilt, sink and soften.

Drag it, flick the wheel, press the arrow keys or tap a dot — one centre index is the whole state, so the ribbon always lands on a card.

Bind a CMS collection through the card slots, set curve, depth and spacing in degrees and pixels, and the canvas shows the finished first frame.

Key features

- Ribbon curvature. Tilt, depth and scale grow with each step from the centre, in degrees you set.

- The middle card leads. Side cards soften and fade, so one card reads first at any width.

- CMS slots. One component slot per card binds a collection straight into the ribbon.

- Four ways to move. Pointer drag with snap, horizontal wheel, arrow keys, dots and arrow buttons.

- Autoplay in seconds. Set the interval; it rests while a visitor hovers or tabs into the track.

- Endless loop. Cards wrap around the ribbon, so the track keeps going in both directions.

- Reduced motion honoured. Ask for less movement and the same cards arrive in place instantly.

- Styled by you. Card size, gap, radius, five colours, text size, alignment and every label.

What you control

• Cards as an array: title, caption, image, alt text, link and a tint for the gradient face

• Card slots for the CMS path, paired one to one with the cards

• Curve in degrees, depth, perspective, card width, gap, cards visible each side, radius

• Autoplay seconds, loop, edge softening, arrows, dots, five colours, text size, max width, align, labels

One ribbon per section, images from your own project or CMS, and a card count that stays comfortable up to about twenty-four.