SharePoint 2013 Bootstrap Carousel Photo App Library and SPServices

Sharepoint

Recently I have been working with quite a few different SharePoint 2013 sites. A few of these have had requests for image sliders. My go to framework for SharePoint 2013 has been the Bootstrap 3 responsive framework, so using the flexible Bootstrap 3 Carousel is a logical choice.

Note! This will only work if you are using the Bootstrap Framework already. If you are not, and would like a content slider check out some other options from Mark Rackley, Ben Tedder or Google.

The Carousel html is simple to setup in a static environment, but when it comes to loading data from a SharePoint 2013 library into the carousel we need to call upon the wonderful SPServices jQuery Library! There is a great youtube video by Mark Rackley showing how to use the Unslider in SharePoint with a different type of library that helped in the creation of this Bootstrap carousel.

There are four parts to this setup. Note! #2 is not a requirement.

  1. Create an App, a Photo Library app and call it HomepagePhotos and add some optimized (I used 970×400 jpg’s) images to it.
  2. Create an Image Rendition (If you can. Read Prerequisites on the MS page.) called HomepagePhotos and give it the dimensions you would like your slider image to be. I have mine set to 970×400 for example. Note the Image Rendition ID. It will probably be 5 if you add a new one.
  3. Create a single JavaScript file in your SiteAssets folder called slider.js and paste the code below into your slider.js file.
  4. Add a Content Editor WebPart to your page and load the ../SiteAssets/slider.js file.

After you have added your CEW and linked to your slider.js file, save your page, check it in and publish it.

If all went well, you will see your Carousel begin. Hopefully this worked well for you. If you ran into issues, maybe I can help! Leave a comment below.

*BONUS! There is a wonderful set of Bootstrap Carousel’s by Rico Loschke on sevenx.de.