A SIMPLE JQUERY CONTENT SLIDER FOR SHAREPOINT 2007/2010/2013 AND O365

I’ve come to accept that a lot of you guys appreciate the technical content that gets put together in these blogs, but at the end of the day you have a job to do. As much as you like to read my ramblings for HOW to do something, you just want to “Get it working” and get on with the rest of your job. I hear you, I get it, and based upon the response from my previous blog post on creating tabs for your web parts (TABBED WEB PARTS IN SHAREPOINT 2013 / OFFICE 365) I realize that I should throw together a few more of these “plug and play” scripts to help you guys get your jobs done.

So, I had previously posted a blog on using a content slide in SharePoint where I walked your through using SPServices to read your slide content from SharePoint lists and explained how to use the library that I found that worked nicely in SharePoint.

That blog can be found here:  A Dummies Guide to SharePoint & jQuery – An Easy to Use Content Slider. Since then it seems like a ton of blogs have also popped up for how to implement content sliders in SharePoint, and you know what I noticed? None of them seemed that simple and many were overly complicated. It’s no wonder people get confused by this stuff… now don’t get me wrong. I’m sure there are some excellent posts much better than this one, I just didn’t see it…

Anyway, just this past week I ran across a different jQuery Slider called “Unslider”. Unslider looked nice and very easy to use. Plus I didn’t need to download an entire css library with images for it to work. Plus, it works great in SharePoint. So, I figured here was my chance to throw together another plug and play solution for you guys. You can see a demo of the slider in action at my blog here: http://www.sharepointhillbilly.com/demos/SitePages/slider.aspx

Below you will find the script I put together as well as a video showing you how to implement the slide in a few easy steps.

THE SCRIPT

Here’s the script I put together for the slider. I’m using SPServices (http://spservices.codeplex.com) to read the slide contents for a SharePoint list. I originally wrote the script using CSOM but after some internal turmoil I went back to SPServices since it works in 2007 and there’s no anonymous access issues should you not be able to get to central admin. If you REALLY want the CSOM code let me know and I’ll make it available.

To use this script “as is” follow these steps:

1) Upload the Unslider js file to your Site Assets library (http://unslider.com/unslider.min.js)

2) Create a new file in your Site Assets library called “slider.js”

3) Copy and paste the below script into slider.js and save the file.

4) Create a list to store your slide contents, in my example below I have a list called “Slider”: that has a multi-line Rich text field called “HTML” and a picture field called “Picture” that is used for the background image of the slide. If you have a different list you’d like to use, please be sure to update lines 16,17,18 in the script below to correctly point to the list, content field, and picture field.

5) Create some slides in your list *It is important to note, that the CONTENT (multi-line rich text field) dictates the slide’s height! If all you see is a sliver of a slide, this usually means you did not put any information in the multi-line rich text field. If you JUST want the image to appear, you will still need to put some blank lines in the content field or edit the html of the rich text field and create a table of a specific height to give your slide height*

6) Create a Web Part page in your Site Pages library

7) Insert a content editor web part on your web part page and link to the slider.js script in your Site Assets library

8) ta and da

   1:  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   2:  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
   3:  <script type="text/javascript" src="../SiteAssets/unslider.min.js"></script>
   4:
   5:  <style type="text/css">
   6:  .hillbillyBanner { position: relative; overflow: auto;   }
   7:      .hillbillyBanner li { list-style: none; }
   8:          .hillbillyBanner ul li { float: left; }
   9:              .hillbillyBanner ul {margin-left: -40px;}
  10:  </style>
  11:
  12:  <script type="text/javascript">
  13:
  14:        jQuery(document).ready(function($) {
  15:
  16:           var sliderList = "Slider"; // Name of the list that contains slides
  17:           var slideContentField = "HTML"; //Name of the Rich text field that has slide content
  18:           var slideBackgroundImageField = "Picture"; //Name of the picture field to use as background image
  19:
  20:           HillbillySlider(sliderList,slideContentField,slideBackgroundImageField);
  21:       });
  22:
  23:
  24:      function HillbillySlider(sliderList,slideContentField,slideBackgroundImageField) {
  25:
  26:          //query to retrieve all items
  27:          var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
  28:
  29:          //return fields for slide content and background picture
  30:          var camlViewFields = "<ViewFields><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /></ViewFields>";
  31:
  32:          $().SPServices({
  33:               operation: "GetListItems",
  34:               async: true,
  35:               listName: sliderList,
  36:               CAMLViewFields: camlViewFields,
  37:               CAMLQuery: query,
  38:               completefunc: function(xData, Status) {
  39:                    $(xData.responseXML).SPFilterNode("z:row").each(function() {
  40:                    var slideContent = ($(this).attr("ows_"+slideContentField));
  41:                    var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
  42:                    //create slide (li) and append it to other slides
  43:                    $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\">"+slideContent+"</li>");
  44:               }); // end completefunc
  45:               //start the slider
  46:               $('.hillbillyBanner').unslider();
  47:             }
  48:          }); // end SPServices call
  49:      }
  50:  </script>
  51:
  52:  <div class="hillbillyBanner"><ul id='hillbillySlider'></ul></div>

THE VIDEO

How to implement script for jQuery content slider in SharePoint 2013

Simple jQuery Content Slider for SharePoint 2007/2010/2013 and O365

CONCLUSION

I’ve tested the solution in both SharePoint 2010 and SharePoint 2013 in my Office 365 site. Since I am using SPServices to retrieve the list data it should work in SharePoint 2007 as well. Should you have any questions about how to customize the slides, change the effects, or anything of that nature, please refer to theUnslider site since it details how to enhance the slider’s functionality. Go ahead and give it a shot and play around, I was able to do things like move the slider into the ribbon area of the screen and change its position on the page. If there is any interest for how to do that, let me know and I’ll update the script.

Thanks again for stopping by!

Disclaimer
The sample scripts are not supported under any Summit 7 Systems standard support program or service. The sample scripts are provided AS IS without warranty of any kind. Summit 7 Systems further disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scripts and documentation remains with you. In no event shall Summit 7 Systems, its authors, or anyone else involved in the creation, production, or delivery of the scripts be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the sample scripts or documentation, even if Summit 7 Systems has been advised of the possibility of such damages.