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
- Download and create necessary files
- Create the folder structure as explained below
- Create HTM file for banner Rotator. Update the links to point to your SharePoint site for images and JavaScript files in HTM and CSS.
- 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:
- jquery.min.js – Get it from: https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
- jquery.cycle.all.js – https://cdn.jsdelivr.net/cycle/2.9999.6/jquery.cycle.all.js
- A CSS file to define styles for our rotating banner
- Banner images, and rotator control images (like Previous, Next, switch.)
- 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:
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
Images: (6 Images)
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:
Here is my Images folder:
and the styles folder:
Upload the files to relevant folders.
Add a Content Editor web part to the page, specify the banner html file.
See Rotating banner for SharePoint 2010 using jQuery in action!
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.
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.
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.
hi is posible show 2 images??
have an issues with browser IE9 (page from sharepoint, used content editor and add html file), if used mozilla/chrome work fined.
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.
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.
Can you post the banner and style code on here. I am not allow to email anything from this computer.
Thanks,
Alex
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
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.
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
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
Hi Rakesh, Download link is provided at the end of the article.
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….
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
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!
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.
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?
You got to update the banner.htm file in the code provided. If you want to dynamically fetch from a SharePoint library, Here you go: Rotating Banner using Content Search Web Part
Dynamic JQuery Rotating Banner for SharePoint
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
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
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
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?
Try opening the HTM file from local system – which has references to files in SharePoint. Check you are getting the expected.
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?
Dev,
Can you compare your work with this Live site?
https://hs.sbcounty.gov/vita/
Banner: https://hs.sbcounty.gov/vita/SitePages/banner.htm
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!!!!!!!!!!!!!!
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.
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.
Open the banner.htm file and replicate the DIV with class:”fp-slides-items”
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!
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.
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?
These images are referenced in “Slider.CSS” file. Make sure the file path referenced is valid by hitting them in browser..
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
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 ?
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
Mailed!
Please, could you send me the code to the.master.jose@gmail.com
Thank you
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.
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.
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.
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.
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.
Pretty simple, I just figured that one out. you need to update the link refs in the slider.css as well 😉
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
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?
Can you send me source code to emailjeff2000@yahoo.com
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
Source Code mailed!
could u send me the code
natchimuthu@gmail.com
Download link provided at the end of the post!
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?
Yes! Image sizes are specified in the CSS file.
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
Gyan,
Source code Download link provided in end of the article!
how can we make it read from the library with as many number of images
using CQWP or jQuery SPService we can achieve it! Will post an another article as and when time allows me.
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.
Here you go: Rotating Banner using Content Search Web Part
You save my morning, THX !!!!
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?
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
Really thanks
but it doesn’t work with internet explorer
anyhelp please..
Did you change the URL Path for JQuery, CSS files?
yes i change it to be Compatibe with my site..
i put the full URL https:\—–slider.css
is that right??
Thanks for the code.
It was very helpful
Dear Salaudeen,
Can you send me the code.
All: Source code has been Shared at the end of the article!
Regards,
Salaudeen Rajack
Hi sir,
can share the code to merge word documents in document library using sharepoint.
thank you
Hi Salaudeen, can you give me your email?
I’ll really appreciate if you could share me the code
Thank you !
Sent you the complete code!
Hi Can you send me the code too working on this and looks good
@russ: Mailed the code.
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 !
Hi Ashish,
Source Code Link provided at the end of the Article.
Hi, Could you share the demo code