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.
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">'</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 + "";
}
$(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);
});
});
</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.
humm interesting. I found it easier to build the page in html and then in a web part put in code for an iframe.
@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.
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.
@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.
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?
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!
@ Dan thanks I am glad it was helpful.
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?
@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/.
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
@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.
Pingback: AnythingSlider to Multiple Announcement Lists in SharePoint 2010 « All About SharePoint
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.
@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.
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.
Great work. Slide show is good
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.
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?
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…
Pingback: From The Field
HI
plEASE TELL ME from where can i get page.css and slider.css..please