Rotating Banner for SharePoint using jQuery

With jQuery we can do lot of user interface enhancements in SharePoint. In this article, I’m exploring one of them: Add rotating banner for SharePoint using jQuery, Let our SharePoint site display moving top banner. Lets start building rotating banner for SharePoint!

jQuery Rotating Banner for SharePoint – Steps by Step:

Here is how to create a rotating banner in SharePoint

  1. Download and create necessary files
  2. Create the folder structure as explained below
  3. Create HTM file for banner Rotator. Update the links to point to your SharePoint site for images and JavaScript files in HTM and CSS.
  4. Add a Content Editor web part to the page, specify the banner HTM file.

Step 1: Download and create necessary Files
For SharePoint scrolling banner implementation, we need the below files:

  1. jquery.min.js – Get it from:
  2. jquery.cycle.all.js –
  3. A CSS file to define styles for our rotating banner
  4. Banner images, and rotator control images (like Previous, Next, switch.)
  5. A HTML page which has rotating banner code!

for the last CSS and HTM files, You can refer:

Step 2: Create the Folder Structure
Head on to your SharePoint site, Create an Asset library (or even document library will do!), and create 3 subfolders:

  • A Folder for rotating banner scripts, say “scripts”
  • A Folder for Images, say “images”
  • and a folder for CSS Styles, say “styles”

So, Your Library and folder structure will look like:

jquery rotating banner sharepoint

Create a HTM and CSS file (You can refer online demos of the provides links)
Create a HTM file and CSS file from the content provided below. 

CSS File Content: say, Slider.css 

HTML File Conent: say, Banner.htm 

SharePoint 2010 jQuery Banner

Images: (6 Images)

create rotating banner sharepoint
add rotating banner sharepoint 2010
sharepoint 2007 rotating banner
rotating banner for sharepoint
 rotating banner sharepoint web part
SharePoint banner rotator

Download and upload these images to your SharePoint Library’s images folder.

Step 3: Update the links in HTM and CSS files
Update the Links for Images, JavaScript files in HTM and CSS files.

Here is my scripts folder:

rotating banner script sharepoint

Here is my Images folder:

add rotating banner sharepoint

and the styles folder:

sharepoint 2010 rotating banner

Upload the files to relevant folders.

Add a Content Editor web part to the page, specify the banner html file.

sharepoint rotating banner web part

See Rotating banner for SharePoint 2010 using jQuery in action!

sharepoint rotating banner

Although, The above implementation talks about implementing jQuery Rotating banner for SharePoint 2010, it can be used in SharePoint 2007 or any of the web sites. It can be placed in master page even.

Download all Scripts/Images/Code for this banner:
You can download the source code for jQuery banner rotator for SharePoint with scripts, images and CSS, here:

Don’t forget to update the Links for Images, JavaScript files in HTM and CSS files.

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!

