Wednesday, December 12, 2012

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 in Brief:
Here is how to create 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 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 a Asset library (or even document library will do!) and create 3 sub folders:
  • 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.

You can download the source code for jQuery banner rotator for SharePoint with scripts, images and CSS, here: Rotating Banner for SharePoint using jQuery. Don't forget to update the Links for Images, JavaScript files in HTM and CSS files.

You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Five Challenges in SharePoint Security
...And How to Solve Them. Free White Paper

Check out these SharePoint products:


  1. Hi, Could you share the demo code

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

    1. Hi Can you send me the code too working on this and looks good

  3. Hi sir,

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

    thank you

  4. Dear Salaudeen,
    Can you send me the code.

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

      Salaudeen Rajack

  5. Thanks for the code.

    It was very helpful

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

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

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

  7. 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?

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


  8. You save my morning, THX !!!!

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

    1. using CQWP or jQuery SPService we can achieve it! Will post an another article as and when time allows me.

    2. Thanks for this great post!

      Agree with the previous comment, please post another article using CQWP to display images from.
      Looking forward to seeing new article.

  10. Hi,
    Great Article...

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

    my email address:

    Gyan Shukla

    1. Gyan,

      Source code Download link provided in end of the article!

  11. 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?

    1. Yes! Image sizes are specified in the CSS file.

  12. could u send me the code

    1. Download link provided at the end of the post!

  13. 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

  14. Can you send me source code to

  15. 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?

  16. 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


  17. 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.

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

  18. 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.

  19. 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.

    1. 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.

  20. 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.

  21. Please, could you send me the code to

    Thank you

  22. pls send me code which includes images,css ,html code on as i am not able to download the code from the link given above

  23. 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 ?

  24. 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
    Thank you and Great post!!

  25. 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?

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

  26. 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.

  27. 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.

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

    2. 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

      Thank you for your help!

  28. 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.

  29. 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!!!!!!!!!!!!!!


Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...