Image Carousel

#Overview

Introduction:
The Image Carousel is a dynamic and responsive component that displays a collection of images in a sliding format. It provides an engaging way to showcase visual content, such as galleries, portfolios, or product images. Users can click on images to view them in a lightbox overlay for an enhanced viewing experience.

Key Features:

• Supports various grid sizes depending on the number of images.
• Clickable images open in a lightbox overlay for detailed viewing.
• Adjustable grid layout based on the number of images:
  • 2–24 images: 2x2 grid layout.
  • 25–42 images: 3x2 grid layout.
  • 43+ images: 3x3 grid layout.

Best use cases

Examples of Effective Use:

• Showcasing portfolios or galleries where users want to view high-resolution images.
• Listing image sliders for listing pages.
• Visual storytelling with a collection of related images.

How NOT to use this

Common Missteps:

• Using extremely large images without optimization, causing slow load times.
• Displaying low-quality images, which can negatively impact user experience.

FAQ, pro tips, and troubleshooting

• Why are my images not opening in the lightbox?
  The lightbox is disabled while live editing. Ensure the carousel is viewed on a live site for full functionality.

• How can I change the grid size?
  The grid size adjusts automatically based on the number of images provided:

  • 2–24 images: Displays as a 2x2 grid.
  • 25–42 images: Displays as a 2x3 grid.
  • 43+ images: Displays as a 3x3 grid.

• Why aren't my images sliding?
  Sliding functionality might is disabled while live editing. Ensure the carousel is viewed on a live site for full functionality.