76 thoughts on “Rotating Banner for SharePoint using jQuery

  • August 12, 2020 at 3:45 PM

    Is it possible to add a pause/play button to the banner? Thanks for the work you have done on this. It is a really awesome piece of code.

  • August 12, 2020 at 3:43 PM

    I know this is a really old thread but I wanted to give it a shot. Is there a way to add a pause/play to this? I wasn’t able to get the dynamic update to work (fetching from an images folder) but was able to get the hardcoded version to work. I was even able to edit the script to adjust the timeout per slide. I would like users to have the option to pause the banner.

  • April 24, 2018 at 1:23 AM

    hi is posible show 2 images??

  • February 25, 2018 at 4:43 PM

    have an issues with browser IE9 (page from sharepoint, used content editor and add html file), if used mozilla/chrome work fined.

  • August 16, 2017 at 3:12 PM

    Hello, can u please send me code which includes images,css ,html code on [email protected] as i am not able to download the code from the link given above.

  • November 4, 2016 at 1:27 PM

    can u pls reupload or email me the zip files pleasee.. somehow it says its corrupted after downloading and antivirus is blocking this. really appreciate.

  • October 24, 2016 at 5:05 PM

    Can you post the banner and style code on here. I am not allow to email anything from this computer.



  • September 2, 2016 at 3:46 PM

    Very Good Article…Thanks Salaudeen
    Somehow i am not able to change the width of the Image to fit on the page.
    Can you please suggest the exact tag i need to modify

  • June 9, 2016 at 8:41 AM

    Can we add a hyperlink buttons on the each slider ? if yes, can you please help with the script also I want to keep the size of the slider that is width and height auto adjust so that if my image size is bigger the slider size also adjusts automatically. can you suggest the changes to the script for the same as well. thanks.

  • October 27, 2015 at 6:03 AM

    I can see some tect content also included in with the image, how to add that?
    1. I want some description to be displayed with each image.
    2. Also the image should stop/pause on the mouse hover

    How can i achieve this in above banner, please help with this.


  • October 25, 2015 at 8:49 AM

    Hi Salaudeen i really appreciate the work you have done above.

    Can you share the code for me for SharePoint 2013 my email id is [email protected]

  • October 9, 2015 at 8:27 AM

    Can you share your code ir send it me my id is – [email protected] I want dynamic banner with hyperlink from backed to added image and show on banner . Please help me sir….

  • June 26, 2015 at 9:36 AM

    Hi Salaudeen i really appreciate the work you have done above, i have a problem though. the content editor only show one pic, what am i missing? thank you

    • June 29, 2015 at 11:38 AM

      Your jQuery Script files may not be loaded. Verify its path. Make sure that the HTM file points to js, css, image resources in SharePoint site and it renders the banner from your local system first prior uploading to SharePoint!

  • June 12, 2015 at 3:59 AM

    Hi Salaudeen – thanks for the excellent post. I have this working but wanted to know how I can center the banner on the page? in my case, the banner sticks to the left of the screen.

  • May 14, 2015 at 3:17 PM

    Hi Salaudeen, this is fantastic! Can you please let me know what changes I have to make in the code to get 4 or 5 images to work in the slideshow?

  • March 20, 2015 at 7:56 PM

    Thanks man for this code!!! great job. I’ve change the size and a few other things but im having issues trying to centralize the banner rotator on the content editor web part. When the page is on its standard size their is no problem but when it gets bigger the rotator stays on the left side of the page. Could you help me with that? Thanks

  • March 12, 2015 at 4:15 PM

    I have followed all the steps. However when I upload the htm file onto my content control, it doesn’t rotate automatically nor the Next and previous buttons work. However, when open the htm file on to google chrome, everything works even the dots works

    • March 14, 2015 at 8:14 AM

      Can you give a try to these:

  • March 11, 2015 at 10:55 PM

    I followed all the steps. I updated CSS and HTM files to change the path. However when i test the HTM file, it doesn’t rotate or show me the buttons.

    i’m using IE 8. is there a way i can change the settings for how fast it rotates?

    • March 12, 2015 at 9:03 AM

      Try opening the HTM file from local system – which has references to files in SharePoint. Check you are getting the expected.

    • March 12, 2015 at 6:05 PM


      okay so now i got the local htm file to work exactly as expected with rotation pics, with next pre button and the dots as well. However this only works on chrome. When i try to open this in IE 8, it only shows me pics rotation, its missing the previous, next buttons and its missing dots. However when i upload this htm onto content web part, i see still image with next prevoius button but it doesn’t rotate nor shows me dots and the next previous buttons dont work.

      Is there a reason why its working perfectly on Chrome ONLY?

    • March 14, 2015 at 8:23 AM


      Can you compare your work with this Live site?

  • February 25, 2015 at 4:38 AM

    hi, thanks for this great article, my problem is that is showing prev and next but not moving and when i click on them nothing happend!!!!!!!!!!!!!!

  • January 20, 2015 at 5:11 AM

    Wondering if you can point me in the right direction? How would I center the slider when called in a content editor web part? The size of the web part zone is dynamic.

  • September 15, 2014 at 6:35 PM

    Hello Salaudeen,

    Could you please tell me how you added more than 3 pages? I would like to increase it to 5 but I am not sure how to.

    Thanks for any assistance.

    • September 16, 2014 at 9:50 AM

      Open the banner.htm file and replicate the DIV with class:”fp-slides-items”

    • September 16, 2014 at 6:02 PM

      Wow, thanks for your reply! I tried to replicate the DIV with class and it did display multiple pages, but I’m having trouble with scrolling through them now. Would you mind e-mailing the banner.htm file with more than 3 pages if you have a moment? I would appreciate it! My e-mail is [email protected]

      Thank you for your help!

  • September 9, 2014 at 11:27 PM

    Hi, thanks for your reply. yes I have updated the reference in Slider.css file and it works fine in Chrome but still IE10 fails to display those next and prev images. any suggestion ? thanks in advance.

  • August 26, 2014 at 5:56 AM

    Hi Salaudeen, It works great with SharePoint 2007. The only thing I cant get to work is the previous and next images that does not appear on the slider image. any idea why?

    • August 26, 2014 at 4:21 PM

      These images are referenced in “Slider.CSS” file. Make sure the file path referenced is valid by hitting them in browser..

  • August 1, 2014 at 3:30 PM

    Hi Salaudeen,
    I have this working on MOSS 2007 but I am also having the same issue with the Next, Prev and Page not showing in IE. It works perfect in Chrome and Firefox. Have you or anyone come up with a solution to this issue with IE? Just would like to see the navigation buttons on the banner so you don’t have to wait for it to scroll through he images.

    If so I can be reached at [email protected]
    Thank you and Great post!!

  • July 22, 2014 at 8:16 AM

    All is working perfectly in Chrome and Firefox, but soens’t fully work in IE. the arrows and the bar below inlcuding opacity is not wrking in IE, Someone here who can make it work the same for IE ?

  • July 4, 2014 at 5:06 AM

    pls send me code which includes images,css ,html code on [email protected] as i am not able to download the code from the link given above

  • December 3, 2013 at 8:16 AM

    Hi Salaudeen, I have copy pasted the code in banner.html and tried using one more pic 4.jpg. But its not working. Anywhere else I need to change the code.

  • December 2, 2013 at 1:37 PM

    Hi In my case I have to keep changing pic and uploading new pics too. Please suggest where all and what need to change. thanks.

    • December 2, 2013 at 1:57 PM

      Having a Library with Pictures and Text – Rotating them using JQuery/CSOM would be the optimal solution! In SharePoint 2013, this is relatively easy with Display templates.

  • November 12, 2013 at 12:54 PM

    Very nice article… just what I’ve looking for… for several days now.
    Worked very well for me on IE10… However, I don’t see the previous and next images… I don’t see the bottom image either… I can see just a gray area below the text.

    it would be nice if I can make it to work 100% just as you have it in this post… do you think I’m missing something? probably need some other changes in the scripts or something?

    let me know… thanks…. and again… congrats… really nice post.

  • October 30, 2013 at 11:01 PM

    I like this! It works great in Firefox, but does not work well in IE 9 (with or without compatibility mode). The arrows do not appear the the page indicator that the bottom is shifted too far left. I even updated my jquery libraries, but no change.

    • November 12, 2013 at 1:17 PM

      Pretty simple, I just figured that one out. you need to update the link refs in the slider.css as well 😉

  • October 28, 2013 at 4:21 AM

    Hi, I’m using MOSS 2007 and have followed your instructions to create the slider.

    In Internet Explorer 8 it is displaying and the images rotate as they should, but the pager and the prev/next buttons aren’t showing. It works perfectly in Chrome, just not in IE. Do you have any fix for this?

    Can get me on [email protected]


  • September 23, 2013 at 7:26 AM

    Hi, all the above works when I click on the banner .html from the document library. Bur when I give its Content link on the Content widget, the banner doesnt display properly. It displays as stacked images on one top of another. Any idea how to resolve?

  • September 3, 2013 at 10:08 AM

    Hello I know there is a download link at the end of the article but the Turkish goverment has blocked
    Colud you please share with me the source code
    [email protected]

  • June 10, 2013 at 5:43 PM

    If I wanted to adjust the entire size of the banner, how would I do this? Do I need to change each individual value in the css file?

  • May 10, 2013 at 5:52 AM

    Great Article…

    I am ShrePoint admin… it will great if you can share the code with me…

    my email address: [email protected]

    Gyan Shukla

  • April 25, 2013 at 10:45 AM

    how can we make it read from the library with as many number of images

  • April 11, 2013 at 4:41 PM

    You save my morning, THX !!!!

  • April 3, 2013 at 7:40 PM

    Hello Salaudeen,

    Thanks for the source code. I am not sure why it is not working for me. I changed the url path in the htm and css file. But it is giving an error saying “Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.” Can you help, please?

    • April 4, 2013 at 8:22 AM

      Are you referencing content from another site collection? If Yes, you will have to enable anonymous access on it to resolve this issue.


  • March 31, 2013 at 10:05 AM

    Really thanks
    but it doesn’t work with internet explorer
    anyhelp please..

    • March 31, 2013 at 4:06 PM

      Did you change the URL Path for JQuery, CSS files?

    • April 4, 2013 at 8:56 AM

      yes i change it to be Compatibe with my site..
      i put the full URL http:\—–slider.css
      is that right??

  • March 15, 2013 at 2:01 PM

    Thanks for the code.

    It was very helpful

  • February 19, 2013 at 7:52 AM

    Dear Salaudeen,
    Can you send me the code.

    • February 19, 2013 at 8:18 AM

      All: Source code has been Shared at the end of the article!

      Salaudeen Rajack

  • January 23, 2013 at 11:26 AM

    Hi sir,

    can share the code to merge word documents in document library using sharepoint.

    thank you

  • January 11, 2013 at 4:55 PM

    Hi Salaudeen, can you give me your email?
    I’ll really appreciate if you could share me the code
    Thank you !

  • December 26, 2012 at 12:29 PM

    Hi, Could you share the demo code


Leave a Reply