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.

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

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.

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

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.

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.

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.

For small and medium businesses, having a remote workforce can make a lot of sense. You’ll widen your talent pool as you’ll be able to hire for skills over proximity. You’ll save money on paying for office space and all the trimmings. But how can you easily ensure your remote workforce has the same dynamic and trust as an in-house team would? We will be sharing most effective practice in making use of technology to build trust, connections, and empower your workforce to work remotely from their home office.

This seminar is a forum to listen and share questions with experienced experts who will share examples of effective business practice when planning and managing an ‘Intelligent Digital Workplace.’ While encouraging and challenging you to reflect on your Business Growth and innovation and consider if you can claim back money from the Government.

About Dolphin Networks

Dolphin Networks offers full services in SharePoint Consultancy, Office 365, Business Intelligence Applications, Cloud and Mobile computing and Data Warehousing. We also couple this very closely with developing custom applications to provide a front end interface to data driven solutions.

Testimonial

Excellent Service!

We have used Dolphin for a while now and can’t fault them. Would recommend.