Carousel multi items
Use carousel multi items when each slide needs multiple columns of content side by side.
Live demo
Visitors step through slides of related content (for example cards or teasers) instead of scrolling a very long row. Content authors place real components in each slot; visual designers set items per slide and motion so slides stay readable and controls stay obvious.
Behaviour
- Items per slide maps to Bootstrap column widths (stacking on small screens).
- Auto-play can be disabled by setting the interval to zero.
- Edit mode shows “Slide: n” headings so authors see slide boundaries.
Anatomy
- Carousel root with slide regions.
- Each slide contains a row of one or more parsys columns.
- Previous and next controls.
Replace with one and two items per slide on mobile.
Content guidelines
- Keep parallel content in each slide (similar structure and length where possible).
Best practices
Do
- Keep items per slide consistent with readable line lengths on mobile (
col-12stacks). - Prefer manual advance (auto-play 0) when content is dense.
Don't
- Don't mix unrelated components in one slide without a shared heading context.
When to use
- Testimonials, cards, or teasers where each slide is built from components rather than pages.
- When multiple tiles per slide are required.
When not to use
- Page-driven slides; use the Carousel component instead.
- Long-form reading content; avoid hiding it in slides.
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/carousel-parsys/carousel-parsys.jsp']Technical behaviour
carousel-parsys.jsp includes apps.concordia.carousel-parsys. It computes slide count from numItems / itemsPerSlide, renders carousel-item rows, and nests Bootstrap columns (col-12, col-sm-6, col-sm-4, or col-sm-3 for 1 to 4 items per slide). When autoPlay is greater than zero on publish, the root gets data-bs-ride="carousel" and data-bs-interval in milliseconds. Standard prev and next controls include visually hidden text.
Edit mode prints “Slide: n” headings so authors see slide boundaries.
Authoring fields
| Field | Purpose |
|---|---|
| Number of items | Total parsys slots to render. |
| Items per slide | Columns per slide (drives grid class). |
| No gutter | g-0 on rows when true. |
| Auto-play | Seconds; 0 disables ride. |
| Additional class | On carousel root. |
Instances in the codebase
| Location | Notes |
|---|---|
apps/concordia/components/carousel-parsys/carousel-parsys.jsp | Implementation. |
| Item | Location |
|---|---|
| Component | apps/concordia/components/carousel-parsys/carousel-parsys.jsp |