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.