Adding a Banner with Sliding Images to a SharePoint Page

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.

For further assistance on adding sliding images banners to a SharePoint Site, simply give Dolphin Networks a call today!

Adding a banner with sliding images to a SharePoint page

Custom List

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
Column Name Description
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.


Building JavaScript

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).

<script src=””></script>

Second, add a script reference to SPServices which is a powerful jQuery library that allows the use of SharePoint’s Web Services via JavaScript. You will probably want to download this to your site and add a local reference. More info on SPServices.

<script type=”text/javascript” src=”…/jquery.SPServices-2014.02.js”></script>

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.

<script type=”text/javascript” src=”/sites/thesource/SiteAssets/unslider.min.js”></script>

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”.

<style type=”text/css”> .announcementBanner { position: relative; overflow: auto; }
.announcementBanner li { list-style: none; }
.announcementBanner ul li { float: left; }
.announcementBanner ul {margin-left: -40px;}
.dots {
position: absolute;
left: 400px;
right: 0;
bottom: -5px;
margin-right: 10px;
text-align: right;
.dots li {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 2px;
text-indent: 999em;
border: 1px solid #fff;
border-radius: 3px;
cursor: pointer;
opacity: .5;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
.dots {
background: #fff;
opacity: 1;

Now for the actual JavaScript.

Create a JavaScript code block and a jQuery document ready function in your snippet.

<script type=”text/javascript”>
jQuery(document).ready(function($) {});

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.

Here’s the query, which will be assigned to the JavaScript variable query.

var query = “<Query><OrderBy><FieldRef Name=’Created’ Ascending=’False’/></OrderBy></Query>”

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.

var camlViewFields = “<ViewFields><FieldRef Name=’Text’ /><FieldRef Name=’Picture’ /><FieldRef Name=’URL’ /></ViewFields>”

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”.

operation: “GetListItems”,
async: true,
listName: “SlidingAnnouncements”,
CAMLViewFields: camlViewFields,
CAMLQuery: query,
completefunc: function(xData, Status) {
$(xData.responseXML).SPFilterNode(“z:row”).each(function() {
var headline = $(this).attr(“ows_Title”);
var text = $(this).attr(“ows_Text”);
var picture = $(this).attr(“ows_Picture”)==undefined?””:$(this).attr(“ows_Picture”).split(“,”)[0];
var url = $(this).attr(“ows_URL”);
$(“#announcementSlider”).append(“<li style=\”background-image: url(‘”+picture +”‘); background-repeat: no-repeat; background-position: center; width: 630px; height: 250px;\”>”
+ “<div style=\”float: left; width: 630px; height: 250px;\”>”
+ “<div style=\”float: right; background-color: black; opacity: 0.8; padding: 10px; color: white; width: 210px; height: 250px; margin-right: -8px;\”>”
+ “<span style=\”font-weight: bold; font-size: 11pt\”>” + headline + “</span><br/><br/>”
+ text + “<br/><br/>”
+ “<a href='”+url+”‘ target=’_blank’>Read More</a>”
+ “</div>”
+ “</div>”
+ “</li>”);
var slide = $(‘.announcementBanner’).unslider({
speed: 500,
delay: 5000,
keys: true,
dots: true,
fluid: false

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.

<div class=”announcementBanner”><ul id=’announcementSlider’></ul></div>

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.

Contact Dolphin Networks

Dolphin Networks has many years experience in designing and developing SharePoint and Office 365 applications, security driven document repositories and Intranets for a variety of different industry sectors and projects. We can design and architect a solution to suit your user base and budget, whether that be a cloud hosted solution or on premise.

Our direct approach to project life-cycle development means that you will always be speaking to the person with the right answers and expertise to help you there and then. We will have you up and running with your customised solution in no time and for far less expense than you might expect!

If you need help with Adding a banner with sliding images to a SharePoint page, don’t hesitate to contact the team at Dolphin Networks today.

Enjoyed reading? Spread the love
Sign-up for exclusive content. Be the first to hear about game-changing news.

Let's tweet!

Dolphin Networks

RT @projectfive: You can now chat with up to 100 people in Teams:

Dolphin Networks

RT @MS_ITPro: Discover how #Microsoft is targeting audiences in SharePoint to provide employees with relevant information and updates: http…

Dolphin Networks

!t was a fantastic talk, thank you for arranging the event @SurreyRP

Dolphin Networks

RT @Azure: Government agencies and their partners can find world-class protection, security, and clearance with #Azure Government: https://…

Dolphin Networks

SharePoint can allow your business to work, communicate and grow faster. Find out more about how SharePoint can hel…

Dolphin Networks

Our first #SharePoint #Tutorial #YouTube video is live on our Channel, how to add lists and libraries to your site.…

Dolphin Networks

RT @MRykiert: Change is good & change is there! @WEBCON_BPS at SPC19!