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:
Optional File:
- List Template (for illustration only)
Steps:
- Download the files above: Contentslider.css, contentslider.js and the list template
-
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)
- 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;}
- To set a fixed picture size: change the “img” class of the “contentdiv” element:
- Navigate to “SiteAssets” folder of your site or create a doc library, for example “SiteAssets1”
- Upload the files “contentslider.css” and “contentslider.js” into the SiteAssets library or folder
- 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
- Create a list based on this template, for example: “Test Content Slider List”, and insert items into the list
- Create a page and edit it using SharePoint Designer 2010
- Insert the Data View Web Part -> select Empty Data View from drop down
- Click on “click here to select a data source” -> then select any fields from right panel, such as Title, body and image
- Switch to code view, and find the first <xsl> tag which is after the closing </DatasSources> tag
- Right click on the <xsl> tag and choose “Select Tag”. Press delete
- Copy the code from 2nd source link (for SP2010) and paste into the page where you deleted the code
- Save the page and that’s it, now you can enjoy the slider!