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

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

Posted by on Monday, August 5th, 2013  

 

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.

Subscribe to RSS Feed

Sign Up for Newsletter

28

28

comments

    Aug 06
    2013

    Matt Schuessler

    Thanks for a great little tutorial!

    Aug 14
    2013

    Mima

    Hi Mark, Excellent code! Thanks for sharing!
    Question: I followed all your steps but I see only the top portion of the slider, and on slide 2 I do not see the picture, just the text. I am using SharePoint 2013, IE8. For the scripts I am using everything exactly the same as yours. Please advise and thanks beforehand for your time and help!
    Mima

      Aug 27
      2013

      Mark Rackley

      Sorry you are having issues, does the demo from the blog work for you:

      http://www.sharepointhillbilly.com/demos/SitePages/slider.aspx

      if the demo works for you, we can figure out what your issue is. If it does not, then it’s most likely a browser issue and the unslider library may not be compatbile with your browser.

    Sep 03
    2013

    Dave Kuehling

    Hi Mark,

    Great post!! I am having the same issue as Mima, where only a sliver of the top shows on the page. I am using O365 and see the same behavior in IE10, Firefox, and Chrome. I can however see the demo on your site just fine. I modified your code a bit (just the query part), but also tried a straight copy and got the same result.

    Just to be sure the setup is the same, I created a new custom list with the two fields, one called HTML which is multi-line rich text, and the second called Picture which is a Hyperlink/Picture formatted as a Picture.

    All in all, seems pretty straightforward, but I am newish to the world of jquery/javascript so my troubleshooting skills are a bit crude at best! Going to keep poking at it to see if I can come up with anything…

    Thanks again for the great work here and on your site!

    Dave

      Sep 03
      2013

      Mark.Rackley

      If all you are seeing is a sliver of a slide, this is usually because there is no “content” in the slide. The CONTENT of the slide is responsible for the slides height. So, if you just wanted an image with no content, you’d at least need to but in a few blank lines of content. Sorry this was not made clear in the post, I’ll get that updated.
      Good luck!
      Mark

    Sep 04
    2013

    Jonathan Santos

    Thanks for the information!
    I’m new to Sharepoint, so I wonder how do I create a list Slider you created and how to configure the Picture field and HTML.

    I thank you

      Sep 15
      2013

      Mark.Rackley

      Hey Jonathan, what version of SharePoint are you using? Here’s a video that shows you how to create lists in SharePoint 2013/Office 365

    Sep 05
    2013

    Josh

    Great work, thank you. This works well on my site in 2010. But I’m trying to add some of the options, such as dots. I tried adding the code from the unslider.com page under Options, but the brackets and parentheses are off from the original script, and I keep getting errors. Any suggestions?

    Original script:

    //start the slider
    $(‘.hillbillyBanner’).unslider();
    }
    }); // end SPServices call

    Unslider.com Options Script:

    $(‘.banner’).unslider({
    speed: 500, // The speed to animate each slide (in milliseconds)
    delay: 3000, // The delay between slide animations (in milliseconds)
    complete: function() {}, // A function that gets called after every slide animation
    keys: true, // Enable keyboard (left, right) arrow shortcuts
    dots: true, // Display dot navigation
    fluid: false // Support responsive design. May break non-responsive designs
    });

    Sep 05
    2013

    Josh

    Me again. So now I have the brackets at least right to avoid the IE error. But the dots aren’t appearing. My page background and in the content editor is white. Does that matter? Do I need a darker, non-white background to the content editor or page for the dots to appear?

    //start the slider
    $(‘.hillbillyBanner’).unslider({
    speed: 500, // The speed to animate each slide (in milliseconds)
    delay: 3000, // The delay between slide animations (in milliseconds)
    complete: function() {}, // A function that gets called after every slide animation
    keys: true, // Enable keyboard (left, right) arrow shortcuts
    dots: true, // Display dot navigation
    fluid: false // Support responsive design. May break non-responsive designs
    });
    }
    }); // end SPServices call

      Sep 15
      2013

      Mark.Rackley

      Hey Josh, I have not had a chance to play with all the unslider options yet, but I would think there should be some way to get the dots and arrows to appear.
      Have you tried manually setting the height and width of the Content Editor Web Part that is linked to the script? It’s possible that the dots and arrows are “there” just not visible because the height of the web part itself? I’ll try and find some time to play around with the unslider options. It’s also possible that in order to have the dots and arrows you have to include image files? I know this has been the case with other slider solutions I’ve played with, so maybe take a look and see if that might be the reason here as well. I might also suggest looking at the unslider site to see if other users are having the same issues that you are. Good luck!

        Sep 20
        2013

        Eric

        Hello Mark/Josh – Was this something that was figured out yet? I’d like to implement the dots/arrows functionality to scroll between the images too. Also what would be the easiest way to have a “flag” field in the slider list to have active and nonactive images. So we can have a backlog of slider images but not necessarily have them active all the time.

        Any help would be greatly appreciated!

        Thanks!

          Sep 20
          2013

          Mark.Rackley

          For those having issues with dots not showing up:

          http://www.lmgtfy.com/?q=unslider+dots+not+working

          Guys, I love you like the little brother that pesters me while I’m playing Zork in my pajamas. Please understand this is not a support blog for unslider. If you are having problems with specific functionality of the slider, do some searching to see what others are saying. In this instance it seems others are having the same issue and it can be fixed by adding some css.

          Now… if you want to contract with me to figure out all the minutia I’m more than happy. 🙂

          Also, Eric if you want to only show active items you could create a field on the slider list to indicate if a slide is active, and then write a CAML query to only retrieve the active list items. If I can find some time this weekend I’ll write something up real quick, otherwise there should be several examples on the SPServices.codeplex.com site.

          Good luck to you all! Don’t be afraid to get you hands dirty and learn what the script is actually doing. You aren’t going to hurt your farm.
          Mark

    Sep 13
    2013

    Nate

    I’m certain I followed the steps correctly, but when I link the slider.js file to the content editor, I only get “// JavaScript Document”. I’m running SP 2010.

      Sep 13
      2013

      Mark.Rackley

      Nate, it sounds like you might have put the script inside the content editor web part? You should upload the script to a document library and then link to it in the content editor web part. Make sure all your paths are correct.

    Oct 11
    2013

    Scott Ross

    Love how this simply works!!! And far better than a lot of other solutions. As a note to some previous issues with sizes, if you use the full unslider.js code rather than the unsider.min.js and go to line 56 where it says “width = me.outerWidth(), height = me.outerHeight();” and in the parenthesis put in your desired size you can then set it to a specific size rather than using the CONTENT to control the size. The size will be in Pixel so be aware of that. As the pictures I use for my internal SharePoint has specific sizes I went with those rather than a re-sizing model.

      Oct 12
      2013

      Mark.Rackley

      Thanks for the kind words Scott and thanks for the tip!

    Oct 20
    2013

    Ralph

    Great presentation. Thanks!

    I had issues with the sizing not being correct and it appeared that if I changed my HTML field name to lowercase (html) in the js that it corrected the issue. I’m surprised that it would be case sensitive. The other issue that is not clear to me is the “internal name” mentioned in the video. I’m guessing that you can use a rest call to determine this, but I don’t know if there is an easier way. (http:///_api/web/lists/getbytitle('Slider‘)/items?)

    Thanks again.

      Nov 12
      2013

      Mark.Rackley

      You can also get the internal name by using the UI and going to the List Settings for your list and then clicking on the field in question. The internal name for the field will be in the Query String.

    Nov 06
    2013

    Aurelien

    Thanks for this, i just have a (probably stupid) question :
    Will this work on Sharepoint Foundation 2010?

    Anyway, explanations are cristal clear, even for a little french guy!

      Nov 12
      2013

      Mark.Rackley

      Yes, it will work in SP Foundation 2010

    Feb 17
    2014

    Website Designing company in Delhi

    Awesome so easy to work with, thanks for sharing this

    Mar 24
    2014

    d

    hey Mark,
    I’m trying to get the picture to go to another pages when user clicks on it.
    For example there will be News or Announcement everyday. So I want to put this on the slider as a highlights/preview, then when user clicks, they will be
    directed to another page where they can read the full story. How do I do this?
    Thanks