!!! %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 }); }); }())