March 12, 2015 by Jason Flaherty

SharePoint 2013 Bootstrap Carousel Photo App Library and SPServices

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.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script><script type="text/javascript">
<script>
jQuery(document).ready(function($) {
   GetPics("HomepagePhotos");
});
  function GetPics(hp) {
      //query to retrieve all items
      var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
      //fields containing Carousel infomration. FileRef is picture URL with some junk to strip
      var camlViewFields = "<ViewFields><FieldRef Name='FileRef' /><FieldRef Name='Title' /><FieldRef Name='Description' /></ViewFields>";
      //using a counter to find the FIRST slide and give it the class active.
      var i = 0;
      $().SPServices({
          operation: "GetListItems",
          async: true,
          listName: hp,
          CAMLViewFields: camlViewFields,
          CAMLQuery: query,
          completefunc: function(xData, Status) {
              $(xData.responseXML).SPFilterNode("z:row").each(function() {
                  //Define variables
                  //You can do a console.log(xData.responseXML) and see all the fields real quickly
                  var filename = ($(this).attr("ows_FileRef"));
                  var title = ($(this).attr("ows_Title"));
                  //Description here is what is used for Alt text
                  var desc = ($(this).attr("ows_Description"));
                  //Filename has some data before it, so replace 1;# info before URL     
                  var picture = filename.match(/(?:(?!#).)*$/);
                  //Check if it is the first entry... if so add active.
                  //You will see ?RenditionID=5 after the immage. I am using Image Reditions to make sure the images are the correct size... though this does not optimize. https://msdn.microsoft.com/en-us/library/office/jj720398.aspx
                  if (i == 0) {
                      $("#MyCarousel .carousel-indicators").append("<li data-target='#hubCarousel' data-slide-to=" + i + " class='active'></li>");
                      $("#MyCarousel .carousel-inner").append("<div class='item active'><img src='/" + picture + "?RenditionID=5' alt='" + desc + "'><div class='carousel-caption'><strong>" + title + "</strong></div></div>");

                  } else {
                      $("#MyCarousel .carousel-indicators").append("<li data-target='#hubCarousel' data-slide-to=" + i + "></li>");
                      $("#MyCarousel .carousel-inner").append("<div class='item'><img src='/" + picture + "?RenditionID=5' alt='" + desc + "'><div class='carousel-caption'><strong>" + title + "</strong></div></div>");
                  }
                  //increase count until .each is done.
                  i++;
              }); 
          }
      }); 
  }
</script>

<div id="MyCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators"></ol>
  <div class="carousel-inner"></div>
  <a class="left carousel-control" href="#MyCarousel" role="button" data-slide="prev">
    <span class="fa fa-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#MyCarousel" role="button" data-slide="next">
    <span class="fa fa-chevron-right"></span>
  </a>
</div>

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.

#Bootstrap#Carousel#featured#jQuery#sharepoint 2013#SPServices