[MCL-8] Carousel Created: 08/Dec/23  Updated: 25/Jan/24

Status: In Progress
Project: Magnolia Component Library
Component/s: Core Content
Affects Version/s: None
Fix Version/s: None

Type: Story Priority: Neutral
Reporter: Raymond Tran Assignee: Le Hai Thanh
Resolution: Unresolved Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Template:
Acceptance criteria:
Acceptance Criteria
[ ]* Parent component is called "Carousel"
[ ]* Carousel slide component is called "Carousel Slide"
[ ]* Carousel slides animate when scrolled
[ ]* Up to 5 Carousel slides are supported
[ ]* Carousel slides scroll with a pre-determined delay
[ ]* Carousel slide (Image) is capable of displaying any combination of:
Headline without text
Headline with text
Headline with button
Headline with text and button
All the above with or without a background image or video
[ ]* Video playback is looped
[ ]* Video playback controls are hidden
[ ]* The carousel slide elements can be justfied to the left, right or centred
[ ]* User can scroll the slides using the arrow previous/next controls
[ ]* User can select / jump to a desired carousel slide using the the the indicator controls at the bottom
[ ]* User can pause/resume scrolling using Play/Pause button controls
[ ]* Background image is rendered using the Imaging module with support for focal point and areas, with support for all breakpoints.
[ ]* If there is only one Carousel slide, hide all controls, constituting this component as a "Hero Banner"
[ ]* If the data is absent for any element, it is not rendered in the markup
[ ]* Shows animation when Carousel button is depressed
Documentation Acceptance Criteria
[ ]* Contains Title, Description and Examples
[ ]* Contains FTL and YAML code
Content Author Acceptance Criteria
[ ]* Component can be added to any page template in the Header area only.
[ ]* Up to 5 carousel slides can be added to a Carousel parent component. This can be modified by changing maxComponents property
[ ]* Headline is mandatory
[ ]* Headline, text, button, button style, button internal / external link and background image/video can be entered via the dialog
[ ]* Configuration of carousel slide elements justification is possible
[ ]* Video can be selected from DAM or linked from YouTube / Vimeo / Twentythree
[ ]* Visibility of Play/pause, indicator and previous/next controls, auto-scroll and auto-scroll delay are configurable via the dialog
[ ]* CSS and class can be overridden in the CMS
Accessibility Acceptance Criteria
[ ]* Logical tab order should be maintained, ensuring that keyboard users navigate through the elements in a coherent sequence.
[ ]* A “skip to content” link should be available, permitting users to bypass the accordion if they don’t wish to interact with it.
[ ]* ARIA landmarks, roles, and states (like aria-hidden) should be implemented for the carousel to convey its status and function to assistive technologies.
[ ]* The Carousel can be scrolled left or right using the cursor buttons on the keyboard
[ ]* All Carousel controls must be selectable and usable with tab and return keys
[ ]* When a Carousel control has been selected with the keyboard, there should be a visual highlight indicator showing that it has been selected.
[ ]* When using the Accessible theme, the animations of this component should be minimised via the prefers-reduced-motion media query.
Date of First Response:

 Description   

User Story:

As a content author,
I want to create a horizontally scrolling carousel component
So that I can showcase enticing content that cycles through multiple image and text content blocks that’s inclusive to all users, including those with accessibility needs.

Description:

Exists in BTK already as a Carousel + item component

Bootstrap documentation:

https://getbootstrap.com/docs/5.3/components/carousel/



 Comments   
Comment by James Hirka [ 11/Dec/23 ]

Should we support videos for V1 carousels?

Comment by Raymond Tran [ 11/Dec/23 ]

I think so because a Video component is already included in V1.

Generated at Mon Feb 12 04:48:38 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.