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: https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
  2. jquery.cycle.all.js – https://cdn.jsdelivr.net/cycle/2.9999.6/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: https://malsup.com/jquery/cycle/more.html?v2.23

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

76 thoughts on “Rotating Banner for SharePoint using jQuery

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

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

    Reply
  • hi is posible show 2 images??

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

    Reply
  • Hello, can u please send me code which includes images,css ,html code on saumyashree.mishra1@gmail.com as i am not able to download the code from the link given above.

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

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

    Thanks,

    Alex

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

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

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

    Thanks
    Paru

    Reply
  • 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 rakeshsharepointdeveloper@gmail.com

    Reply
  • Can you share your code ir send it me my id is – rakeshsharepointdeveloper@gmail.com I want dynamic banner with hyperlink from backed to added image and show on banner . Please help me sir….

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

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

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

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

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

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

    Reply
    • Can you give a try to these:
      https://www.sharepointdiary.com/2014/06/jquery-image-rotator-for-sharepoint.html
      https://www.sharepointdiary.com/2013/12/jquery-rotating-banner-for-sharepoint.html
      https://www.sharepointdiary.com/2014/04/rotating-banner-in-sharepoint-2013-using-content-search-webpart.html

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

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

      Reply
    • Rajack,

      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?

      Reply
    • Dev,

      Can you compare your work with this Live site?

      https://hs.sbcounty.gov/vita/
      Banner: https://hs.sbcounty.gov/vita/SitePages/banner.htm

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

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

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

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

      Reply
    • 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 grenadecandy@hotmail.com

      Thank you for your help!

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

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

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

      Reply
  • 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 harteisgd@gmail.com
    Thank you and Great post!!
    Greg

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

    Reply
  • pls send me code which includes images,css ,html code on vijay.verma@wns.com as i am not able to download the code from the link given above

    Reply
  • Please, could you send me the code to the.master.jose@gmail.com

    Thank you

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

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

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

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

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

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

      Reply
  • 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 danny.levan@collectionhouse.com.au

    Danny

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

    Reply
  • Can you send me source code to emailjeff2000@yahoo.com

    Reply
  • Hello I know there is a download link at the end of the article but the Turkish goverment has blocked sites.google.com
    Colud you please share with me the source code
    Thanks&Regards
    seserkan@gmail.com

    Reply
  • could u send me the code
    natchimuthu@gmail.com

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

    Reply
  • Hi,
    Great Article…

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

    my email address: gyansh04@gmail.com

    Regards
    Gyan Shukla

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

    Reply
  • You save my morning, THX !!!!

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

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

      Refer: https://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webpartpages.contenteditorwebpart.contentlink.aspx

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

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

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

      Reply
  • Thanks for the code.

    It was very helpful

    Reply
  • Dear Salaudeen,
    Can you send me the code.

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

      Regards,
      Salaudeen Rajack

      Reply
  • Hi sir,

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

    thank you

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

    Reply
    • Hi Can you send me the code too working on this and looks good

      Reply
    • Hi Salaudeen, can you give me your email or send me the code on my Mail ID ashishgl6@gmail.com?
      I’ll really appreciate if you could share me the code
      Thank you !

      Reply
  • Hi, Could you share the demo code

    Reply

Leave a Reply

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