!!! %html

%head
  %meta(http-equiv="content-type" content="text/html; charset=utf-8")
  %meta(http-equiv="content-style-type" content="text/css")
  %meta(http-equiv="content-script-type" content="text/javascript")
  %link(rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.6/slick.css" media="all")
  %link(rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.6/slick-theme.css" media="all")

  %title Pixhibitee
%body
  %div.slider-nav
    - @paths.each do |path|
      %div
        %img{"data-lazy" => path, width: 120, height: 80}

  %div.slider-for{align: "center"}
    - @paths.each do |path|
      %div
        %img{"data-lazy" => path}

  %p
    - @sub_directories.each do |dir|
      [
      %a{href: dir}= dir
      ]

Powered by
%a{href: "http://www.ruby-lang.org/"} Ruby
,
%a{href: "http://www.sinatrarb.com/intro.html"} Sinatra
,
%a{href: "http://haml.info/"} Haml
,
%a{href: "http://kenwheeler.github.io/slick/"} slick
and
%a{href: "https://github.com/myokoym/pixhibitee"} Pixhibitee

%script(src="//code.jquery.com/jquery-1.11.3.min.js")
%script(src="//cdn.jsdelivr.net/jquery.slick/1.5.6/slick.min.js")

:javascript
  (function() {
    $(document).ready(function() {
      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        autoplay: true,
        autoplaySpeed: 10000,
        asNavFor: '.slider-nav'
      });
      var responsives = new Array(20);
      for (var i = 0; i < 20; i++) {
        var slides = 20 - i;
        responsives[i] = {
          breakpoint: (140 * slides),
          settings: {
            slidesPerRow: slides,
            slidesToShow: slides
          }
        };
      }
      $('.slider-nav').slick({
        adaptiveHeight: true,
        asNavFor: '.slider-for',
        arrows: true,
        dots: true,
        centerMode: true,
        focusOnSelect: true,
        slidesPerRow: 8,
        slidesToShow: 8,
        slidesToScroll: 1,
        responsive: responsives
      });
    });
  }())