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.
<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>
- 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.
For instructions on how to set everything up please see my previous post. Questions or suggestions? Leave them in the comments.
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 […]