Skip to main content

Carousel Blocks

Carousel blocks add the controls for a carousel: arrows, dots, and a progress bar. In Mind, a Layout block set to Carousel (or with Carousel on mobile turned on) has no arrow or dot settings of its own. Instead, you add one or more carousel blocks to the same section, and they connect to that section's carousel automatically. Because each control is a separate block, you can place it anywhere in the section: arrows next to the heading, dots under the slides, or a progress bar along the bottom. Mind includes 3 carousel blocks.

note

A carousel block controls the carousel of the section it sits in. Use one Layout carousel per section so the controls always drive the slides you expect.

block-carousel-navigation.webp

The Carousel navigation block adds previous and next arrow buttons.

Settings:

  • Hide on mobile: Hide the arrows on small screens, where visitors swipe instead.
  • Position: Outside (the arrows sit where you place the block) or Inside (the arrows overlay the carousel).
  • Inside alignment: Left, Right, or Space between, shown when the position is Inside, with Buttons outside container to push the arrows past the carousel edges.
  • Navigation alignments: Left, Center, Right, Space between, or Space around, shown when the position is Outside.
  • Icon: A built-in arrow or chevron icon or your own image (with an Image (darkmode) version), icon size, color, and opacity, plus the Width and Height of each button.
  • Hover: Hover type (none, left to right, right to left, bottom to top, or top to bottom) and Hover parent.
  • Appearance: Color scheme, background (color, gradient, or image with overlay), corner radius, border, and a Shadow with X and Y offset, blur, color, and opacity.
  • Animation: Global preset, custom effect and duration, or none.
  • Padding: Device-specific top, bottom, left, and right padding.

block-carousel-pagination.webp

The Carousel pagination block adds a row of dots, one per slide, that shows the current position and lets visitors jump to a slide.

Settings:

  • Show on: All devices, desktop only, or mobile only.
  • Pagination style: Default, Square dots, Ring dots, or Custom.
  • Position: Outside or Inside the carousel.
  • Button direction: Horizontal or Vertical, with Alignments for a horizontal row.
  • Button style: Circle or Square.
  • Pagination color: Button color and Button active color, plus a Pagination background for the Custom style.
  • Pagination button size and Pagination button active size: Width and height of the normal and active dots (1-40 px), shown for the Custom style.
  • Pagination button border: Inside or Outside ring, shown for the Ring dots style.
  • Padding: Device-specific top, bottom, left, and right padding.

block-carousel-progress.webp

The Carousel progress block adds a thin bar that fills as the visitor moves through the slides.

Settings:

  • Disabled navigation on mobile: Hide the progress bar on small screens.
  • Progress track color: Color of the empty track.
  • Progress fill color: Color of the filled part.
  • Stroke: Thickness of the bar, from 1 to 10 px.
  • Corner radius: Rounding of the bar ends.
  • Animation: Global preset, custom effect and duration, or none.
tip

Combine controls for a richer slider: put a Carousel navigation block (position Outside, alignment Right) in the same Group as your heading, and a Carousel progress block below the Layout, so visitors see both where they are and how to move on.