Carousel Settings Panel

• Carousel Settings Panel
• Layout Tab
• Effects Tab

Carousel Settings Panel

The Carousel Settings panel is accessed by going to the Module Editor, then the Top Bar, then clicking the Settings button to open the Settings Sidebar, and finally clicking Carousel Settings.

In the Carousel Settings panel you can configure the layout, scrolling behavior, visual style, and transition effects of a carousel module. The panel is split into two tabs:

• Layout ¹
• Effects ²

Note that for the Carousel Settings panel to be visible, the module type must first be set to Carousel via Top Bar -> Settings button -> Module Configuration panel -> Basic tab.

Layout Tab

In the Layout tab configure the scroll direction, slide sizing and justification, snap alignment, layer visibility, and the number of slides visible at one time.

Direction (Tab Switch)

Sets the axis along which the carousel slides are arranged and scroll.

Options:

• _Horizontal: Slides are arranged in a row and scroll left and right.
• _Vertical: Slides are arranged in a column and scroll up and down.

Infinity Scroll (Toggle)

Automatically adjusts the combined width or height of slides to exceed the visible area, enabling seamless infinite looping as the carousel scrolls.

Options:

• _On: Infinite scrolling is enabled.
• _Off: The carousel stops at the first and last slide.

Justify (Toggle)

Adjusts the width of individual slides based on the module’s height and aspect ratio to create a justified layout where all slides fill the visible area proportionally.

Options:

• _On: Slides are resized to fill the module width based on aspect ratio.
• _Off: Slides retain their set dimensions.

Respect Module Width (Toggle)

Controls whether the justified slide layout is constrained to the module’s defined width.

Options:

• _On: The justified layout respects the module’s set width.
• _Off: The justified layout may extend beyond the module’s set width.

Stretch Slides (Toggle)

Expands each slide to fill the full width of the module, showing only one slide at a time in the visible area.

Options:

• _On: Each slide is stretched to fill the module width.
• _Off: Slides display at their set dimensions.

Snap to Selected Alignment (Toggle)

Controls whether the carousel snaps the focused slide into the position set in the Align setting after each scroll action.

Options:

• _On: After scrolling, the focused slide snaps to the selected alignment position.
• _Off: Slides come to rest at whatever position they naturally stop.

Align (Dropdown)

Sets the position within the module that the focused slide snaps to when Snap to Selected Alignment is enabled.

Options:

• _Left: The focused slide aligns to the left edge of the module.
• _Center: The focused slide aligns to the center of the module.
• _Right: The focused slide aligns to the right edge of the module.

Layer Visibility (Dropdown)

Controls which slides display their layer content.

Options:

• _{Only if Slide in Focus}: Layers are only visible on the currently focused slide.
• _{Always on all Slide}: Layers are visible on all slides simultaneously.
• _{Set by Layer Visibility}: Each layer’s visibility is determined by its own individual layer visibility settings.

Max Visible Items (Dropdown)

Sets the maximum number of slides visible in the carousel at one time.

Options:

• ₁: Only one slide is visible at a time.
• ₃: Up to three slides are visible at a time.
• ₅: Up to five slides are visible at a time.
• ₇: Up to seven slides are visible at a time.
• ₉: Up to nine slides are visible at a time.

Style Section

In the Style section configure slide spacing, corner rounding, shadow, and the visibility of adjacent slides.

Siblings Visibility (Number, pixels)

In a vertical carousel, sets how much of the adjacent slides above and below the focused slide is visible.

Options:

• _0px: Minimum. Adjacent slides are not visible beyond the focused slide.
• _400px: Maximum. A large portion of adjacent slides is visible on either side of the focused slide.

Border Radius (Number, range)

Rounds the corners of each slide.

Options:

• ₀: Minimum. Slides have square corners.
• ₁₀₀: Maximum. Slides have fully rounded corners.

Slide Gaps (Number, pixels)

Sets the spacing between slides in the carousel.

Options:

• _-300px: Minimum. Slides overlap significantly.
• _300px: Maximum. Slides are separated by a large gap.

Space Above (Number, pixels)

Adds padding above the carousel track within the module.

Options:

• _0px: Minimum. No space above the carousel.
• _400px: Maximum. A large amount of space is added above the carousel.

Space Below (Number, pixels)

Adds padding below the carousel track within the module.

