Image Carousel

The Image Carousel block allows multiple images to be added to a single block allowing the users to swipe or click through backwards and forwards for viewing them within the SAM.

It is recommended for best look and performance that all images used in a carousel are of the same aspect ratio with 16:9 being the ideal ratio within the block.

  1. ADD IMAGES: Select images from the Asset library or use enteral URLs. - If selected from the Asset Library, multiple assets can be selected at the same time. If added one at a time, the order of the images is maintained by the order they were added. - (X) deleted the image from the carousel - Fold down menu opens up additional functionality:
    • Image URL: link to image used
    • Description: text that is overlayed on the image as a short description.
  2. Sort: If images were added as described in 1.1, but need to be in alphanumerical order based on a naming convention, clicking Sort will perform that function. Hyperlink: Similar to the functionality available in the Image Block, the hyperlink entered here will be for all images in the carousel.
  3. Interaction: Provides control over the carousel behavior and UI element options: Autoplay: Allows for images to automatically move to the next image in a loop. Navigation: adds breadcrumbs (a circle/dot reference) at the bottom of the image indicating the number of images and allowing the user to tap forward or backward. Arrows: When active, additional user navigation is presented as < and > brackets on either side of the image.

Size: Allows sizing of the carousel images within the block itself using pixel size, percentage, or Auto. Auto is the default.

  1. Text and Alignment: As with the Image Block, text can be added above or below the Carousel. Text entered here will always be part of the SAM regardless of the image displayed in the Carousel.

  2. BACKGROUND COLOR: Allows color to be defined behind the image carousel and text portions of the block. This can be used in lieu of, or in addition to sam background settings which allows color and opacity of the sam’s background.
    To return to the transparent default setting, highlight and delete the value in the field.