slofurno/gist:c0f04641374623cc2e48

## gistfile1.js
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="image.aspx.cs" Inherits="WebApplication1.image" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <style>
    .picture-box{
      height:100%;
      width:auto;
    }

    .slick-image{
       height:auto;
      width:100%;

    }
  </style>
 <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>


</head>

<body style="background-color:dodgerblue">
  <form runat="server">

      <div style="width:600px; margin:0 auto">
      <div class="slick-carosel">
        <asp:Repeater ID="imageCarosel" runat="server">
          <ItemTemplate>
            <div><img class="slick-image" src="<%# Eval("Url") %>" /></div>
          </ItemTemplate>
        </asp:Repeater>
        </div>
      </div>

    <div style="width:600px; margin:0 auto">
    <div>
      <div id="picture-display" style="width:600px; height:400px;"></div>
      <br />
      <button id="prev-image" type="button">Previous</button><button id="next-image" type="button">Next</button>
    </div>
    </div>

  <script>


    (function () {
      var el = document.getElementById("picture-display");
      var prev = document.getElementById("prev-image");
      var next = document.getElementById("next-image");

      var imageurls = [<%= imagedata %>];
      var index = 0;
      var len = imageurls.length;

      var images = imageurls.map(function (url) {

        var img = document.createElement('img');
        img.className = "picture-box"
        img.src = url;
        return img;
      });

      var displayImage = function () {
        el.innerHTML = "";
        el.appendChild(images[index]);
      };

      prev.addEventListener("click", function (e) {
        index--;
        if (index < 0) {
          index = len - 1;
        }
        displayImage();
      });

      next.addEventListener("click", function (e) {
        index++;
        if (index >= len) {
          index = 0;
        }
        displayImage();
      });

      displayImage();

    })();


  </script>
    </form>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
  <script>
    $(document).ready(function () {
      $('.slick-carosel').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true
      });
    });

  </script>
</body>
</html>

## gistfile2.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Diagnostics;
using System.IO;
using System.Text;

namespace WebApplication1
{
  public partial class image : System.Web.UI.Page
  {

    public string imagedata;

    protected void Page_Load(object sender, EventArgs e)
    {

      var directory = Server.MapPath("images");
      var directoryinfo = new DirectoryInfo(directory);
      var images = directoryinfo.GetFiles();

      var imageurls = images.Select(x => "images" + "/" + x.Name).ToArray();

      var json = new StringBuilder();

      for(var i = 0;i<imageurls.Length;i++)
      {
        if (i > 0)
        {
          json.Append(",");
        }

        json.Append("\'");
        json.Append(imageurls[i]);
        json.Append("\'");
      }

      imagedata = json.ToString();


      var slickUrls = imageurls.Select(x => new { Url = x }).ToList();
      imageCarosel.DataSource = slickUrls;
      imageCarosel.DataBind();

    }
  }
}
	<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="image.aspx.cs" Inherits="WebApplication1.image" %>

	<!DOCTYPE html>

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<title></title>
	<style>
	.picture-box{
	height:100%;
	width:auto;
	}

	.slick-image{
	height:auto;
	width:100%;

	}
	</style>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>


	</head>

	<body style="background-color:dodgerblue">
	<form runat="server">

	<div style="width:600px; margin:0 auto">
	<div class="slick-carosel">
	<asp:Repeater ID="imageCarosel" runat="server">
	<ItemTemplate>
	<div><img class="slick-image" src="<%# Eval("Url") %>" /></div>
	</ItemTemplate>
	</asp:Repeater>
	</div>
	</div>

	<div style="width:600px; margin:0 auto">
	<div>
	<div id="picture-display" style="width:600px; height:400px;"></div>
	<br />
	<button id="prev-image" type="button">Previous</button><button id="next-image" type="button">Next</button>
	</div>
	</div>

	<script>



	(function () {
	var el = document.getElementById("picture-display");
	var prev = document.getElementById("prev-image");
	var next = document.getElementById("next-image");

	var imageurls = [<%= imagedata %>];
	var index = 0;
	var len = imageurls.length;

	var images = imageurls.map(function (url) {

	var img = document.createElement('img');
	img.className = "picture-box"
	img.src = url;
	return img;
	});

	var displayImage = function () {
	el.innerHTML = "";
	el.appendChild(images[index]);
	};

	prev.addEventListener("click", function (e) {
	index--;
	if (index < 0) {
	index = len - 1;
	}
	displayImage();
	});

	next.addEventListener("click", function (e) {
	index++;
	if (index >= len) {
	index = 0;
	}
	displayImage();
	});

	displayImage();

	})();




	</script>
	</form>
	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
	<script>
	$(document).ready(function () {
	$('.slick-carosel').slick({
	dots: true,
	infinite: true,
	speed: 300,
	slidesToShow: 1,
	adaptiveHeight: true
	});
	});

	</script>
	</body>
	</html>
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.UI;
	using System.Web.UI.WebControls;
	using System.Diagnostics;
	using System.IO;
	using System.Text;

	namespace WebApplication1
	{
	public partial class image : System.Web.UI.Page
	{

	public string imagedata;

	protected void Page_Load(object sender, EventArgs e)
	{

	var directory = Server.MapPath("images");
	var directoryinfo = new DirectoryInfo(directory);
	var images = directoryinfo.GetFiles();

	var imageurls = images.Select(x => "images" + "/" + x.Name).ToArray();

	var json = new StringBuilder();

	for(var i = 0;i<imageurls.Length;i++)
	{
	if (i > 0)
	{
	json.Append(",");
	}

	json.Append("\'");
	json.Append(imageurls[i]);
	json.Append("\'");
	}

	imagedata = json.ToString();


	var slickUrls = imageurls.Select(x => new { Url = x }).ToList();
	imageCarosel.DataSource = slickUrls;
	imageCarosel.DataBind();

	}
	}
	}