Swipers
Enhance user experience with dynamic, interactive content carousels for seamless navigation and engaging presentations
Overview
Swipers are versatile components that enhance user interaction and content presentation in web applications. This page showcases three types of swipers available in the FAO Design System:
- Hero Banner Swiper: Ideal for showcasing featured content or important announcements at the top of a page. It provides a dynamic and engaging way to present multiple hero banners in a single, interactive component.
- Auto-width Carousel: A flexible carousel that automatically adjusts the number of visible slides based on their content width and the available space. This is perfect for displaying a variable number of items, such as news cards or product listings.
- Fixed Slides Per View Carousel: This carousel maintains a consistent number of visible slides (2 or 3) regardless of screen size, offering a more structured layout for content presentation. It's suitable for showcasing a specific number of items at once, like featured articles or team members.
Each swiper type comes with navigation controls and is fully responsive, ensuring a smooth user experience across different devices and screen sizes.
Usage
Slides Per View Auto
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Slides Per View 2/3
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
News
Card title
26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.