CSS-Tricks AnythingSlider in SharePoint

By /

Chris Coyier from CSS-Tricks built this really cool jQuery plugin that creates a content slider that will support any regular HTML in the slides. This is cool because many sliders I have used had limitations on what could be on the slides and did not offer many of the featuers the AnythingSlider does.

AnythingSlider in SharePoint
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.

Select the auto generated 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.

50 thoughts on “CSS-Tricks AnythingSlider in SharePoint”

  2. Greg E

    This is really cool. I’m playing with it now and I like the style it’s added to my sharepoint page.

    My question is it appears that the AnythingSlider is Left justified in whatever webpart I put it into.

    Is there anyway to center the anythingSlider object in the webzone?

    Reply
    1. davecavins

      @ Greg E, you should be able to center it in the webpart zone by adding some css to the “anythingSlider” div.
      you can try this:
      div.anythingSlider {text-align:center} It may mess up some of the formatting so I would suggest you wrap a div around the slider and use css to center its contents.
      div.sliderwrapper {text-align:center; margin:0 auto;}
      I will experiment with this and see if I can find a good solution.

  5. Marc

    Dave
    Thanks again
    I’m working on creating a SP site that can be used as a employee notification “cork” board that I’ll display on a wall mounted 32′ LCD. I’ll let you know how it goes. I started late friday seting up your slide show with captions on the same site. My goal is to use the anything slider piece to display current annoucements while displaying current posters(pics) using the slide show with captions. These 2 pieces will help maintain the content of the board via SP list/DVWP. I also paln on using the CEWP for current weather and other info.

    Reply
  6. alex talarico

    I integrated this slider to a custom web part because the slider requirements in my case were a bit more than what a dataview would offer…

    But this is a great refreshing post, at least I’m not the only one integrating this on MOSS. The only issue I had was users on IE6 experienced a lag time on loading scripts.

    Reply
  7. michael

    i tried this solution but i can’t get that arrows to show 🙁 i edited the css files to point where the images are but still no luck.

    what am i missing?

    Reply
  9. Jim Mathew

    Amazing work Dave! one question.??? how do i control paging??eg: if i need to display only latest 5 annoucements, how do i achieve that?I’ve tried editing xsl but no luck…please help..

    Rgdz
    Jim

    Reply
  10. patrick

    Hi Dave,
    Just to let you know you did a great job.But how can i show the latest or current anouncement list.Any ideas any time i add a filter it breaks the xslt.

    Rgdz
    Patrick

    Reply
    1. davecavins

      @patrick – I noticed this issue as well. I did some testing in SharePoint Designer and got it to filter but it required rewriting some of the code and adding some parameters. I’ll post an update to this article soon.

  11. Eric

    Dave,

    Where are you referencing jquery? In the past I have just added the reference to a CEW but for some reason it is not working.

    Reply
    1. davecavins

      @ Justin – Yes I use the same basic concept for most of these types of solutions. Just refernece the js files and write the xsl to show the fields you need in the proper html tags.

  15. Pingback: Anything Slider in SharePoint – Update | Dave Cavins

Leave a Reply to Marc Cancel Reply

Your email address will not be published. Required fields are marked *

Scroll to Top