index.jade

doctype html5
html
  head
    meta(charset='utf8')
    title coffee-DragSlider Demo
    link(rel='stylesheet', href='styles/coffee-drag-slider.css')
    link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css')
  body
    style.
      .container {
        max-width: 940px;
        margin: auto;
      }
      .slider li{
        height: 400px!important;
        background: red;
      }

      .slider li:nth-of-type(2){
        background: blue;
      }

      /**
        * (C)Leanest CSS spinner ever
        */
          @keyframes spin {
          to {
            -webkit-transform: rotate(1turn);
          }
      }
        .progress {
        position: absolute;
        display: inline-block;
        width: 5em;
        height: 5em;
        margin: 0 .5em;
        font-size: 12px;
        text-indent: 999em;
        overflow: hidden;
        -webkit-animation: spin 1s infinite steps(8);
        top: 50%;
        left: 50%;
        margin-top: -2.5em;
        margin-left: -2.5em;
        z-index: 99999;
      }
        .small.progress {
        font-size: 6px;
      }
        .large.progress {
        font-size: 24px;
      }
        .progress:before,
      .progress:after,
      .progress > div:before,
      .progress > div:after {
        content: '';
        position: absolute;
        top: 0;
        left: 2.25em;
        width: .5em;
        height: 1.5em;
        border-radius: .2em;
        background: #eee;
        box-shadow: 0 3.5em #eee;
        -webkit-transform-origin: 50% 2.5em;
      }
        .progress:before {
        background: #555;
      }
        .progress:after {
        -webkit-transform: rotate(-45deg);
        background: #777;
      }
        .progress > div:before {
        -webkit-transform: rotate(-90deg);
        background: #999;
      }
        .progress > div:after {
        -webkit-transform: rotate(-135deg);
        background: #bbb;
      }


    .container
      slider(data-slider='{"draggable": true, "cycle": true, "autoHideBtns": false}')
        section.sliderViewport
          ul.sliderTrack
            li item-1
            li item-2
            li item-3

    script(src='//code.jquery.com/jquery-1.11.0.min.js')
    script(src='js/src/coffee-drag-slider.js')