Skip to content
Bricks Academy
Get Bricks

Carousel

The Carousel element displays images or posts in a swipeable carousel with customizable navigation and effects, using the Swiper library.

Settings

Section titled “Settings”

  • Type (select) - Content type. Options: media, posts. Default: media.

  • Images (image-gallery) - Select images for the carousel. Only shown for media type.

  • Query (query) - Configure which posts to display. Only shown for posts type.

Settings

Section titled “Settings”

  • Adaptive height (checkbox) - Adjust height to content.

  • Height (number with units) - Fixed carousel height. Default: 300px. Not available when adaptive height is enabled.

  • Spacing (number) - Spacing between slides in pixels. Default: 0.

  • Initial slide (number) - Starting slide index. Default: 0.

  • Items to show (number) - Number of slides visible at once. Default: 2. Supports breakpoints.

  • Items to scroll (number) - Number of slides to advance per swipe. Default: 1. Supports breakpoints.

  • Effect (select) - Transition effect. Options: slide, fade, cube, coverflow, flip. Default: slide.

  • Align items (align-items) - Vertical alignment of slides. Only shown when adaptive height is enabled.

  • Loop (checkbox) - Enable infinite loop. Default: true.

  • Center mode (checkbox) - Center the active slide.

  • Disable lazy load (checkbox) - Load all images immediately.

  • Autoplay (checkbox) - Enable automatic sliding.

  • Pause on hover (checkbox) - Pause autoplay on hover.

  • Stop on last slide (checkbox) - Stop autoplay on last slide.

  • Autoplay delay in ms (number) - Delay between slides in milliseconds. Default: 3000.

  • Animation speed in ms (number) - Transition speed in milliseconds. Default: 300.

Image

Section titled “Image”

  • Hide image (checkbox) - Hide images in post carousels.

  • Image size (select) - Size of images.

  • Link to lightbox (checkbox) - Open images in lightbox. Only for media type.

  • Image size (select) - Size of images in lightbox.

  • Image click action (select) - Action when clicking images. Options: zoom, zoom-or-close, toggle-controls, next, close. Default: zoom.

  • Animation (select) - Lightbox animation type. Default: zoom.

  • Caption (checkbox) - Show image captions in lightbox.

  • Thumbnail navigation (checkbox) - Show thumbnail navigation in lightbox.

  • Thumbnail size (number with units) - Size of thumbnails. Default: 60px.

  • Padding (dimensions) - Lightbox padding in pixels.

Fields

Section titled “Fields”
  • Fields (repeater) - Configure which post fields to display. Each field has:
    • Dynamic data (text) - Dynamic data tag (e.g., {post_title:link}, {post_excerpt:20}).
    • HTML tag (select) - HTML tag for the field. Options: div, p, h1-h6. Default: div.
    • Width (number with units) - Field width.
    • Margin (spacing) - Field margin.
    • Padding (spacing) - Field padding.
    • Background color (color) - Field background color.
    • Border (border) - Field border styling.
    • Typography (typography) - Field text styling.
    • Overlay (checkbox) - Show field as overlay.

Content

Section titled “Content”

  • Alignment (select) - Content alignment. Options: top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, bottom right.

  • Min. height (number with units) - Minimum content height.

  • Margin (spacing) - Content wrapper margin.

  • Padding (spacing) - Content wrapper padding.

  • Background color (color) - Content wrapper background color.

Overlay

Section titled “Overlay”

  • Show on hover (checkbox) - Show overlay only on hover.

  • Fade in animation (select) - Overlay animation. Options: fade-in-up, fade-in-right, fade-in-down, fade-in-left, zoom-in, zoom-out.

  • Alignment (select) - Overlay alignment. Options: top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, bottom right.

  • Margin (spacing) - Overlay margin.

  • Padding (spacing) - Overlay padding.

  • Background color (color) - Overlay background color.

  • Inner background color (color) - Inner overlay background color.

Arrows

Section titled “Arrows”

  • Show arrows (checkbox) - Display navigation arrows. Default: true.

  • Height (number with units) - Arrow button height. Default: 50px.

  • Width (number with units) - Arrow button width. Default: 50px.

  • Background (color) - Arrow button background color.

  • Border (border) - Arrow button border styling.

  • Typography (typography) - Arrow button text styling.

Prev arrow

Section titled “Prev arrow”

  • Prev arrow (icon) - Previous arrow icon. Default: ion-ios-arrow-back.

  • Top (number with units) - Previous arrow top position. Default: 50%.

  • Right (number with units) - Previous arrow right position.

  • Bottom (number with units) - Previous arrow bottom position.

  • Left (number with units) - Previous arrow left position. Default: 50px.

Next arrow

Section titled “Next arrow”

  • Next arrow (icon) - Next arrow icon. Default: ion-ios-arrow-forward.

  • Top (number with units) - Next arrow top position.

  • Right (number with units) - Next arrow right position.

  • Bottom (number with units) - Next arrow bottom position.

  • Left (number with units) - Next arrow left position.

Dots

Section titled “Dots”

  • Show dots (checkbox) - Display pagination dots.

  • Dynamic dots (checkbox) - Enable dynamic bullet pagination.

  • Vertical (checkbox) - Display dots vertically.

  • Height (number with units) - Dot height.

  • Width (number with units) - Dot width.

  • Top (number with units) - Dots container top position.

  • Right (number with units) - Dots container right position.

  • Bottom (number with units) - Dots container bottom position.

  • Left (number with units) - Dots container left position.

  • Border (border) - Dot border styling.

  • Color (color) - Inactive dot color.

  • Active color (color) - Active dot color.

  • Margin (spacing) - Margin around individual dots. Default: 0px top, 5px right, 0px bottom, 0px left.