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.
The Code
Here is the XSL needed to add the web part to the page.
[sourcecode] <XSL><xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param name="dvt_apos">'</xsl:param>
<xsl:param name="ManualRefresh"></xsl:param>
<xsl:param name="dvt_firstrow">1</xsl:param>
<xsl:param name="dvt_nextpagedata" />
<xsl:variable name="dvt_1_automode">0</xsl:variable>
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
<xsl:choose>
<xsl:when test="($ManualRefresh = ‘True’)">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<xsl:call-template name="dvt_1"/>
</td>
<td width="1%" class="ms-vb" valign="top">
<img src="/_layouts/images/staticrefresh.gif" id="ManualRefresh" border="0" onclick="javascript: {ddwrt:GenFireServerEvent(‘__cancel’)}" alt="Click here to refresh the dataview."/>
</td>
</tr>
</table>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="dvt_1"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">Table</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
<xsl:variable name="dvt_RowCount" select="count($Rows)"/>
<xsl:variable name="RowLimit" select="10" />
<xsl:variable name="FirstRow" select="$dvt_firstrow" />
<xsl:variable name="LastRow" select="$FirstRow + $dvt_RowCount – 1" />
<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
<xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0"/>
<xsl:choose>
<xsl:when test="$dvt_IsEmpty">
<xsl:call-template name="dvt_1.empty"/>
</xsl:when>
<xsl:otherwise>
<link rel="stylesheet" type="text/css" href="../SiteAssets/contentslider.css"/>
<script type="text/javascript" src="../SiteAssets/contentslider.js"></script>
<div class="sliderContainer">
<div id="slider1" class="sliderwrapper">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
<xsl:with-param name="FirstRow" select="1" />
<xsl:with-param name="LastRow" select="$LastRow – $FirstRow + 1" />
</xsl:call-template>
</div>
<div id="paginate-slider1" class="pagination"></div>
</div>
<script type="text/javascript">
featuredcontentslider.init({
id:"slider1",
contentsource:["inline",""],
toc: "#increment",
nextprev:["Prev","Next"],
enablefade:[true,0.2],
autorotate:[true,3000],
onChange: function(previndex,curindex){}
})
</script>
</xsl:otherwise>
</xsl:choose>
<xsl:call-template name="dvt_1.commandfooter">
<xsl:with-param name="FirstRow" select="$FirstRow" />
<xsl:with-param name="LastRow" select="$LastRow" />
<xsl:with-param name="RowLimit" select="$RowLimit" />
<xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
<xsl:with-param name="RealLastRow" select="number(ddwrt:NameChanged(”,-100))" />
</xsl:call-template>
</xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:param name="FirstRow" />
<xsl:param name="LastRow" />
<xsl:for-each select="$Rows">
<xsl:variable name="dvt_KeepItemsTogether" select="false()" />
<xsl:variable name="dvt_HideGroupDetail" select="false()" />
<xsl:if test="(position() >= $FirstRow and position() <= $LastRow) or $dvt_KeepItemsTogether">
<xsl:if test="not($dvt_HideGroupDetail)" ddwrt:cf_ignore="1">
<xsl:call-template name="dvt_1.rowview" />
</xsl:if>
</xsl:if>
</xsl:for-each>
</xsl:template>
<xsl:template name="dvt_1.rowview">
<div class="contentdiv">
<img src="{@Image}" alt="{@Title}" align="left"/>
<h2><a href="{@Link_x0020_URL}"><xsl:value-of select="@Title"/></a></h2>
<p><xsl:value-of select="substring(@Body,1,355)"/></p>
<a class="readMoreButton" href="{@Link_x0020_URL}" title="{@Link_x0020_URL.desc}"><xsl:value-of select="@Link_x0020_URL.desc" disable-output-escaping="yes"/>
</a>
</div>
</xsl:template>
<xsl:template name="dvt_1.empty">
<xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>
<table border="0" width="100%">
<tr>
<td class="ms-vb">
<xsl:value-of select="$dvt_ViewEmptyText"/>
</td>
</tr>
</table>
</xsl:template>
<xsl:template name="dvt_1.commandfooter">
<xsl:param name="FirstRow" />
<xsl:param name="LastRow" />
<xsl:param name="RowLimit" />
<xsl:param name="dvt_RowCount" />
<xsl:param name="RealLastRow" />
<table cellspacing="0" cellpadding="4" border="0" width="100%">
<tr>
<xsl:if test="$FirstRow > 1 or $dvt_nextpagedata">
<xsl:call-template name="dvt_1.navigation">
<xsl:with-param name="FirstRow" select="$FirstRow" />
<xsl:with-param name="LastRow" select="$LastRow" />
<xsl:with-param name="RowLimit" select="$RowLimit" />
<xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
<xsl:with-param name="RealLastRow" select="$RealLastRow" />
</xsl:call-template>
</xsl:if>
</tr>
</table>
</xsl:template>
<xsl:template name="dvt_1.navigation">
<xsl:param name="FirstRow" />
<xsl:param name="LastRow" />
<xsl:param name="RowLimit" />
<xsl:param name="dvt_RowCount" />
<xsl:param name="RealLastRow" />
<xsl:variable name="PrevRow">
<xsl:choose>
<xsl:when test="$FirstRow – $RowLimit < 1">1</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$FirstRow – $RowLimit" />
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="LastRowValue">
<xsl:choose>
<xsl:when test="$LastRow > $RealLastRow">
<xsl:value-of select="$LastRow"></xsl:value-of>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$RealLastRow"></xsl:value-of>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="NextRow">
<xsl:value-of select="$LastRowValue + 1"></xsl:value-of>
</xsl:variable>
<td nowrap="nowrap" class="ms-paging" align="right">
<xsl:if test="$dvt_firstrow > 1" ddwrt:cf_ignore="1">
<a>
<xsl:attribute name="href">javascript: <xsl:value-of select="ddwrt:GenFireServerEvent(‘dvt_firstrow={1};dvt_startposition={}’)" />;</xsl:attribute>
Start</a>
<xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes"> </xsl:text>
<a>
<xsl:attribute name="href">javascript: history.back();</xsl:attribute>
<img src="/_layouts/images/prev.gif" border="0" alt="Previous" />
</a>
<xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes"> </xsl:text>
</xsl:if>
<xsl:value-of select="$FirstRow" />
– <xsl:value-of select="$LastRowValue" />
<xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"> </xsl:text>
<xsl:if test="$LastRowValue < $dvt_RowCount or string-length($dvt_nextpagedata)!=0" ddwrt:cf_ignore="1">
<a>
<xsl:attribute name="href">javascript: <xsl:value-of select="ddwrt:GenFireServerEvent(concat(‘dvt_firstrow={‘,$NextRow,’};dvt_startposition={‘,$dvt_nextpagedata,’}’))" />;</xsl:attribute>
<img src="/_layouts/images/next.gif" border="0" alt="Next" />
</a>
</xsl:if>
</td>
</xsl:template>
</xsl:stylesheet> </XSL>
[/sourcecode]
- CSS (contentslider.css) – This file will need to be referenced in the page for it to work properly
- Javascript (contentslider.js) – This file will need to be referenced in the page for it to work properly
- List Template – Change the file extension to stp once you download this file.
Here is what you get
IE7

Internet Explorer 7
Google Chrome

Google Chrome
FireFox

Mozilla Firefox
Hi there,
Thanx for the post, im just trying to use but where do i find the images you used?
Please reply
thanx
@Nelson the only image I used is that stock photo of the people working. I think I pulled that off of a 2007 site or a 2010 team site. I generally add the image as a attachment to the list item and then copy the URL in the image URL field.
[…] There is an updated version of this solution for SharePoint 2010 found here […]