Tool Panel

Image Slider Widget

Image Slider Widget

The Image Slider Widget displays images in a sliding carousel format. It supports multiple images per slide and automatically rotates through them. Use this widget to present multiple images in a compact, interactive display such as partner logos or product images.

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 Image Slider 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 Image Slider Widget.
  2. Enter a title in the Headline field to display above the slider.
  3. Set the Images Per Slide to control how many images are visible at once (default: 4).
  4. Set the Slider Pause to control seconds between transitions (default: 3).
  5. Set the Image Aspect Ratio to control how images are cropped.

Managing Slider Images

  1. Open the advanced editor and go to the Images tab.
  2. Upload images using the Image 1 through Image 15 fields (up to 15 images).
  3. For each image, optionally set an Image Link Override to make the image clickable.
  4. To remove an image, clear the image field.
  5. Images display in numerical order (Image 1 first).

Configuring Auto-Scroll Timing

  1. Click the edit icon on the widget.
  2. Adjust the Slider Pause value to change the seconds between automatic transitions.

Styling the Widget

  • Open the advanced editor to access the Styles tab.
  • Set padding (top, right, bottom, left) to control spacing around the slider.
  • 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
Headline Title displayed above the slider
Active Enable or disable this widget
Slider Pause Seconds between automatic slide transitions (default: 3)
Images Per Slide Number of images visible at one time (default: 4)
Image Aspect Ratio Select the aspect ratio for slider images (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 1 through Image 15 Images Upload up to 15 images for the slider
Image Link Override (per image) Images Optional link URL for each image
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