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 without touching the banner code.

So, I’ve made changes to fulfil these requirements. 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! 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.zip 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: “https://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 https://www.sharepointdiary.com</title>

 <link href="https://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='https://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='https://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>banner</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
          <FieldRef Name='Target' /> \
                           </ViewFields> \
                        </viewFields> \
   <queryOptions> \
    <QueryOptions> \
     <ViewAttributes Scope='RecursiveAll'/> \
     <Folder>https://sharepoint.crescent.com/banner/images</Folder> \
    </QueryOptions> \
   </queryOptions> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "https://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 - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

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

  • 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
  • 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
  • Every thing is working fine except arrow functionality ….can you please provide arrow functionality

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

    Reply
  • 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
  • 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
    • i am only getting the background image only on all browsers. what can be the issue?

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

      Reply
    • 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
  • 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

Your email address will not be published. Required fields are marked *