A carousel component uses CSS properties for smooth scrolling and alignment. JavaScript handles navigation between items. Different visual states show the status of each item.
By Pawan Nayar · from the LLOS AI Learning record
A carousel component uses CSS properties for smooth scrolling and alignment.
JavaScript handles navigation between items. Different visual states show the status of each item.
The main container uses `scroll-snap-type: x mandatory`. This makes items snap into place horizontally. Each item in the carousel has `flex: 0 0 min(340px, 85vw)`. This sets its size. Each item also has `scroll-snap-align: center` to center it when snapped. To move to a specific item, a JavaScript function calls `scrollIntoView({inline:'center'})` on that item. CSS scroll-snap then aligns the item correctly. Dots show the status of each item. For example, a dot can be `active`, `answered`, `correct`, or `wrong`. Items fade in when they become visible. This uses an IntersectionObserver.
A developer creates an online quiz. The quiz uses a carousel for questions. Each question card snaps into view. Users can click dots to move between questions. The dots change color to show if a question is answered correctly or incorrectly.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A developer uses `#interactive-svg-demo` for the main section that holds an SVG image. JavaScript code will interact with this section.
A developer uses a main container for the entire experience. Inside, specific sections handle different parts.
A developer must set the 'position: relative' and a 'z-index' value on the parent element. This 'z-index' value must be higher than any overlapping elements.
A button should only be as wide as its text and the space around the text. This is called content-sized.
A carousel component uses CSS properties for smooth scrolling and alignment. JavaScript handles navigation between items. Different visual states show the status of each item.