Premium element

ShowCase

Stream Gallery

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.

Preview

Quick Setup

data-background-carousel=true

Required

Activates the Stream Gallery effect on the specified container.

data-carousel-top-images

Required

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

Required

Provides a list of image URLs to display in the bottom lane. Type: JSON array (e.g., ["image1.jpg", "image2.jpg"]).

Advanced configuration

data-carousel-speed

Optional

Controls the animation speed of the gallery scroll.

Default: 30

data-carousel-overlay-color

Optional

Sets the overlay color over the carousel images.

Default: rgba(0, 0, 0, 0.5).

data-carousel-overlay-opacity

Optional

Adjusts the opacity of the overlay.

Default: 0.5

data-carousel-image-gap

Optional

Defines the spacing between images in the carousel.

Default: 20

data-carousel-track-height

Optional

Sets the height of each image track (lane) in the gallery.

Default: 180

data-carousel-mobile-track-height

Optional

Defines the track height on mobile for better responsiveness.

Default: 180

data-carousel-image-width-ratio

Optional

Adjusts the aspect ratio of the images in the carousel.

Default: 1.5

Tips

Responsive: The gallery adapts to mobile devices automatically, with customizable track heights for a consistent experience across all screen sizes.

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours