Monday, April 27, 2015

SharePoint 2013 Picture Library to Slider / Carousel

Using OTB Picture Library to show images Slider / Carousel.
You can use any plugin you wish, I am going to show you how you actually generate required HTML.

I have supposed you have created your picture library which already contains images.

Now to convert it into Slider / Craouse, follow these steps:

Step 1: Create a XSL file which will actually generate required HTML

I am here trying to generate required HTML for FlexSlider2

Top part of HTML content

Middle part of HTML content which will be repeated for each image

You can use following tokens
  • @FileRef Image file URL
  • @Title Title of image
  • @Description Description of image
  • @ImageWidth Image width
  • @ImageHeight Image height
  • @ID Numeric ID of image
  • @UniqueId GUID of image

Note: Put token in curly braces if using in tag's attribure value

Bottom part of HTML content

Click on this button to generate required XSL:

Open text editor and create a text file with above content and name it "piclib-slider.xsl".
Put piclib-slider.xsl file in somewhere in SharePoint, say 'Style Library'

Step 2: Add Picture Library to target page

Navigate to page where you want to put slider
Put the page in Edit mode
On Insert tab click on WebPart and then select your picture library app from Apps group to insert on page

Put URL of XSL file we created in Step 1 above by:
Edit WebPart > Miscellaneous > XSL Link
Finally click on OK button to save it.

Now you should see all images coming up on page.

Step 3: Add Embed Code on page

We'll put Embed Code below our Picture Library WebPart to put initialization script.

Put the page in Edit mode and then:
Go to Insert tab > Embed Code
Put your initialization code, in my case it is:

Save page and you should see slider now.

No comments: