CSS-Tricks AnythingSlider in SharePoint

Posted: December 7th, 2009 | Author: davecavins | Filed under: SharePoint Design, Web Design | Tags: CSS-Tricks, Data View Web Part, jQuery, SharePoint, xsl | 45 Comments »

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

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.

1 Akram said at 11:47 pm on January 11th, 2010:
very nice post, i am looking for a solution where i can show latest picture as well as picture archive, i am a novice.
2 Greg E said at 9:33 am on January 12th, 2010:
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?
3 davecavins said at 7:24 am on January 13th, 2010:
@ Akram for showing the latest picture you could use a dataview webpart and set it to only show one item at a time. In the xsl you could also provide a link back to the full picture library archive. Also you may try using the solution I posted here: http://davecavins.com/2009/11/slideshow-with-captions/

Do you just want to show one image or a slideshow?
4 davecavins said at 7:34 am on January 13th, 2010:
@ 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 said at 8:56 am on January 14th, 2010:
Great work…I tried setting this up on my SP site but cant get the arrrows for the slider to display. Can any one help me?
6 davecavins said at 5:31 pm on January 14th, 2010:
@Marc – check the url to the image in the css file.
7 Marc said at 7:46 pm on January 14th, 2010:
Dave
Figured it out shortly after posting, works like a charm,again Great Work…
8 davecavins said at 1:43 pm on January 15th, 2010:
@Marc – glad to hear you got it working.
9 Marc said at 11:45 am on January 16th, 2010:
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.
10 davecavins said at 9:11 am on January 19th, 2010:
@Marc – Sounds like a really nice solution. Good luck.
11 alex talarico said at 2:04 pm on January 29th, 2010:
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.
12 davecavins said at 7:21 pm on January 31st, 2010:
I have tried my version in IE6 and it was a little slow too. I also had to include a png fix so the arrows would not look funny.
13 michael said at 8:19 pm on January 31st, 2010:
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?
14 Vidya said at 11:17 am on February 17th, 2010:
Hi Dave,

I am new to this, can you tell me where should i put the downloaded files?

Thanks,
Vidya
15 davecavins said at 12:46 pm on February 18th, 2010:
@Vidya I usually put them in a document library and then just change the links in the code to point to them.
16 Jim Mathew said at 4:15 am on March 11th, 2010:
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
17 patrick said at 8:37 pm on April 11th, 2010:
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
18 davecavins said at 11:15 am on April 12th, 2010:
@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.
19 Eric said at 8:33 am on April 19th, 2010:
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.
20 davecavins said at 10:19 am on April 21st, 2010:
@Eric I had a reference to the script in the masterpage. Sometimes it does not work when its just in the CEWP.
21 Justin said at 12:41 pm on April 28th, 2010:
Could this same concept be used for anything? I am trying to create an accordian that uses this, but I am having a few issues.
22 Eric said at 11:19 am on April 29th, 2010:
Dave,

I ended up getting it. I had to add another CEWP to one of my bottom web part zones and put the javascript reference there. In one of my zones at the top, I added a CEWP with only the div section and it worked. I tried your solution here: http://davecavins.com/2009/11/slideshow-with-captions/ and was able to get it working. Is it possible to use something other than the s3slider?
23 davecavins said at 1:41 pm on April 29th, 2010:
@ 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.
24 davecavins said at 1:42 pm on April 29th, 2010:
@Eric – yes you can use other jQuery or regular JavaScript code with this but it may require some changes to the xsl
25 Anything Slider in SharePoint – Update | Dave Cavins said at 11:59 am on May 3rd, 2010:
[...] 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. [...]
26 lojack said at 7:06 am on July 16th, 2010:
humm interesting. I found it easier to build the page in html and then in a web part put in code for an iframe.
27 davecavins said at 6:32 am on July 20th, 2010:
@lojack That technique could work well. I try to avoid iframes as much as possible and because I am pulling the contents from a list I could not use a standard HTML page.
28 Aquila said at 6:17 am on August 12th, 2010:
Hi there,

This is awesome, thank you very much. I have recently added this into my SharePoint 2010 site and I can get it basically working so the slider is displayed and the title text shows. However, I am having trouble getting it to display text from the Body column of the Announcements list. There is text in that field but it isn’t being displayed in the slider.

Any thoughts?

Thanks.
29 davecavins said at 8:02 am on August 24th, 2010:
@Aquilla The only thing I can think of is that make the field is named something different in your list in 2010 than what it is in 2007. If the names are not the same the content will not show up.
30 Dan said at 2:36 am on September 30th, 2010:
While I’m relatively new to this level of customisation I felt completely comfortable in having a go at this.

I’ve successfully added the data view web part and linked it to my announcements list, but when I try to do the next step
in SPD 2010 that crucial tag isn’t actually in the page code….? Neither does the code view find a tag.

I’m probably missing something really obvious here… could someone put me on the right track?
31 Dan said at 2:32 am on October 6th, 2010:
Just an update on this, might be useful to other 2010 users.

In SPD 2010 the code will be hidden until you select your data view web-part and choose the ‘customize xslt’ button from the web-part design ribbon. It doesn’t show the code by default.

Really good post though Dave, very helpful to me!
32 davecavins said at 6:08 am on October 13th, 2010:
@ Dan thanks I am glad it was helpful.
33 Gira said at 11:19 am on October 25th, 2010:
I was able to get this to work except for one thing… It keeps displaying the same Announcement item (just the one) even though there are 2 announcements in the list. Any ideas?
34 atos said at 11:43 pm on October 26th, 2010:
thanks for this great tutorial.
I would like to use it on my website but i’m stocked at the second step.

In Site Pages I created a new page and then I added a dataview webpart but i do not see any xsl tags nor DataSources tags!

Help please. if you could post the code of the aspx page that would be helpful. Thanks
35 davecavins said at 8:56 am on November 3rd, 2010:
@Gira Do you have content approval turned on for the list. I am wondering if the other annoucement is just not approvied. Also I would suggest using the code from this post as it has been updated and may fix the problem: http://davecavins.com/2010/04/anything-slider-in-sharepoint-update/.
36 davecavins said at 9:00 am on November 3rd, 2010:
@atos are you looking at the page in SharePoint designer? You may want to try putting the page in a different library or in the root of the site to test it first and then export the web part to the page where you actually want to use it. All the code you should need is in the post, the other code on the .aspx page is unique to your environment so if I posted mine it would not work for you. It uses unique list ID’s that would not match up with your site. Hope this helps.
37 AnythingSlider to Multiple Announcement Lists in SharePoint 2010 « All About SharePoint said at 10:53 pm on November 18th, 2010:
[...] by ken zheng on November 19, 2010 From Dave’s blog, I changed a little bit. First, I upload all the anythingslider into a slider library that can [...]
38 Nigiro said at 3:23 am on December 31st, 2010:
Hi,

I´m trying this and I haven´t luck.

Link is dead: download the anythingSlider plugin from css-tricks.com.

I download from css-tricks.com, but i don´t know if this new version isn´t compatible with your post, because Title & Body appears to be hidden, and arrows were descolocated in the screen.

Could you submit a copy of necesary files that you have used?

Thank you very much.
39 davecavins said at 9:13 am on January 25th, 2011:
@Nigiro you can download the code from here https://github.com/ProLoser/AnythingSlider/downloads the demo is here http://css-tricks.com/examples/AnythingSlider/ If the arrows are out of place it seems like an issue with the CSS code.
40 n3u7r0n said at 10:49 am on February 14th, 2011:
Im having a hard time with the slider to just work in a CEWP.

I uploaded all the files and corrected the index.html. But nothing happens and all the images show up as bulleted list items.
41 vara said at 2:33 am on March 7th, 2011:
Great work. Slide show is good
42 bethany said at 10:16 am on March 30th, 2011:
I work in a restricted environment where IT does not allow us to use SharePoint Designer. Are there directions anywhere for how to use this in a CEWP source code without using Designer? I’m not looking for you tube fancy, just the base model shown above.
43 Brett said at 3:44 am on April 8th, 2011:
Hi Dave, your solutions rock.

One thing, I’m trying to find the Slider.CSS file you mention in the Instructions but can’t find it anywhere in the github.com/ProLoser/AnythingSlider files…

Please help?
44 Abhijit said at 12:26 pm on July 15th, 2011:
Hi Dave,

Killer solution dude !! Seen a lot of people have already implemented the same and are having a lot of success except for me

I did all the possible steps in the procedure , added everything in the right spot (atleast i hope i did… ) However I am ending up with the following error

This Web Part does not have a valid XSLT stylesheet:
Error: A name was started with an invalid character.

'
0

function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
autoPlay: true,
delay: 3000,
startStopped: false,
animationTime: 600,
hashTags: true,
buildNavigation: true,
pauseOnHover: true,
startText: "Go",
stopText: "Stop",
navigationFormatter: formatText
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});

This is my XSL Sheet… Hope Someone can help me out of this situation … I am very green behind ears about Sharepoint…
45 From The Field said at 2:28 pm on November 9th, 2011:
[...] Dave Cavins (his blog), another fan of extending SharePoint with jQuery, then did a great write-up on using the AnythingSlider as a way of displaying Announcements from a SharePoint list: http://davecavins.com/2009/12/css-tricks-anythingslider-in-sharepoint/. [...]