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 jQuery-Rotating-Banner.zip! (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 jQuery-Rotating-Banner.zipfile.
    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: “http://sharepoint.crescent.com” 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:

<!DOCTYPE HTML>
<html>
<head>
  <title>jQuery Rotating Banner coded by http://www.SharePointDiary.com</title>

 <link href="http://sharepoint.crescent.com/banner/style.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="https://sharepoint.crescent.com/banner/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="https://sharepoint.crescent.com/banner/jquery.cycle.all.js"></script>
 <script type="text/javascript" src="https://sharepoint.crescent.com/banner/jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="https://sharepoint.crescent.com/banner/jquery.backgroundpos.js"></script>
 
<script type="text/javascript">
$(window).bind("load", function() {
 setTimeout(function() {
     $('.slideshow').cycle({ 
    fx:    'scrollHorz', 
    delay: 0,
    speed:  500,
    rev: 0,
    next:  '.nextArrow',
    prev:   '.prevArrow'
});
}, 2000);
});

    $(document).ready(function() {
     var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>banner</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
          <FieldRef Name='Target' /> \
                           </ViewFields> \
                        </viewFields> \
   <queryOptions> \
    <QueryOptions> \
     <ViewAttributes Scope='RecursiveAll'/> \
     <Folder>http://sharepoint.crescent.com/banner/images</Folder> \
    </QueryOptions> \
   </queryOptions> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "http://sharepoint.crescent.com/_vti_bin/lists.asmx",
            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='https://sharepoint.crescent.com/banner/images/" + $(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1, $(this).attr("ows_FileLeafRef").length ) + "'></a>";

        $("#slideimages").append(Html);
        });
    }

</script>
</head>
<body>
<div id="mainWrap">
    <div class="banner">
     <div class="innerWrap">
            <div class="slideshow" id="slideimages"> 
            </div>
            <div class="prevArrow"></div>
            <div class="nextArrow"></div>
  </div>
 </div>       
</div>
</body>
</html>

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

10 thoughts on “jQuery Rotating Banner (Carousel/Image Slider) for SharePoint

  • September 2, 2021 at 8:20 PM

    Would it be possible to add functionality to have “Active” and “Inactive” images. This way some images can be promoted for a period of time (like a campaign) and then returned to inactive when done. Or so users can stage images, but choose when to make them active by changing metadata value.

    Reply
  • March 21, 2018 at 5:23 PM

    Please add arrow images in your file where you added slidesshow_bg…..in downloaded file there is no arrow image file…..just add arrow image to file ,the arrow functionality works. Good luck.

    Reply
  • March 21, 2018 at 3:51 PM

    Every thing is working fine except arrow functionality ….can you please provide arrow functionality

    Reply
  • December 23, 2015 at 6:08 PM

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

    Reply
  • October 19, 2015 at 8:24 PM

    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?

    Reply
  • May 4, 2015 at 5:33 PM

    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?

    Reply
    • August 24, 2015 at 1:05 PM

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

      Reply
    • November 29, 2016 at 7:46 PM

      I am having the same problem with Chrome… did you ever find a fix?

      Reply
    • November 30, 2016 at 8:03 PM

      In case anyone comes across this in the future, I was able to resolve the problem by using the hard coded version. This means we can’t use the Document Library to manage the images, but that is ok for us.

      Reply
  • May 28, 2014 at 11:27 PM

    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?

    Reply

Leave a Reply