Slick Slideshow
The Slick Slideshow Plugin creates an element that displays a rotating carousel slideshow of static or dynamic images with a slide or fade in/out effect.
Define whether the slideshow should display images uploaded in the Bubble Editor or uploaded by users and saved in the application database. Choose from 'Upload each image' and 'Use a dynamic list'.
Click the Upload another image button to upload each image individually.
Enter the type of thing that contains the images to display in the slideshow.
Define the list of things that will contain the images. It can either be the result of a search or content of a field that is a list of images.
This option defines how to handle dynamic images if their size does not exactly fit the slideshow dimensions. The two options are:
- Stretch: The image will be resized to cover the entire slideshow area.
- Rescale: The element will add horizontal and/or vertical margins so that the image stays within the boundaries of the slideshow but is not distorted.
This data type field contains the image. It should be of type image. For example, if the type of list is 'Apartment,' the field will likely be 'Illustration.'
If a list has similar items only in different colors, the displayed list will not change to prevent interfering with the user's interactions with the element. Check this box to override this behavior and redraw the entire list when it changes.
Select the animation type. Choose from Slide and Fade.
Enter the length of the animation in milliseconds.
Check this box to start the animation automatically on page load.
Enter the number of milliseconds between each transition.
Select this option to pause autoplay on hover.
When checked, the element displays dots under the images that the user can click to switch between images.
Select the color of the navigation dots.
When checked, the slideshow element will show two buttons on the right and left to go from one image to another.
Select the color of the arrow buttons.
You can use the Slideshow element to display a dynamic list of images. These could be a product photo gallery on a product details page on a marketplace, or a selection of photos uploaded by the current user on their profile page.
In our example, we want to display all of the images associated with our "Example" data type. Our images are various dimensions, so we are going to choose "Rescale" to prevent our photos from being too distorted.
In runmode, each screen will automatically adjust to match the image's dimensions.
Last modified 2yr ago