Adding a jQuery image carousel to SharePoint 2010 using content editor web part

I couldn’t find a carousel web part for SharePoint 2010 so decide to use a content editor web part to include some html and JavaScript to display an image carousel. Initially, found a jQuery plugin called jCarousel Lite which didn’t provide any css so looked for another one which is called Infinite Carousel. This one worked for me.

Final look:

  • Clicked on the demo link in the article and “View Source”ed it. All the code are laid out nicely.
  • Copy and paste everything to a text editor and remove the unwanted parts and change the image urls, save it as a .txt file. Upload the text file to SharePoint (In this case, Style Library/custom_scripts)
  • Downloaded the “arrow” image and added to Style Library/Images
  •  On the SharePoint page where I need this carousel, add a content editor web part, click on “Edit Web Part”.
  • In the content link box, paste the url of the text file I uploaded to SharePoint before.

  • Change Appearance->Chrome Type to “None” and click OK

Here’s the code I used, unfortunately wordpress doesn’t let me upload text files, so I had to copy and paste it to a Word document.