Adding Slider to a SharePoint Using Content by Query Web Part (CQWP)

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.

Most slider is a JavaScript + CSS library. It works with any plain HTML pages in a web browser. So, it doesn’t care with server back-end technology underlying a web page. Whether we use ASP.NET, PHP, or SharePoint, or others; many sliders should work just fine. Slider apps in SharePoint 2013 add extra feature that makes us easier to work with slider on SharePoint. But, without apps, working with slider is not difficult. In this article, we want to show you an example.

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.

Copying layerslider Using Windows Explorer

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:

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:

SliderImages Template

Don’t forget to choose this new SliderImages template in CQWP web part properties:

SliderImages in CQWP 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:

&amp;lt;div class=&amp;quot;layerslider&amp;quot;&amp;gt;
  &amp;lt;!-- slide 1 --&amp;gt;
  &amp;lt;div class=&amp;quot;ls-slide&amp;quot;&amp;gt;
    &amp;lt;!-- background image --&amp;gt;
    &amp;lt;img class=&amp;quot;ls-l&amp;quot; src=&amp;quot;&amp;quot; /&amp;gt;
  &amp;lt;/div&amp;gt;

  &amp;lt;!-- slide 2 --&amp;gt;
  &amp;lt;div class=&amp;quot;ls-slide&amp;quot;&amp;gt;
    &amp;lt;!-- background image --&amp;gt;
    &amp;lt;img class=&amp;quot;ls-l&amp;quot; src=&amp;quot;&amp;quot; /&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;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

Now it’s time to hook the slider into the page. We have to add references to all JavaScript and CSS files of the slider. We can do it from a single page where we want to put the slider. Or, we can put it in master page if it is required to be accessible from any pages within the site. In this article, we use the single page approach. So, in our home.aspx, we add the following code snippet:

&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt;
  .layerslider 
	width: 720px !important;
	height: 364px !important;
  
&amp;lt;/style&amp;gt;

&amp;lt;!-- LayerSlider stylesheet --&amp;gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../SiteAssets/layerslider/css/layerslider.css&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;

&amp;lt;!-- External libraries: jQuery &amp;amp; GreenSock --&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/jquery.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/greensock.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;

&amp;lt;!-- LayerSlider script files --&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/layerslider.transitions.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script src=&amp;quot;../SiteAssets/layerslider/js/layerslider.kreaturamedia.jquery.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
	
&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
	jQuery(&amp;quot;document&amp;quot;).ready(function() 
		jQuery(&amp;quot;.layerslider&amp;quot;).layerSlider(
			pauseOnHover: false,
			skinsPath: '../SiteAssets/layerslider/skins/'
		);
	);
&amp;lt;/script&amp;gt;

We use fixed-width and fixed-height for our slider, so we put inline CSS attributes for this purpose. Then we add references to all CSS and JavaScript files required by LayerSlider that we already stored in SiteAssets library.

Then, JavaScript code is called on document ready event to convert our .layerslider div into slider. Now, we should be able to see our slider inside a SharePoint CQWP:

LayerSlider on SharePoint

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.

Source: Adding Slider to a SharePoint Using Content by Query Web Part (CQWP)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s