Home
Tool Panel

Carousel Widget

The Carousel Widget displays a rotating set of images with optional click-through links. Visitors can navigate between slides manually or let them auto-rotate. Use this widget to showcase multiple images or promotions in a single space.

Common Tasks

Adding the Widget to a Page

  1. Navigate to the page in the Contensive page editor.
  2. Click the widget tool to open the widget panel.
  3. Find the Carousel Widget in the Design Blocks category.
  4. Drag the widget onto the page at the desired location.

Editing Widget Content

  1. Click the edit icon on the Carousel Widget.
  2. Set the Time Between Scrolls to control how many seconds each slide is displayed before auto-advancing (default: 3).

Each slide is a separate Carousel Image child record.

  • Add a new slide: In the advanced editor, navigate to the Carousel Images child records and add a new record. Upload an Image and optionally set an Image Href (link URL) and Image Alt text.
  • Edit a slide: Open the Carousel Image record and modify the image, link, or alt text.
  • Reorder slides: Change the Sort Order value on each Carousel Image record.
  • Remove a slide: Delete or deactivate the Carousel Image record.

Configuring Image Sizing

  1. Open the advanced editor and go to the Image Size tab.
  2. Set the Image Aspect Ratio to control how images are cropped.
  3. Set the Image Width to control the maximum width in pixels (default: 1000).

Styling the Widget

  • Open the advanced editor to access the Styles tab.
  • Set padding (top, right, bottom, left) to control spacing around the carousel.
  • Choose a Theme Style to apply a predefined look.
  • Set a Background Image on the Background tab.
  • Enable As Full Bleed for edge-to-edge rendering.
  • Set a specific Height if needed.

Removing the Widget

  • Click the edit icon on the widget and open the advanced editor.
  • Set the Active field to "No" on the Control Info tab to hide it, or delete the record to remove it permanently.

Edit Dialog Fields

Field Description
Active Enable or disable this carousel
Time Between Scrolls Seconds between automatic slide transitions (default: 3)
Sort Order Controls the display order when multiple widgets are on the page

Advanced Edit Fields

Field Tab Description
Name Control Info Internal name for this widget
Image Aspect Ratio Image Size Select the aspect ratio for carousel images
Image Width Image Size Width of carousel images in pixels (default: 1000)
Pad Top Styles Add top padding to the widget
Pad Right Styles Add right padding to the widget
Pad Bottom Styles Add bottom padding to the widget
Pad Left Styles Add left padding to the widget
As Full Bleed Styles Include margins for content
Height Styles Set a specific height with units
Theme Style Styles Select a layout wrapper class from Design Block Themes
Button Style Styles CSS class for buttons (default: "btn btn-primary")
Background Image Background Set a background image for the widget

Each slide is a separate Carousel Image record with these fields:

Field Description
Image The image displayed for this slide
Image Href Optional link URL when the image is clicked
Image Alt Alt text for the image
Image Alt Size List Alternative image sizes for responsive display