What is it?

Stream Gallery creates a stunning, seamless scrolling gallery on your page, perfect for showcasing images in a dynamic, eye-catching way. This gallery is highly customizable, allowing you to set speeds, overlay colors, and other features to match your site's style.

How to set it up?

To implement the Stream Gallery, simply add the data-background-carousel attribute to the desired container and set up additional options for customizing the gallery’s appearance and behavior.

'data-background-carousel'. Activates the Stream Gallery effect on the specified container.

'data-carousel-speed' (Optional). Controls the animation speed of the gallery scroll. Type: Number (e.g., 30 for a medium speed). Default: 30.

'data-carousel-overlay-color' (Optional). Sets the overlay color over the carousel images. Type: Color (hex, rgba, or named color). Default: rgba(0, 0, 0, 0.5).

'data-carousel-overlay-opacity' (Optional). Adjusts the opacity of the overlay. Type: Decimal (e.g., 0.5 for 50% opacity). Default: 0.5.

'data-carousel-image-gap' (Optional). Defines the spacing between images in the carousel. Type: Number (in pixels, e.g., 20). Default: 20.

'data-carousel-track-height' (Optional). Sets the height of each image track (lane) in the gallery. Type: Number (in pixels, e.g., 180). Default: 180.

'data-carousel-mobile-track-height' (Optional). Defines the track height on mobile for better responsiveness. Type: Number (in pixels). If omitted, defaults to the value of data-carousel-track-height

'data-carousel-image-width-ratio' (Optional). Adjusts the aspect ratio of the images in the carousel. Type: Decimal (e.g., 1.5 for a landscape view). Default: 1.5.

'data-carousel-top-images'. Provides a list of image URLs to display in the top lane. Type: JSON array (e.g., ["image1.jpg", "image2.jpg"]).

'data-carousel-bottom-image'. Specifies image URLs for the bottom lane.

Tips