Image Carousel Responsive Element

Element Information

Displays up to 5 images, titles and descriptions. Various styles, urls, and transitions can be set.


  1. Upload your images
  2. Insert the custom element "Image Carousel"
  3. Define the element data fields
    • Display Options
    • Images

Detailed Tutorial

Step 1: Upload your images by selecting New at My CommonSpot bar at the top of the browser.

Upload New Image

Single Image

Configure your target subsite to where you want the image to be stored in CommonSpot. Then click the Choose File button to add the image. Once you have selected your image, type in a good description of the image and give it a category to be stored in. Hit Save and your new image will be stored.

Single Image

Multiple Images

Start by clicking the Add Image button or by dragging and dropping your images into the high-lighted Drop Files Here box. Then click Upload Image(s).

Multiple Images


Now make sure that the image(s) you selected in the previous step are the ones you see in the high-lighted region above. If so, proceed by clicking the Next button.


Upload Status


Next, give each uploaded file a description and select the images you would like to upload by either clicking the link or by individually checking each image's box high-lighted to the right. Once you are satisfied, select Enter Properties.


My Pending Uploaded Images


Finally, give the images a category and click Save to finish the multiple image(s) upload process.


Upload New Images

Step 2: From your template, insert a new element and define this element as "Image Carousel" found under  "1-Responsive Elements".

Paste Copied Element

Step 3: Define the element by click the gear icon where you placed the element in the previous step.
gear icon

Display Options

The Show Previous/Next option will display arrows on both ends of the container to slide from image to image. An unchecked box here will still display small circles on the bottom of the image container to allow users to slide between images. Also, the display duration can be set to manually allow users to control when the images are cycled through. You can set your text location (where your image description will be found) to be at the bottom left or right. Once you are finished with the Display Options, click one of the image tabs to begin configuring your images.

New Custom Element Data


Before selecting an image, be sure to check the "Display This Image" box. Once you have selected an image and given it a title and description, you can give it a Sort Order number. This number sets the order in which your image will appear (if you did not select random images in the Display Options tab). All image's Sort Order numbers are defaulted to their image tab number.