A developer uses a specific design pattern for displaying a small number of related items. This pattern uses a horizontal carousel with simple navigation. The carousel works well on both desktop and mobile devices.
By Pawan Nayar · from the LLOS AI Learning record
A developer uses a specific design pattern for displaying a small number of related items.
This pattern uses a horizontal carousel with simple navigation. The carousel works well on both desktop and mobile devices.
A developer should use this carousel for 4 to 12 items. These items can be movies, books, tools, or examples. The carousel shows cards that users can scroll through. On a computer, users click 'previous' or 'next' buttons. On a phone, users swipe to see more cards. Each card has an emoji, a title, a subtitle, a short quote, and a category.
A developer creates a website section for recommended books. The developer has 7 books to show. The developer uses this carousel pattern. Each book appears as a card. Users can easily swipe through the books on their phone.
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 must treat mobile and desktop as two separate apps. They should use media queries to define distinct CSS layouts for each.
Using `overflow:hidden` and `max-height` on a section wrapper can hide content. For example, buttons at the bottom of a section might disappear.
A developer must treat mobile and desktop as two separate applications. They share HTML and JavaScript.
The `.movie-section` is a main part of the page. It has a warm background color.
A developer uses a specific design pattern for displaying a small number of related items. This pattern uses a horizontal carousel with simple navigation. The carousel works well on both desktop and mobile devices.