Carousel Block
Displays a responsive image carousel with navigation controls and optional captions. The carousel automatically loads images from the current page's data and provides smooth scrolling between images.
Overview
The Carousel block creates an interactive image gallery that's perfect for showcasing multiple photos from itineraries, listings, events, or regions. It uses Flickity for smooth animations and responsive behavior, with built-in navigation controls and optional image captions.
Block Features & Options
Display Options
- Show Captions: Toggle to display image captions below each photo
- Alignment: Left, center, or right align the carousel
- Custom CSS Class: Add custom styling classes
Carousel Behavior
- Auto-play: Automatically cycles through images (disabled by default)
- Wrap Around: Continuous scrolling from last to first image
- Navigation: Previous/Next buttons for manual control
- Responsive: Adapts to different screen sizes
- Touch Support: Swipe gestures on mobile devices
How it Works
The Carousel block automatically detects and displays images from the current page's carousel_images data. It uses the Flickity library for smooth animations and responsive behavior. The carousel includes navigation buttons and can optionally show image captions when available.
How to Add & Configure
- Add the block to your template page
- Configure options in the block sidebar:
- Toggle "Show Captions" to display image descriptions
- Set alignment if needed
- Add custom CSS classes if desired
- Save the page to apply changes
Shortcode Usage
Basic Shortcode
[tourismo-carousel]
All Available Options
| Option | Type | Default | Description |
|---|---|---|---|
show_captions |
boolean | true |
Display image captions below photos |
align |
string | "" |
Alignment: left, center, or right |
class_name |
string | "" |
Custom CSS class for styling |
custom_template_name |
string | "" |
Custom template override name |
Examples
Basic carousel with captions:
[tourismo-carousel show_captions="true"]
Right-aligned carousel without captions:
[tourismo-carousel show_captions="false" align="right"]
Custom styled carousel:
[tourismo-carousel class_name="my-custom-carousel" align="center"]
Content Displayed
The carousel displays images from the current page's carousel_images field. Each image can include:
- Image: The photo file (automatically resized to medium size)
- Caption: Optional descriptive text displayed below the image
- Alt Text: Accessibility description for screen readers
The carousel includes:
- Navigation buttons: Previous/Next controls
- Responsive layout: Adapts to different screen sizes
- Smooth animations: Flickity-powered transitions
- Touch support: Swipe gestures on mobile devices
Related Blocks
- Content Block: Can display media in carousel format within content
- Title Block: Often used above carousels for section headers
- Description Block: Provides context for carousel content