Information Computing and Technology Services

Image Carousel Responsive Element

Element Information

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

Tutorial

  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 eithre 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

Images

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.

Images

Contact Us

ITCS Admin - 252.328.9000
IT Help Desk - 252.328.9866
IT Help Desk - 800.340.7081
Classroom Tech - 252.328.9830
ITCS Leadership - 252.328.9000

Need Help?