Wednesday, December 18, 2013

jQuery Rotating Banner (Carousel/Image Slider) for SharePoint

In continuation to my earlier post Rotating Banner for SharePoint using jQuery, one enhancement requested by people is: The ability to dynamically fetch images from SharePoint library, so that new banner images can be easily added, existing banners can be modified with out touching the banner code.

So, I've made changes to fulfill these requirement. Now the new rotating banner code dynamically fetches banner images from a specified library using SharePoint web Services and renders the rotating banner on SharePoint. Also the target URL is now editable from SharePoint UI.

Steps to implement jQuery Rotating Banner for SharePoint

  • Step 1: Download the! (Go to File >> Download from Google drive) This zip file contains all scripts, style sheets and sample images for the banner. Extract them to your local folder.
  • Step 2: Create a new picture library (or even document library can do!), name it as "banner", Open the library in explorer view and upload all files including "images" folder and its files extracted from the file.
    jquery sharepoint image rotator
    Important: Make sure all of your SharePoint site users granted at least "Read" access to the banner library!
  • Step 3: Create a new Hyperlink column in your banner library, name it as "Target"
     image slider sharepoint 2013
  • Step 4: Go to "images" folder under your banner library, set the target URL for the banners, So that when users click on the rotating banner images, they'll be redirected to respective pages.
    sharepoint jquery banner rotator
  • Step 5: Edit banner.htm and style.css files: Find and replace the hard coded link: "" with your SharePoint site's URL where you created "banner" library.
  • Step 6: Add a content editor web part, Edit web part properties, Specify the content link as the "banner.htm" file which is located in the "banner" library.
This zip file also contains a static version (banner images are hard-coded) which can be used in not just SharePoint sites but on any site. Here is the sample of the jQuery rotating banner in SharePoint 2010:
jQuery Rotating Banner for SharePoint 2010

Rotating banner/Image Slider for SharePoint 2013 using jQuery:
jQuery Rotating Banner for SharePoint 2013
Banner.HTM Code:
  <title>jQuery Rotating Banner coded by</title>

 <link href="" rel="stylesheet" type="text/css">
 <script type="text/javascript" src=""></script>
 <script type="text/javascript" src=""></script>
 <script type="text/javascript" src=""></script>
 <script type="text/javascript" src=""></script>
<script type="text/javascript">
$(window).bind("load", function() {
 setTimeout(function() {
    fx:    'scrollHorz', 
    delay: 0,
    speed:  500,
    rev: 0,
    next:  '.nextArrow',
    prev:   '.prevArrow'
}, 2000);

    $(document).ready(function() {
     var soapEnv =
            "<soapenv:Envelope xmlns:soapenv=''> \
                <soapenv:Body> \
                     <GetListItems xmlns=''> \
                        <listName>banner</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
          <FieldRef Name='Target' /> \
                           </ViewFields> \
                        </viewFields> \
   <queryOptions> \
    <QueryOptions> \
     <ViewAttributes Scope='RecursiveAll'/> \
     <Folder></Folder> \
    </QueryOptions> \
   </queryOptions> \
                    </GetListItems> \
                </soapenv:Body> \

            url: "",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
   //Get Images from "Images" Folder          
  var Html=" <a href='" + $(this).attr("ows_Target").split(',')[0] +"'><img src='" + $(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1, $(this).attr("ows_FileLeafRef").length ) + "'></a>";



<div id="mainWrap">
    <div class="banner">
     <div class="innerWrap">
            <div class="slideshow" id="slideimages"> 
            <div class="prevArrow"></div>
            <div class="nextArrow"></div>

You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.

Check out these SharePoint products:


  1. This is pretty awesome.
    Is there a way you can show what code would need to be added above to banner.htm so you could have additional fields show in the slider, such as the title, or some text from an additional multi-line text field added to the library field?

  2. This is great! It works like a charm. The arrow files are missing within the zip. I did not really need it, but wanted to bring it to your attention.

    The banner displays fine in IE and Firefox, but there is an issue when viewing in Chrome. It only displays the background image and none of the scrolling images. Is there some setting I can apply or code I need to change to get it working in Chrome?

    1. i am only getting the background image only on all browsers. what can be the issue?

  3. Hello Salaudeen,
    i also get the background only on sharepoint 2013. I see that you have jquery 1.9.1.min in the above image that you uploaded, but on the download that you provided it has jquery 1.3.2.min. Do you think that might be the issue?

  4. Does anyone know where to get the arrow file? I'd like to have this functionality


Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...