Content Slider Web Part For SharePoint 2010

A friend of mine found this cool content slider web part for SharePoint 2007 & 2010 (Original posts can be found here & here). The developer did a nice job illustrating the coding and list details, but I decided to write a more straight forward procedure to setup and customize, so here we go..

Required Files:

• contentslider.css

• contentslider.js

Optional File:

• List Template (for illustration only)

Steps:

1. Download the files above: Contentslider.css, contentslider.js and the list template
2. To adjust animation time: change the number from ‘50’ to ‘150’ in the following two lines inside contentslider.js file:
   • setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
   • window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
3. To adjust the UI edit the contentslider.css classes:
   • To set a fixed picture size: change the “img” class of the “contentdiv” element:
     .contentdiv img {box-shadow: 2px 2px 2px #ccc; -web-kit-box-shadow: 2px 2px 2px #ccc; -moz-box-shadow: 2px 2px 2px #ccc; margin-right:10px; width: 200px; height: 150px;}
   • To set a fixed slider box size:
     .sliderContainer {position:relative; width:700px; height: 290px;}
4. Navigate to “SiteAssets” folder of your site or create a doc library, for example “SiteAssets1”
5. Upload the files “contentslider.css” and “contentslider.js” into the SiteAssets library or folder
6. The List Template is based on announcements list, but you can create your own list. Rename the extension of List Template into “.stp” and upload it into List Templates gallery
7. Create a list based on this template, for example: “Test Content Slider List”, and insert items into the list
8. Create a page and edit it using SharePoint Designer 2010
9. Insert the Data View Web Part -> select Empty Data View from drop down
10. Click on “click here to select a data source” -> then select any fields from right panel, such as Title, body and image
11. Switch to code view, and find the first <xsl> tag which is after the closing </DatasSources> tag
12. Right click on the <xsl> tag and choose “Select Tag”. Press delete
13. Copy the code from 2nd source link (for SP2010) and paste into the page where you deleted the code
14. Save the page and that’s it, now you can enjoy the slider!