Options:

• _0px: Minimum. No space below the carousel.
• _400px: Maximum. A large amount of space is added below the carousel.

Slides Shadow (Toggle)

Applies a CSS box shadow to each slide.

Options:

• _On: A shadow is applied to slides using the values set below.
• _Off: No shadow is applied to slides.

X (Number, pixels)

Sets the horizontal offset of the shadow. Positive values move the shadow to the right, negative values move it to the left.

Options:

• _-50px: Minimum. The shadow is offset 50px to the left.
• _50px: Maximum. The shadow is offset 50px to the right.

Y (Number, pixels)

Sets the vertical offset of the shadow. Positive values move the shadow downward, negative values move it upward.

Options:

• _-50px: Minimum. The shadow is offset 50px upward.
• _50px: Maximum. The shadow is offset 50px downward.

Blur (Number, pixels)

Sets the blur radius of the shadow. Higher values produce a softer, more diffuse shadow.

Options:

• _0px: Minimum. The shadow has a hard, sharp edge with no blur.
• _100px: Maximum. The shadow is heavily blurred and diffuse.

Spread (Number, pixels)

Sets the spread radius of the shadow. Positive values expand the shadow beyond the slide edges, negative values contract it.

Options:

• _-20px: Minimum. The shadow is contracted 20px inward from the slide edges.
• _40px: Maximum. The shadow expands 40px outward beyond the slide edges.

Shadow Color (Color Swatch)

Sets the color and opacity of the slide shadow.

Effects Tab

In the Effects tab configure slide transition duration and easing, and apply visual effects to non-focused sibling slides including spin, skew, fade, rotation, and scale.

Change Duration (Number)

Sets the duration of the slide transition animation when navigating between carousel slides.

Options:

• ₀: Minimum. Transitions are instantaneous with no animation.
• ₁₀₀₀₀₀: Maximum. Transitions take up to 100 seconds to complete.

Easing (Dropdown)

Sets the easing curve applied to the slide transition animation, controlling how the movement accelerates and decelerates over time.

Options:

• _Back.easeIn
• _Back.easeOut
• _{Back.easeInOut}
• _{Bounce.easeIn}
• _{Bounce.easeOut}
• _{Bounce.easeInOut}
• _Circ.easeIn
• _Circ.easeOut
• _{Circ.easeInOut}
• _Cubic.easeIn
• _{Cubic.easeOut}
• _{Cubic.easeInOut}
• _{Elastic.easeIn}
• _{Elastic.easeOut}
• _{Elastic.easeInOut}
• _Expo.easeIn
• _Expo.easeOut
• _{Expo.easeInOut}
• _Linear
• _{Power0.easeIn}
• _{Power0.easeOut}
• _{Power0.easeInOut}
• _{Power1.easeIn}
• _{Power1.easeOut}
• _{Power1.easeInOut}
• _{Power2.easeIn}
• _{Power2.easeOut}
• _{Power2.easeInOut}
• _{Power3.easeIn}
• _{Power3.easeOut}
• _{Power3.easeInOut}
• _{Power4.easeIn}
• _{Power4.easeOut}
• _{Power4.easeInOut}
• _{QIcons.easeIn}
• _{QIcons.easeOut}
• _{QIcons.easeInOut}
• _Quad.easeIn
• _Quad.easeOut
• _{Quad.easeInOut}
• _Quart.easeIn
• _{Quart.easeOut}
• _{Quart.easeInOut}
• _Quint.easeIn
• _{Quint.easeOut}
• _{Quint.easeInOut}
• _Sine.easeIn
• _Sine.easeOut
• _{Sine.easeInOut}
• _{Strong.easeIn}
• _{Strong.easeOut}
• _{Strong.easeInOut}

Overshoot Effect (Toggle)

Adds a slight overshoot to the slide transition, causing the slide to briefly pass its target position before snapping back, giving motion a springy feel.

Options:

• _On: Slide transitions overshoot their target position before settling.
• _Off: Slide transitions stop cleanly at their target position.

Use Advanced Transitions (Toggle)

Enables the use more complex per-layer transition effects during slide changes.

Options:

• _On: Advanced per-layer transition animations are used during slide changes.
• _Off: Standard slide transition animation is used.

Sibling Effects Section

