Modern web site usually comes with slider. SharePoint doesn’t have slider feature by default, but SharePoint is a modern web site too. So, SharePoint should be able to display slider. Yes it can, and it’s easy. We don’t have to create slider from scratch in SharePoint. It is available as separate product that can be added to SharePoint. Also if you use SharePoint 2013, you can find a lot of slider apps.
There are so many slider library available on the internet. Let us mention some of them: Revolution Slider, LayerSlider, FlexSlider, Nivo Slider, and so on. We will use LayerSlider in this post. This choice is made because we have a license of it and we already used it in one of our projects. Unfortunately it is not free: LayerSlider Responsive jQuery Slider Plugin. If you want to try a free slider, you can download FlexSlider.
Now, it’s time to go down to details. We need to use SharePoint Designer for this purpose. We use 2010 version because it will be deployed to SharePoint 2010. But you can follow similar procedure for SharePoint 2013. Here is the step by step of adding Layer Slider to SharePoint:
Step 1 – Upload Layer Slider to SharePoint
After extracting LayerSlider-5.1.0.zip (we use version 5.1.0) you should see several folders. Upload layerslider folder to a library in the SharePoint site where the slider will be added. We prefer to upload it to SiteAssets library. Note: you can use drag and drop folder between your local folder to your SharePoint davwwwroot folder. For example, our site is http://pena-dev:8003, we can access it from Windows Explorer by typing the following address: \\pena-dev@8003\davwwwroot\SiteAssets.
Step 2 – Create and Configure a CQWP Web Part in a SharePoint Page
Our scenario is to use CQWP web part as the source HTML of our slider. The CQWP web part can display images from a Picture Library. This approach eliminates the need to create custom web part. We already wrote several articles about this here:
- Playing Around with Content by Query Web Part (CQWP)
- Using Your Own XSLT in Content by Query Web Part (CQWP)
- Changing CQWP HTML Output Structure
Note that we have to change the HTML structure of CQWP output. By default it uses <ul> and <li> tag. We have to change it to use <div> tag. We can use existing XSL templates on SliderItemStyle.xsl (this is our custom XSLT formatter which was copied from ItemStyle.xsl), but in order to give more freedom on changing tags, we copied existing ClickableImage template, paste it and rename it to SliderImages:
Don’t forget to choose this new SliderImages template in CQWP web part properties:
Our CQWP should construct the HTML output according to the requirement of LayerSlider. From its simple example demo page, the HTML structure of the slider should resemble as the following code snippet:
&lt;div class=&quot;layerslider&quot;&gt; &lt;!-- slide 1 --&gt; &lt;div class=&quot;ls-slide&quot;&gt; &lt;!-- background image --&gt; &lt;img class=&quot;ls-l&quot; src=&quot;&quot; /&gt; &lt;/div&gt; &lt;!-- slide 2 --&gt; &lt;div class=&quot;ls-slide&quot;&gt; &lt;!-- background image --&gt; &lt;img class=&quot;ls-l&quot; src=&quot;&quot; /&gt; &lt;/div&gt; &lt;/div&gt;
Using techniques we already described in Changing CQWP HTML Output Structure, it should be easy to change the output of our CQWP to meet the requirement of LayerSlider.
Step 3 – Hook the Slider
document ready event to convert our
.layerslider div into slider. Now, we should be able to see our slider inside a SharePoint CQWP:
LayerSlider has many features and options that can enrich your SharePoint pages. What we’ve shown so far is the basic or simplest LayerSlider on a page. Our emphasize is on how to use LayerSlider with SharePoint. You can experience with those bells and whistles of LayerSlider to make your SharePoint pages more interactive and interesting.