Gallery Settings

In the gallery component, you can define how your images are displayed and animated.

Below you’ll find explanations for each available setting:

Initial Slide

Specifies which image the gallery starts with.

• Value: Number (e.g., 0 = first image, 1 = second image, etc.)
• Tip: Useful if you use the same gallery multiple times but want it to start with different images.

Speed (ms)

Determines the animation speed when switching between slides.

• Value: 300 (milliseconds)
• Meaning: The smaller the value, the faster the transition.
• Recommendation: 300–600 ms ensures a smooth yet dynamic transition.

Effect

Defines the transition effect used between slides.

• Options:
• • slide – classic horizontal transition
  • cube, coverflow, flip – 3D effects
• Recommendation: For galleries with many images, slide offers the best performance.

Space Between (px)

Sets the spacing between individual slides.

• Value: 20 px
• Tip: A bit of spacing helps visually separate the images — especially when multiple slides are visible side by side.

Slides Per View

Determines how many images are displayed at the same time.

• Value: 4
• Tip: Ideal for desktop layouts or grid-style galleries.

On smaller screens, this value is automatically adjusted using breakpoints.

Centered Slides

When enabled, the active slide is centered within the view.

• Tip: Perfect for carousels where the focus should be on the center image.

Loop

Enables infinite scrolling of the gallery.

• Meaning: After the last slide, the gallery automatically loops back to the first one.
• Tip: Recommended for galleries without a clear start or end (e.g., logo or testimonial carousels).

Autoplay

Automatically starts playing the gallery without any user interaction.

• Tip: Combine with Autoplay Delay to define how long each image stays visible before moving to the next.

Autoplay Delay (ms)

Controls how long each slide remains visible before the next one appears.

• Value: 5000 ms (= 5 seconds)
• Tip: Works only if Autoplay is enabled.

Ideal for hero sections or header slideshows.

Breakpoints

Allows you to define responsive behavior — different settings depending on the screen width.

Example:

For screens 520 px and wider:

• Slides Per View: 1
• Space Between: 0

Meaning:

On smaller screens (e.g., smartphones), only one image per slide is shown — with no spacing between them.

Updated on: 07/11/2025