Image Slideshow in SharePoint CEWP with Javascript and jQuery

Note: This is a image slider implementation. If  you are looking for Rotating Banner for SharePoint using jQuery, see my post: Rotating Banner for SharePoint using jQuery

Upload the images and add the CEWP, then paste the below Code:

<p><b id='banner'></b></p>
<script>
var newBanner=0;
function runOnLoad(){
	var bannerImg = new Array();
	var bannerLink = new Array();
	// Enter the names of the images below
	bannerImg[0]="http://SharePoint.Company.com/banner/banner1.jpg";
	bannerLink[0]="http://www.honeywell.com";

	bannerImg[1]="http://SharePoint.Company.com/banner/banner2.jpg";
	bannerLink[1]="http://www.microsoft.com";

	bannerImg[2]="http://SharePoint.Company.com/banner/banner3.jpg";
	bannerLink[2]="http://www.google.com";


	var totalBan = bannerImg.length;
	newBanner++;
	if (newBanner == totalBan)
	{
		newBanner = 0;
	}
	document.getElementById('banner').innerHTML="<a target=_blank href="+bannerLink[newBanner]+"><img height=100 width=200 src="+bannerImg[newBanner]+"></a>";
	setTimeout("runOnLoad()", 2*1000);
}
_spBodyOnLoadFunctionNames.push("runOnLoad");
 </script>

Image Slider for SharePoint using jQuery:

Another nice way to get the nice rotating banner is to use: jQuery. Here is how:

  1. Upload the images to your site
  2. Add the content editor web part
  3. You can either upload the jQuery script files to your SharePoint site or point it to Google. Download URLs: http://code.jquery.com/jquery-1.7.1.min.js, https://malsup.github.io/jquery.cycle.lite.js
  4. Place the following code:
<style type="text/css">
.slideshow { height: 60px; width: 225px; margin: auto }
.slideshow img { padding: 2px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="jquery.min.js"></script>
<span style="color: #741b47; font-family: "courier new" , "courier" , monospace;"><!-- include Cycle plugin -->
<script type="text/javascript" src="jquery.cycle.lite.min.js"></script></span>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
 });
});
</script>
<body>
 <div class="slideshow">
  <img src="1.jpg" width="225" height="53" />
  <img src="2.jpg" width="225" height="53" />
  <img src="3.jpg" width="225" height="53" />
 </div>
</body>

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!

18 thoughts on “Image Slideshow in SharePoint CEWP with Javascript and jQuery

  • can any one pls tell me how to create an image slide show . m trying to create a slide show but the content itself is not working . what might be the reason

    Reply
  • Fantastic! This is very useful. One thing I would like to do is add more images. What code do I need to add to make it work for 4 or 5 images in the slideshow?

    Reply
    • for some reason, the jquery code does not work with my site. I am using the first code you provided (the ONLY code I have been able to find that works with my site after days of research), and I want to get rid of the link to the images and put in a fade effect. is there a way to do this? the jquery code you provided in the link does not work for my site and I am too unfamiliar to go ahead and edit it myself. thank you!

      Reply
  • is there a way to fade the images?

    Reply
  • Hi,, It really helps to create dynamic image sliding effect using spservice, now workign Chrome and Firefox but not in IE. not working in IE..please help me

    Reply
  • I add the SPServices to get data from Picture Library. It displays pictures, but not in Slider format. Any idea?

    Reply
  • Thanks! Works great. Since I have a large image library I’m rotating though, is there an easy way to get it to start with a random image each time? I am not a programmer, just a content manager for our intranet.

    Reply
    • If you want to dynamically load images from SharePoint Picture Library, Your options are : Content Query Web Part / SPServices!

      Reply
  • I believe your banner is really nice and easy to use, i do have a question. My sharepoint site has thousands of users visiting it every day. The thing is that i need to find a way for the images to be storaged in a cache instead of making them reload for each user everytime in order to increase my site performance which sometimes gets cracked when this happens. How can i do that based in this great solution?

    Reply
    • By default, Cache(content expiration) is enabled and set to 1 year in IIS for _layouts folder. So consider placing your image files in _Layouts folder. You can consider Blob cache also.

      Reply
  • can you please tell me where should i add the code and jquery script files ?

    Reply
    • Place the code in CEWP or any aspx page. JQuery files can be from any library or from 12 or 14 hive, change the script src in the above code.

      Reply
  • Can you show me the screenshot please?

    Reply
  • Awesome. Easy and quick. thanks

    Reply
  • Here you go: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

    Reply
  • Do you have the jQuery script files to download?

    Reply

Leave a Reply