SharePoint Featured Content Slider

SharePoint Featured Content Slider for 2010

by with 3 Comments General SharePointSharePoint Design

SharePoint Featured Content Slider

So I rewrote this web part to work a little better in SharePoint 2010. I made a few minor changes and improvements. If you can think of other improvements put them in the comments. Here is the older version.

Whats new

  • Added an order field to the List template to allow more control of the display order. In the list template this field is setup to require unique values.
  • Re-wrote the CSS to include some new CSS3 enhancements. If you are using a newer browser the slider will look better.
  • Tested across muliple browsers. See screenshots below.
slider

Dynamic Drive’s Featured Content Slider in Sharepoint

by with 23 Comments SharePoint DesignWeb Design

There is an updated version of this solution for SharePoint 2010 found here

I have used Dynamic Drive’s Featured Content Slider on a couple of recent projects and wanted to see if I could get it working in SharePoint. There were several key requirements:

  1. User can easily add items
  2. Users  can choose a style for each item
  3. Expired Items must not show
  4. Each item will have a Title, Body and a customizable “read more” link.

Here’s how I did it.

Dynamic Drive's Featured Content Slider in Sharepoint

Featued content slider

 

The list

First I created a custom list to store the slider items.  These are the columns I used:

  • Title – Single Line of text
  • Body – Multiple Lines of text
  • Link URL – HyperLink
  • Expiration – Date and Time (expired items will not be shown)
  • Image – Picture
  • Style – Choice  (we will use this column to allow users to choose the style of each item)

On the page I used a DataView WebPart to display the Title, Body, Image and Link URL columns.   Using Sharepoint Designer I setup filtering on the expiration date.  To do this in design view right click on the data view webpart and bring up the “Common Data View Tasks ” box and choose Filter.  In the window I set the conditional statement so that items would only be shown if the expiration date was greater than today.