Create A Better Slider For Office 365 Sharepoint Online 2013 Sites

unsliderYour choices are limited if you’re looking for an attractive slider or slideshow for your Office 365 public site. There is a slideshow web part you can use, but it’s not very attractive and has limited settings. The Bright Banner app from the Sharepoint store is the only 3rd party app that works with anonymous sites and is the easiest option to deploy.But if you want something that combines a modern look and ease of use – something that promotes your content by for example allowing you to overlay text on a background image while still using images in a Sharepoint list, you may want to consider the jQuery “unslider”. It uses jQuery to run the slider and the clever SPServices to pull content from a list. Here’s a demo that shows how text and images can be combined:

http://365.webbrewers.com/SitePages/home.aspx

Mark Rackley came up with the idea of combining the unslider script with SPServices, so this is just a recap of that idea in the context of a Sharepoint Online 2013 public site – with a few bonus tricks of my own – like adding multiple sliders and a filter to select which slides are displayed. It’s ideal if you want to be able to display different messages and quickly edit them without having to create a whole new slide.

The basic steps to install it are:

Create a list to store the slides
Upload the necessary files
Add a content editor web part to a page

Create A List

Use “add an app” to add a custom list called “Slider”
Create 2 fields in the list:
A rich text field called “HTML” (which lets you format the text that overlays the image – there must be some content in this field!)
A hyperlink/picture field called “Picture” and set to the picture setting.
You can upload some test content at this point if you like

 

Admin view of list using “newsletter” style display

Upload Files

This is easiest done using Sharepoint Designer but you can also use the browser tools
Download the unslider script from here » and upload/import it to your site’s Site Assets library
Download the slider script from here » and either upload it to Site assets, or just copy/paste the code into a new js file in Sharepoint Designer.
This file contains all the needed references to external jQuery and SPServices files.

Note that the slider.js file also contains some basic css styling, so that’s where you’d make changes (if you know what you’re doing).

Deployment

Open a page for editing

At the spot you want the slider to appear, insert a content editor web part
Click “add content” and in the web part properties box, add this link in the “content link” box:
/SiteAssets/slider.js

cewp-unslider

Usage

You’ll get the best results if you use images having the same dimensions. Remember, the image is set as a background with the HTML field text overlaying it so you can play around with the positioning of the image and the formatting of the text. In my example, I used a small image pushed to the right and styled up some large text messages in the HTML field. As you can see, you can also add “read more” buttons to the html field.

If you don’t see the slider when you reopen the page, go back to the list and add a few blank lines or some content to the HTML field. That field sets the slider’s height so it can’t be empty!

Advanced – Multiple Sliders
As is, the installed scripts reference one list, so you can only display one slider. You will need to make a few adjustments if you want multiple sliders.
Create a new list as above only name it say “Slider2”
Copy the contents of the slider.js file over to a new file named “slider2.js” (again much easier to edit it directly in SPD)
Look for this line: var sliderList = “Slider”; // Name of the list that contains slides
Change “Slider” to “Slider2”.
In the content editor web part, link to the new slider2.js file.

That’s it!
Advanced – Configuring Slider Options
If you want to change the slider settings like speed,

datasheet-slider