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.
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:
- Upload the Unslider js file to your Site Assets library (http://unslider.com/unslider.min.js)
- Create a new file in your Site Assets library called “slider.js”
- Copy and paste the below script into slider.js and save the file.
- 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.
- Create some slides in your list
- Create a Web Part page in your Site Pages library
- Insert a content editor web part on your web part page and link to the slider.js script in your Site Assets library
- ta and da
And here’s the script:
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!
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!