Item Limit

To change the number of items displayed use the code below.

<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">&apos;</xsl:param>
	<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:call-template name="dvt_1"/>
	</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="RowLimit" select="3" />
		<xsl:variable name="dvt_RowCount" select="count($Rows)" />
		<xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
		   <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
		<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"></script> <div class="anythingSlider">
			<div class="wrapper">
		<ul>
			<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="$RowLimit" />
			</xsl:call-template>
		</ul>
		</div>
        </div>
	</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() &gt;= $FirstRow and position() &lt;= $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">
		<li>
		<div class="textSlide">
			<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
			<xsl:value-of select="@Body" disable-output-escaping="yes" />
		</div>
		</li></xsl:template>
	</xsl:stylesheet>
</Xsl>

On line 13 change the RowLimit to the number of items you would like to show. For example if you wanted to show 6 items you would change line 13 to this

<xsl:variable name="RowLimit" select="6" />

Sort Order

Changing the sort order can be done through SharePoint Designer once you are using the updated code

• Click on the arrow to show the common data view tasks.
• Click on ‘Sort and Group’ the second option.
• Make changes as needed.

If dont want to do it that way there is another  option.

• Open the page in SharePoint Designer
• In code view find this ‘SharePoint:SPDataSource’ you will need to edit this tag.
• Find the SelectCommand and add/edit the OrderBy attibute.
• See the code below for an example. (Ordered by Created Date  in Ascending order). Its basically a CAML query.

<SharePoint:SPDataSource runat="server" DataSourceMode="List" SelectCommand="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&quot;Created_x0020_Date&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;/OrderBy&gt;&lt;/Query&gt;&lt;/View&gt;"

 If you are not sure how to get it all set up look to my previous post on the Anything Slider.  If you have questions please post a comment.

Related posts:

1. CSS-Tricks AnythingSlider in SharePoint
2. Dynamic Drive’s Featured Content Slider in Sharepoint
3. Switch List Displays with JQuery and CSS

AnythingSlider in SharePoint

Setup

To get this working in SharePoint you will need to make sure you have a reference to jQuery in the page somewhere as well as a list for the slider to read from. For my example I am using an out of the box annoucements list.  You will also need the files for the plugin download the anythingSlider plugin from css-tricks.com.

• In SharePoint Designer add a dataview webpart to the page with any field from your annoucements list.
• Switch to code view and find the first <xsl> tag. It should be right after the closing <DatasSources> tag. 
• Right click on the tag and choose “Select Tag”. Press delete, don’t worry we will be adding in our own xsl.



• Paste the following xsl into the page where you deleted the code.

<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">&apos;</xsl:param>
	<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:call-template name="dvt_1"/>
	</xsl:template>
	<xsl:template name="dvt_1">
		<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
		    <link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script> <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
        function formatText(index, panel) {
		  return index + &quot;&quot;;
	    }
        $(function () {
            $(&apos;.anythingSlider&apos;).anythingSlider({
                easing: &quot;easeInOutExpo&quot;,
                autoPlay: true,
                delay: 3000,
                startStopped: false,
                animationTime: 600,
                hashTags: true,
                buildNavigation: true,
         	pauseOnHover: true,
     	startText: &quot;Go&quot;,
     	stopText: &quot;Stop&quot;,
	navigationFormatter: formatText
            });
            $(&quot;#slide-jump&quot;).click(function(){
                $(&apos;.anythingSlider&apos;).anythingSlider(6);
            });
        });
    </script>
<div class="anythingSlider">
	<div class="wrapper">
		<ul>
		<xsl:call-template name="dvt_1.body">
			<xsl:with-param name="Rows" select="$Rows" />
			</xsl:call-template>
		</ul>
		    </div>
        </div>
	</xsl:template>
	<xsl:template name="dvt_1.body">
		<xsl:param name="Rows" />
		<xsl:for-each select="$Rows">
			<xsl:call-template name="dvt_1.rowview" />
		</xsl:for-each>
	</xsl:template>
	<xsl:template name="dvt_1.rowview">
		<li>
		<div class="textSlide">
<!-- display the item title and a link to the item -->
<h3><a href="/{@FileDirRef}/DispForm.aspx?ID={@ID}" title="{@Title}"><xsl:value-of select="@Title" /></a></h3>
<!-- display the body of the item  -->
	<xsl:value-of select="@Body" disable-output-escaping="yes" />
	</div>
	</li></xsl:template>
</xsl:stylesheet>
</Xsl>

• Important: Adjust the links on the code so that point to your local copies of the css easing and plugin files.

Notes

 I made a few small changes in the css file to make things work better with SharePoint.  In page.css file I deleted several of the classes so they would not interfere with SharePoint’s styles.  In the xsl I used a div with a class of  .textslide to wrap the content so I had to change that in page.css as well.  To keep long annoucements from breaking the design I set the overflow on the .textslide div to hidden. Below is the code I used in page.css.  

/*hide content that is too long */
.textSlide { padding: 10px 30px; overflow:hidden; }
.textSlide h3  { font: 20px Georgia, Serif; margin-bottom:12px; }
.textSlide h4  { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul  { list-style: disc; margin: 0 0 0 25px; }
.textSlide ul li  { display: list-item; }

 I did not make any changes to slider.css. It may be easier to just combine the tow files to keep things simple and reduce page load times.

Conclusion

The AnythingSlider plugin is lightweight, powerful and easy to customize.  Adding this type of functionality that is common on regular websites to a SharePoint site can help guide users to important information and of course make your site ‘cooler’ than the average SharePoint site. 

The code above just shows all the items in the list but once you have it working it is easy to add your own sort/filter parameters to the data view so only certain items are shown.

The slider could also be implemented to run off of the SharePoint list web service the same way I did in this post.  If you have any questions or comments feel free to post.

Related posts:

1. Anything Slider in SharePoint – Update
2. Displaying a rotating header image with caption
3. Dynamic Drive’s Featured Content Slider in Sharepoint