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

And here’s the script:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript" src="../SiteAssets/unslider.min.js"></script>
<style type="text/css">
 .hillbillyBanner { position: relative; overflow: auto;   }
 .hillbillyBanner li { list-style: none; }
 .hillbillyBanner ul li { float: left; }
 .hillbillyBanner ul {margin-left: -40px;}
 </style>
 <script type="text/javascript">
       jQuery(document).ready(function($) {
          var sliderList = "Slider"; // Name of the list that contains slides
          var slideContentField = "HTML"; //Name of the Rich text field that has slide content
          var slideBackgroundImageField = "Picture"; //Name of the picture field to use as background image
          HillbillySlider(sliderList,slideContentField,slideBackgroundImageField);
      });
     function HillbillySlider(sliderList,slideContentField,slideBackgroundImageField) {
         //query to retrieve all items
         var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";
         //return fields for slide content and background picture
         var camlViewFields = "<ViewFields><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /></ViewFields>";
         $().SPServices({
              operation: "GetListItems",
              async: true,
              listName: sliderList,
              CAMLViewFields: camlViewFields,
              CAMLQuery: query,
              completefunc: function(xData, Status) {
                   $(xData.responseXML).SPFilterNode("z:row").each(function() {
                   var slideContent = ($(this).attr("ows_"+slideContentField));
                   var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
                   //create slide (li) and append it to other slides
                   $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\">"+slideContent+"</li>");
              }); // end completefunc
              //start the slider
              $('.hillbillyBanner').unslider();
            }
         }); // end SPServices call
     }
 </script>
  
 <div class="hillbillyBanner"><ul id='hillbillySlider'></ul></div>

 

The Video

How to implement script for jQuery content slider in SharePoint 2013

 

An important note

The height of the slide is NOT determined by the height of the background image, but by the HTML in the content field. So, specify you height there.  If all you see is a tiny sliver then you need to put more content in the slide to increase the slide’s height.

Also, does your slider appear fine in edit mode but then disappear when you exit edit mode? If you are using SharePoint 2013 go into your Site Settings->Site Features and disable the “Minimal Download Strategy” feature. This feature (as of the writing of this post) in Office 365 will cause some of your scripts to not execute properly. Disable this feature and you should be good to go!

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 the Unslider 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!

8 comments

  1. Josh Verde - Reply

    I have the script and see the small sliver. I do not understand how to make the height correct. Current my images are 200px tall. Thanks in advance!

    • mrackley - Reply

      Create some content for the slide. Words, empty lines, it doesn’t matter. It’s the content, not the image, that creates the slide height.

  2. butchersoft - Reply

    Had to apply a slider today to and old 2007 SharePoint 2007 box and used this example. Real simple to use

    Added the following

    $(‘.hillbillyBanner ul’).css(‘overflow’,’hidden’);
    $(‘.hillbillyBanner li’).css(‘height’,’300px’);
    $(‘.hillbillyBanner’).unslider();

    This gives it a fixed height and allows you to set the width to be set by the content query webpart width properties

  3. Kelly - Reply

    Actually, it looks like you can adjust the height with a little more CSS in the slider.js file. I altered the .hillbillyBanner ul li { float: left;} to .hillbillyBanner ul li { float: left; height: 200px;} and the height becomes fixed, whatever the height of the content. Thanks for the post, it’s great!

  4. Pingback: This Column Name is not WHat You Think – Be Careful With Column Names in SharePoint 2013 / Office 365 | The White Pages

  5. Brian - Reply

    How do you connect the J query and the SharePoint list.
    This is still not working for me.

  6. Joe - Reply

    Greetings Mark, is there a way to get the script to pull from a picture library? I cannot get the code to pull it properly. thanks for the code

Leave Comment

Your email address will not be published. Required fields are marked *