In the Sibling Effects section apply spin, skew, fade, rotation, and scale effects to non-focused slides to create depth and visual separation within the carousel.

Spin (Dropdown)

Applies a spinning rotation effect to non-focused sibling slides.

Options:

• _Off: No spin effect is applied to sibling slides.
• _2D: Sibling slides rotate on a flat 2D plane.
• _3D: Sibling slides rotate with a 3D perspective effect.

Angle (Number, degrees)

Sets the degree of rotation applied to sibling slides by the spin effect.

Options:

• ₀: Minimum. No rotation is applied.
• ₃₆₀: Maximum. Sibling slides are rotated up to a full revolution.

Skew X (Number, degrees)

Applies a horizontal skew transformation to non-focused sibling slides.

Options:

• _-1000: Minimum. Sibling slides are skewed heavily to the left along the horizontal axis.
• ₁₀₀₀: Maximum. Sibling slides are skewed heavily to the right along the horizontal axis.

Skew Y (Number, degrees)

Applies a vertical skew transformation to non-focused sibling slides.

Options:

• _-1000: Minimum. Sibling slides are skewed heavily upward along the vertical axis.
• ₁₀₀₀: Maximum. Sibling slides are skewed heavily downward along the vertical axis.

Fade Effect (Toggle)

Applies a fade-out effect to non-focused sibling slides, reducing their opacity based on their distance from the focused slide.

Options:

• _On: Non-focused slides are faded out.
• _Off: All slides display at full opacity regardless of focus.

Lowest (Number)

Sets the minimum opacity applied to the most distant non-focused sibling slides, where 0 is fully transparent and 100 is fully opaque.

Options:

• ₀: Minimum. The most distant sibling slides fade to fully transparent.
• ₁₀₀: Maximum. The most distant sibling slides remain at full opacity, effectively disabling the fade effect.

Distance Based (Toggle)

Controls whether the fade intensity varies depending on how far a sibling slide is from the focused slide.

Options:

• _On: Slides further from the focused slide are faded more than those closer to it.
• _Off: All non-focused slides are faded to the same Lowest opacity value regardless of their distance.

Rotation Effects (Toggle)

Applies a rotation effect to non-focused sibling slides.

Options:

• _On: Non-focused slides are rotated.
• _Off: No rotation is applied to sibling slides.

Highest (Number, degrees)

Sets the maximum rotation angle applied to the most distant non-focused sibling slides.

Options:

• _-300: Minimum. The most distant sibling slides are rotated up to 300 degrees in the negative direction.
• ₃₀₀: Maximum. The most distant sibling slides are rotated up to 300 degrees in the positive direction.

Distance Based (Toggle)

Controls whether the rotation intensity varies depending on how far a sibling slide is from the focused slide.

Options:

• _On: The Highest rotation angle is applied to the most distant slides only. Slides closer to the focused slide are rotated progressively less.
• _Off: The Highest rotation angle is applied uniformly to all non-focused slides regardless of their distance.

Scale Effects (Toggle)

Applies a scale reduction effect to non-focused sibling slides, making them appear smaller than the focused slide.

Options:

• _On: Non-focused slides are scaled down.
• _Off: All slides display at the same scale regardless of focus.

Lowest (Number)

Sets the minimum scale applied to the most distant non-focused sibling slides, where 100 represents full size.

When Distance Based is toggled off, this value is applied uniformly to all non-focused slides. When Distance Based is toggled on, this value applies only to the most distant slides, with slides closer to the focused slide scaled progressively larger.

Options:

• ₀: Minimum. Removes the scale effect; sibling slides are not scaled down.
• ₃₀₀: Maximum. The most distant sibling slides are scaled to 3× their normal size.

Distance Based (Toggle)

Controls whether the scale reduction varies depending on how far a sibling slide is from the focused slide.

Options:

• _On: The Lowest scale value is applied to the most distant slides only. Slides closer to the focused slide are scaled progressively larger, up toward full size.
• _Off: The Lowest scale value is applied uniformly to all non-focused slides regardless of their distance.

Use Scale Offset (Toggle)

Applies an additional positional offset to sibling slides to compensate for the change in their visual size caused by the scale effect, keeping their spacing visually consistent.

Options:

• _On: Sibling slide positions are adjusted to account for their scaled-down size.
• _Off: Sibling slide positions are not adjusted; scaling may cause visual spacing irregularities.