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

  • May 30, 2016 at 5:33 AM

    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
  • May 14, 2015 at 3:10 PM

    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
    • January 8, 2015 at 6:12 PM

      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
  • January 7, 2015 at 10:34 PM

    is there a way to fade the images?

    Reply
  • December 2, 2014 at 7:52 AM

    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
  • December 4, 2013 at 3:17 PM

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

    Reply
  • April 1, 2013 at 4:32 PM

    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
    • April 2, 2013 at 9:35 AM

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

      Reply
  • February 26, 2013 at 6:33 PM

    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
    • February 27, 2013 at 8:33 AM

      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
  • September 21, 2012 at 9:00 PM

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

    Reply
    • September 22, 2012 at 9:33 AM

      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
  • July 22, 2012 at 12:23 PM

    Can you show me the screenshot please?

    Reply
  • May 15, 2012 at 7:44 PM

    Awesome. Easy and quick. thanks

    Reply
  • June 20, 2011 at 7:48 PM

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

    Reply
  • June 16, 2011 at 10:58 PM

    Do you have the jQuery script files to download?

    Reply

Leave a Reply