SharePoint Training Manual – Carousel Last Modified: 02/06/2019 Carousel Creating a Carousel of Images to Display 1. Click on the Gear Button drop-down menu located at the top right-hand side of the page. 2. Select Site contents from the drop-down menu. 3. On the site contents page, click on add an app button. 4. The Apps you can add list appears. To create the Carousel list, click on the Gallery icon. 5. A dialog box will display. Enter the name that will identify this list and click OK. Keep in mind that the Name could be helpful if it identifies what is stored in this list. Note: To add a Carousel to a page, create the list in Site Contents using the App entitled Gallery.
Transcript
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
Carousel
Creating a Carousel of Images to Display
1. Click on the Gear Button drop-down menu located at the top right-hand side of the page.
2. Select Site contents from the drop-down menu.
3. On the site contents page, click on add an app button.
4. The Apps you can add list appears. To create the Carousel list, click on the Gallery icon.
5. A dialog box will display. Enter the name that will identify this list and click OK. Keep in mind that the Name could be helpful if it identifies what is stored in this list.
Note: To add a Carousel to a page, create the list in Site Contents using
the App entitled Gallery.
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
6. You will be redirected back to the Site Contents page with the new Gallery icon that displays
new! below the title.
Notes:
If the image requires a link, an additional step is needed to add the link field that will appear on
the image. To add this field, follow the instructions for A and continue with B to add the images.
If this field is not needed, begin with the instructions for B.
When naming the Gallery list, it is helpful to use the acronym CAR at the beginning of the name
to identify the type of widget that will be used (e.g., ACC for Accordion, CAR for Carousel, etc.)
and then add a name that identifies the type of information. This makes it easier to locate the list
when configuring and connecting it to the widget.
A. Instructions to add the images in the Carousel List:
In Site Contents, click on the new Carousel list.
The Carousel Settings page will reappear. Click on the new document link to upload the
items for this list.
Browse to find the first image and click OK.
Enter specifics for the image and click Save.
Repeat this process to create all Carousel list items needed.
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
➢ Note: Be sure to always add Alternative Text (alt tag) to describe an image on a website.
For images in the Carousel widget, the Description field is designated for the alternative
text. This allows the image to be accessible as well as found by some search engines (e.g.,
Google). Screen readers are used by those who are blind or visually impaired and will read
this text to describe the image.
Refer to the following table for instructions on image properties:
Title of Field Description
Name*
This field is used for image name only.
For this field, dashes must be used in place of spaces.
An error message will appear when using special characters in a
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
filename.
Title
This field will appear on the front of each image within the Carousel.
Enter a related Title for the image.
➢ Note: This field will be included in search criteria. It will allow the
image to be found and possibly included in search results.
Link
This field has two lines. Place a website address in the designated
field.
Using this field allows the image to link to a specific address.
➢ Note: Always type https:// before www.
Place the description of the website address in the designated field.
Description
This field will appear on the front of each image within the Carousel.
Use this field to describe the image and as alternative text.
Alternative Text: Word or phrase explaining to website viewers the
contents of an image. All images are required to have an alternative
text.
Date Picture Taken This field allows a date and time to be entered, if needed.
*Required field(s)
Add the Carousel List to a Page
1. Navigate to the page on which the Carousel list will be placed.
2. Edit the page by clicking Edit in the ribbon bar. Once the page is in edit mode, locate one web
part zone where the Carousel list will be located. Within the zone, click Add a Web Part. A web
part section will display at the top of the page.
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
3. Click on the following and then click Add in the lower right-hand corner of this display.
• Categories: Widgets
• Parts: Carousel
➢ Note: If the Add button is not visible, click on the Browse tab in the ribbon at the top left .
The page will be refreshed and the Carousel list will be added to the page.
4. The page will then refresh and the new Carousel list will be visible within the zone.
5. It is now necessary to connect the web part to the Carousel list.
Be sure to be in Edit mode and click on the Edit Widget button in the toolbar of the new
Carousel widget.
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
6. This will open the Configuration properties panel. Click on the Configure Datasource -
SharePoint List - Configure button. The datasource panel will open for the Carousel list.
7. To find the Carousel list and connect it to the widget:
a. Select Web Source: click the carat to expand the site list.
b. Select the site where the Carousel is located and verify the Selected Path is correct.
c. Select Source List: click the dropdown to select the Carousel item.
Click OK on this panel and OK on the Configuration properties panel to Save selections made.
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
8. Save the page to see the Carousel List appear on the page.
If the connection has been completed, the Carousel image(s) will display on the page.
Update the view of the Carousel on a Page
1. Be sure to be in Edit mode and click on the Edit Widget button in the toolbar of the Carousel
widget.
2. This will open the Configuration properties panel. Click on Manage The Look – Carousel
Configure button.
Carousel Options available:
a. Colorize: This option will display the Carousel images filtered with the color selected.
b. Show Label: This option will display the Title and Description over the image (if they
were entered in the Gallery).
c. AutoPlay: This option will permit the images to automatically rotate from one to the
next. Slide the blue button to select the timeframe for each image to display before the
next image is displayed. Options permitted are from 0 through 10 seconds.
Note: When 0 seconds is selected, this feature is disabled and the images will not rotate.
On the website page, the user will need to click the left/right arrows or click on the dots
to change the images (circled in red below).
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
Carousel Style 2 Options available: None
➢ Note: ‘Connections’ is an advanced section that will configure data elements and should only
be touched by the power user that has had advanced instruction.
Click OK on this panel and OK on the Configuration properties panel to Save selections made.
Edit Existing Carousel List
1. Navigate to the page on which the Carousel list appears.
Click on the Gear Button drop-down menu located at the top right-hand side of the page.
2. Select Site contents from the drop-down menu.
3. Click on the Carousel list item.
4. Click on the ellipsis of the existing Carousel image to be updated. Then click the Open Menu
ellipsis on the popup for the image.
SharePoint Training Manual – Carousel
Last Modified: 02/06/2019
5. The following menu appears:
6. When all updates are complete, return to the page that contains the Carousel.
Refresh the browser page to see viewable changes.
DOCUMENT HISTORY
Version # Date Revised By Reason for change
1.0 2017 J. Szymanski Document Creation
1.1 2/2019 J. Szymanski Update: Use Gallery list for Carousel.
