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
<div class="flexslider"> <ul class="slides">

Middle part of HTML content which will be repeated for each image
<li> <img src="{@FileRef}" /> </li>
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
</ul> </div>

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'

    <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:output indent="yes" method="html"/>
    <xsl:variable name="rows" select="/dsQueryResponse/Rows/Row"/>
  <xsl:template match="/">
        <xsl:if test="count($rows) &gt; 0">
            ##TOP_CONTENT##       
     <xsl:for-each select="$rows">
    <!-- output items -->
    ##MIDDLE_CONTENT##
     </xsl:for-each>
            ##BOTTOM_CONTENT##            
        </xsl:if>    
    </xsl:template>
</xsl:stylesheet>

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:

<link href="/SharedLib/flexslider.css" rel="stylesheet" /> <script src="/SharedLib/jquery-1.11.2.min.js"></script> <script src="/SharedLib/jquery.flexslider-min.js"></script> <style> .flexslider{ width:500px; margin:0 auto; } </style> <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function () { $('.flexslider').flexslider({ animation: "slide" }); }); </script>

Save page and you should see slider now.