SharePoint Featured Content Slider for 2010

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">&nbsp;</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">&nbsp;</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">&nbsp;</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

Google Chrome

FireFox