SharePoint – Create your own Slider Webpart


Hello everyone. A while ago I tried to find a way to create a Slider Webpart. Something that would just slide through a bunch of Pictures containing some messages or news or something like that. And I found a solution.

To create your own Slider Webpart you need the following things:

When you have downloaded these Scripts we can create the Slider Webpart.

For my example I created a Picture Library called “Picture” to store my Pictures I want to use for my Slider Webpart. (I used some banner pictures I found online.)

sharepoint_slider_webpart_picture_Library

The next step was to create a Custom List called “Slider” containing a Multiple lines of text column called “HTML”. Use the “HTML” column to add some messages to your pictures of your Slider. (For my example I just entered a few empty lines because this determines the height of the picture on your Slider Webpart. If you don´t enter something you won´t be able to see your pictures in your Slider. If you add to much text to the HTML column your picture will be repeated.)

sharepoint_slider_webpart_slider_list

The next step was to create a Document Library called “Script” to store all the Scripts I mentioned above.

sharepoint_slider_webpart_script_library

As you saw in the above screenshot you also need a script called “SPSlider.js”. This script will actually create your Slider Webpart. Here is the code:


<script type="text/javascript" src="/sites/test2/Script/jquery.min.js"></script>
<script type="text/javascript" src="/sites/test2/Script/jquery.SPServices.min.js"></script>
<script type="text/javascript" src="/sites/test2/Script/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>

Please pay attention to the variables listed below. You need to adjust them for your environment.

var sliderList = "<Your-Slider-List-Name>"; // Name of the list that contains slides
var slideContentField = "<Your-HTML-Column-Name>"; //Name of the Rich text field that has slide content
var slideBackgroundImageField = "<Your-Picture-Library-Name>"; //Name of the picture field to use as background image

sharepoint_slider_webpart_content_editor_url

The last step is to create a Content Editor Webpart and add the Url of the “SPSlider.js” script to it.

sharepoint_slider_webpart

That´s it. Your Slider Webpart is ready.

Important note: I did not create this script. I just discovered it. Have a look at the Sources for more information.

You can download the script I used for my example from here.

Sources:

http://summit7systems.com/a-simple-jquery-content-slider-for-sharepoint-200720102013-and-o365/

http://unslider.com/unslider.min.js

Advertisements
Tagged ,

One thought on “SharePoint – Create your own Slider Webpart

  1. Jen says:

    I see Mark closed the comments on his original post so I’ll post here in hopes of getting a response. I’m having 2 issues. One getting the heights to match up using a combination of images and tables in the html field (so the slider stay the same height). Despite the fact that they should all come out to the same height.

    2, I’m using bootstrap and I can’t figure out how to get the width of the webpart/ zone to be 100%. It seems to have some preconfigured padding I don’t know how to override.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: