How do I add a sliding images banner to my SharePoint site?
SharePoint doesn’t include any web or app parts to achieve animated sliders, but with a few simple scripts and jQuery plugins, you can set one up on your homepage without a lot of effort. In my case, we needed a banner to slide announcements on a homepage, so this article is based on that.
Before we get started with setting up web parts and scripts, you’ll need to prepare a Custom List within the site on which you want to display the announcements. Go to your site contents, create a custom list, then enter the list settings to create some columns. The columns I used are shown below, and they are all required columns of type single line of text (plain text).
|List name: SlidingAnnouncements|
|Title||Default column which should be automatically generated when you create the custom list|
|Text||This will be the description or body text to overlay on the banner|
|Picture||This will be the URL of the image you want to display as the announcement background|
|URL||This will be the URL of the page to which clicking the announcement will direct you|
Add some sample entries in the list that you can use to test once we have everything in action.
With the list set up and populated, go over to the page where you want to display the slider and add a Script Editor web part. This will be the container for your announcements slider, so you may want to set the height and width based on your preference, by clicking the arrow on the top right of the web part, selecting Edit Web Part, and making the adjustments in the Appearance section of the web part edit box.
The rest of the magic takes place within the script added to the web part. While in web part edit mode, click the Edit Snippet link on the web part. This will pop up a dialog where you can paste in a snippet of code. The box is pretty small, so I would advise you use an external text editor to draft your code and paste it into SharePoint when it’s done. Below, we’ll go through the steps of building the script.
First, add a jQuery reference (this is an example based on the Google CDN, feel free to download a copy of the jQuery library to your site or use other alternative jQuery references).
The final reference we are going to use is the Unslider jQuery plugin, which is a lightweight free plugin that enables an animated slider on your page. Again, you will want to download this and add a local reference. More info on Unslider.
With the references in order, you need to add the styles. You can create a CSS file and reference it from your code snippet, or you can add the below <style> section into the snippet itself. In my example I have named the style class for the announcement banner “announcementBanner”.
The code discussed below will go inside the document ready function.
The first thing is to construct a CAML query which we’ll use to pull the announcements from the list.
Essentially it is querying all the list items, ordered in descending order of the Created field (this is a default field in all custom lists which marks the date and time the item was added), so that the more recent announcements are displayed first.
Along with the CAML query, you also need to specify which fields you want to view, as a variable named camlViewFields.
This is essentially specifying that three fields are required: Text, Picture, and URL. These are the columns we created in the custom list.
With the query and view fields ready, SP Services will be used to query the SharePoint web service. The operation to use in this case is “GetListItems”.
The above function queries SharePoint, enumerates the returned list of entries as per the CAML query and view fields, and then appends information to an unordered list named announcementSlider. You can customize the styling for these divs to suit how you want your banner to look.
To finish it off, we need to make sure that announcementSlider list actually exists. Add this at the very end of the snippet, outside of the <script> block.
And that’s it! With your snippet ready and added to the script editor web part, simply save the page and watch your announcements slide across, and also feel free to interact using the dots.