Creating a Rotating Banner

This tutorial shows how to add a slideshow to your page that rotates through a set of images stored in an image library. Images can link to another page if desired.​


Creating the Picture Library

Select “Add an app” from the gear menu for your site.

App? Huh?
With SharePoint 2013 Microsoft renamed lists and libraries and similar functionality to "Apps". They were trying to make these components a little easier to understand for the end user, so they're using familliar words and concepts. Adding an app to your smartphone adds functionality to it, adding a list, library or web part to sharepoint extends the functionality. That's the rationale anyway. I think it actually makes the concept more confusing rather than less, apparently Microsoft agrees, in future versions "SharePoint Apps" will be renamed to "SharePoint Add-ins".
More options button

Click on the “Picture Library” icon. You may name the library whatever you like.

Once the library is created you are kicked back to the "Site Contents" screen. Click on your newly created library, it will be easy to find since it will have a green "new"  graphic next to it.

In the library click on “Library Settings” in the ribbon menu on the "Library" tab.

Picture Library Settings button

On the settings page, select “RSS settings” under the Communications column.

RSS settings link

Look for an area labeled “Document Options.” Set the option for “Link RSS items directly to their files?” to Yes.

document options

In the area labeled “Item Limit,” type 9999 into the “Maximum days to include:” input box. (We don’t want the pictures disappearing from the RSS anytime soon.)

Max days box


OPTIONAL – Adding custom hyperlinks

  1. Return to the default page for the Picture Library.
  2. Create a new column by clicking on “Create Column” in the ribbon menu for the Library tab.
    create new column button in a picture library
  3. Name this column “Hyperlink” and its type should be “Single line of text.”
    column settings
  4. Under Additional Column Settings, set the “Require that this column contains information:” field to Yes.
    required field
  5. Return to your RSS Settings page. In the Columns section, uncheck all the boxes EXCEPT your newly created Hyperlink column.
    column check box


From here, you can upload your pictures as normal into the newly created library.

Adding the Rotating Ba​nner to a Page

Once your page is opened up in Edit Mode, select the Webpart Zone that you would like to add the Javascript to. I usually put it in the bottom-most web part zone so it's out of the way.

Under the category “JS Libraries,” select “Rotating Banner Javascript.”
rotating banner web part

Cick on the edit source button in the ribbon menu under "Format Text". If the Format Text tab is not available click inside the editable area of the web part where you could type.  Then the Format text tab will appear.
edit html control

An editing window containing the html for that web part will pop open.


If you want the slideshow to display right here where you've put the rotating banner web part we'll need to add one line of code. At the top, before the <script type="text/javascript"> line add this: <div id="siteBanner"></div>

The id of the div and the value in targetDiv need to match. The value in targetDiv is telling the code where on the page to put the slideshow.

The id doesn't need to be "siteBanner" it can be anything. You can target any div on the page if you know its ID, but since we're just putting it right here we're adding a new div right here to put the slideshow into.


To find the value needed for feedURL, return to your picture library. Then, under the Library tab, click “RSS Feed.”
view RSS button

Copy the URL past "" but before "&Source=". You want the relative path URL plus the list GUID. You should end up with something like: “/web/_layouts/15/listfeed.aspx?List=%7BDEBF3615%2D08B6%2D4B7D%2D8D22%2D80706A13F631%7D”

Return to your page with the random banner Javascript, and use this for your feedURL value.

OPTIONAL – Adding custom hyperlinks

Change the hasLink value to “true.”
hasLink code

You can use this script inside an Embedded Content list, if you would like it to affect every page. Ensure that whatever the targetDiv is, it also exists on every page.​​​​​​​​​​​​​​​​​​​