Carousel

A Carousel is a versatile UI component often used to showcase multiple pieces of content in a compact area. It is ideal for highlighting featured products, displaying image galleries, or presenting a series of testimonials.

Base Components

Overview

The Carousel component allows you to display a series of content items, such as images or text, within a single space. Users can navigate through the items by clicking on arrows, swiping, or using pagination indicators.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D7533-75616%26t%3DpA8X0YmO6d7F2SMU-1

When Should You Use a Carousel?

  • Highlighting top products, services, promotions, projects or work samples. Can also be used for Image Galleries in displaying a collection of images in a slideshow format.

How Should You Use a Carousel?

  • Include the Carousel component in your project by importing it from the design system library.
  • Ensure that you have the necessary assets (images, text) ready for display.
  • Define the structure of your Carousel with a container element.
  • Add individual items within the container, ensuring each item is properly styled and accessible.
  • Include navigation arrows to allow users to move forward and backward through the Carousel.
  • Optionally, add pagination indicators for better navigation and usability.
Previous

No previous post
Up next

No next post