Hi raheem,

An easy way to create an image slider in Umbraco, by to add a media picker to the document type where your clients needs to be able to create a slider.

In the media picker your client just need to choose the folder, with the images, and then you will create the slider on the page. You can use the Razor code below to loop through the images in the folder. The Razor file can be a partial view or a partial view macro file. You can use this code in both type of files.

@if(CurrentPage.HasValue("mediaPickerAlias"))
{
    var media = Umbraco.Media(CurrentPage.mediaPickerAlias);
    var selection = media.Children("Image");

    if (selection.Any())
    {
        <ul>
            @foreach (var item in selection)
            {
                <li>
                    <img src="@item.umbracoFile" alt="@item.Name" />
                </li>
            }
        </ul>
    }
}

For the framework to the slider I think that you should take a look at the slick slider. You can find it here http://kenwheeler.github.io/slick/. This framework is also responsive.

You can find the documentation about how you should structure your HTML by clicking the usage link.

Remember to change the mediaPickerAlias so it match your alias of the media picker on the document type.

If you don´t want to use Razor you can also use XSLT. This snippet below loop through the images in the folder, like the Razor example.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY nbsp "&#x00A0;">
]>
<xsl:stylesheet
 version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
 xmlns:umbraco.library="urn:umbraco.library"
 exclude-result-prefixes="msxml umbraco.library">

  <xsl:output method="xml" omit-xml-declaration="yes"/>
  <xsl:param name="currentPage"/>
  <xsl:template match="/">

      <xsl:if test="$currentPage/mediaPickerAlias !=''">

        <xsl:variable name="images" select="$currentPage/mediaPickerAlias"/>

          <xsl:variable name="mediaItems" select="umbraco.library:GetMedia($images, true())"/>
          <xsl:for-each select="$mediaItems/Image">
            <xsl:variable name="picFile" select="umbracoFile"/>

          <!-- this can be used to link to the image -->

              <xsl:element name="a">
                <xsl:attribute name="href">
                  <xsl:value-of select="./umbracoFile" />
                </xsl:attribute>


                <img>
                  <xsl:attribute name="src">
                    <xsl:value-of select="$picFile"/>
                   </xsl:attribute>
                </img>

              </xsl:element>

          </xsl:for-each>
        </xsl:if>
  </xsl:template>
</xsl:stylesheet>

Again remember to change the $currentPage/mediaPickerAlias, so it match yours alias for the media picker.

Hope this helps,

/Dennis

is working on a reply...