The BuddyBoss App Image Carousel Block block allows you to showcase multiple images in a swipeable carousel within your mobile app. This is a great way to highlight featured content, promotions, announcements, events, courses, or visual storytelling elements on your app pages.
Add the Image Carousel Block
- Open the App Page where you want to add the carousel.
- Click the + Add Block button or open the Blocks panel.
- Search for Image Carousel.
- Drag and drop the Image Carousel block into the center content area of the page editor.
Once added, the block settings will appear in the right-hand panel.
Configure the Layout
The Design dropdown allows you to choose how the carousel is displayed.
Available layouts include:
- Standard
- Full Width
- Split
- Center
- Card
Select the layout that best matches the design of your app page.
You can also choose the display size:
- Small
- Medium
- Large
Add a Block Title
Use the Block Title field to add a heading above the carousel.
Examples:
- Featured Courses
- Upcoming Events
- Member Highlights
- Latest News
Choose a Content Source
The Image Carousel block supports two content sources:
Manual
Select Manual if you want to create and manage each carousel card individually.
This option is ideal for:
- Promotions
- Announcements
- Featured content
- Marketing campaigns
Dynamic
Select Dynamic if you want the carousel to automatically display content based on a query or content source.
This option is useful for automatically displaying:
- Posts
- Articles
- Custom content
Add Carousel Cards
The Image Carousel block allows you to create multiple cards, each with its own image, content, and destination link.
- Click + Add New Card.
- Upload or select an image using the Upload Image button.
- Enter a title in the Heading Text field.
- Add supporting content in the Body Text field.
- Enter optional information in the Meta Data field.
- Select a Link Type.
- Configure the destination URL or page.
- Add button text.
- Repeat the process for additional carousel cards.
You can add up to 10 image cards within a single image block.
Card Fields
Image – Upload an image that will be displayed for the carousel card. For best results, use high-quality images with consistent dimensions across all cards.
Heading Text – The main title displayed on the carousel card.
Body Text – Add a short description that provides additional context for the card. This text is displayed below the heading when Show Body Text is enabled.
Meta Data – Use this field to display supplemental information. This information is displayed when Show Meta Data is enabled.
Link Type
Choose where the carousel card should direct users when they tap the button.
Custom – Select Custom to enter any URL manually. Enter the destination in the Image/Button URL field.
Pages – Select Pages to link directly to an existing app page. This option is useful for navigation within your app.
Core Pages – Select Core Pages to link directly to built-in BuddyBoss app destinations. Available options depend on your app configuration.
Image/Button URL
Enter the destination URL when using the Custom link type.
Button Text – Specify the text displayed on the card button. The button is displayed when Show Button is enabled in the block settings.
Customize Colors
The Color section allows you to customize the appearance of the carousel.
Available options include:
- Heading Text Color
- Body Text Color
- Background Color
Light and Dark Mode
The Profile Card supports both Light and Dark color configurations.
Configure Card Settings
The following display options can be enabled or disabled:
- Show Block Title
- Show Heading Text
- Show Body Text
- Show Meta Data
- Show Button
Disable any elements you do not want displayed in the carousel.
Configure Carousel Settings
The Image Carousel block includes several carousel behavior settings.
Enable Autoplay – Automatically rotates through carousel slides without user interaction.
Infinite Loop – Allows the carousel to continuously cycle through all slides.
Show Navigation Arrows – Displays previous and next navigation arrows on the carousel.
Show Pagination – Displays pagination indicators below the carousel so users can see their position within the slide sequence.