Link to the plugin page: https://zeroqode.com/plugin/logo-carousel-for-bubble-mobile-1750258363519x393983717046605800
Demo to preview the plugin:
Introduction
The Logo Carousel for Bubble Mobile plugin is designed specifically for mobile applications and provides a smooth, customizable carousel component for displaying images and logos. This plugin creates an auto-scrolling carousel that can showcase multiple images with configurable scroll direction, speed, and visual properties. It’s perfect for displaying client logos, partner brands, or any collection of images in an attractive, mobile-optimized carousel format.
The plugin is built with native mobile performance in mind and includes touch interaction capabilities, allowing users to tap on images to trigger custom workflows in your Bubble application.
Prerequisites
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/VykzdCs6
Please note that the testing app is currently available for iOS only.
How to setup
Setting up the Logo Carousel for Bubble Mobile plugin is straightforward:
- Install the plugin from the Bubble plugin marketplace into your application.
- Add the Carousel element to your page by dragging it from the visual elements section in the Bubble editor.
- Configure your data source by setting up a data type that includes:
- URL field for the image source
- ID field for unique identification of each image
- Set the Images source field to your list of data containing the images you want to display.
- Configure the visual properties such as card dimensions, spacing, and animation settings according to your design requirements.
- Test the carousel in preview mode to ensure it displays correctly and responds to touch interactions.
Plugin Element Properties
The plugin contains a Carousel visual element that should be used on a page. This element is specifically designed for mobile platforms and provides a smooth scrolling experience for displaying multiple images.
Carousel
Fields:
Title | Description | Type |
Images App Type | App type that represents the image data structure | Custom Type |
URL | Image URL or file path to be displayed in the carousel | Text/Image/File |
ID | Unique identifier for each image, used in events and states | Text/Image/File |
Images source | A list of image type data sources to populate the carousel | List |
Card Width | Width of each image item in pixels | Number |
Card Height | Height of each image item in pixels | Number |
Card Spacing | Spacing between images in pixels | Number |
Border Radius | Border radius for images in pixels | Number |
Scroll Speed | Scroll speed in pixels per second | Number |
Scroll Direction | Direction of scroll animation: “right” or “left” | Dropdown |
Pause On Press | Whether to pause animation when user touches the carousel | Boolean |
Exposed states
Name | Description | Type |
Selected Image | Currently selected/clicked item from the carousel | Custom Data Type |
Element Events
Name | Description |
Image Selected | Triggered when user taps on an image item in the carousel |
Workflow example
Here’s a basic workflow to get started with the Logo Carousel for Bubble Mobile plugin: