<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="./lib/imagesloaded.js"></script>
  <script src="./lib/smartresize.js"></script>
  <script src="../src/jquery.skidder.js"></script>

  <script>
    $('.slideshow').each( function() {
      var $slideshow = $(this);
      $slideshow.imagesLoaded( function() {
        $slideshow.skidder({
          slideClass    : '.slide',
          animationType : 'css',
          scaleSlides   : true,
          maxWidth : 1300,
          maxHeight: 500,
          paging        : true,
          autoPaging    : true,
          pagingWrapper : ".skidder-pager",
          pagingElement : ".skidder-pager-dot",
          swiping       : true,
          leftaligned   : false,
          cycle         : true,
          jumpback      : false,
          speed         : 400,
          autoplay      : false,
          autoplayResume: false,
          interval      : 4000,
          transition    : "slide",
          afterSliding  : function() {},
          afterInit     : function() {}
        });
      });
    });

    // $('.slideshow-nocycle').each( function() {
    //   var $slideshow = $(this);
    //   $slideshow.imagesLoaded( function() {
    //     $slideshow.skidder({
    //       slideClass    : '.slide',
    //       scaleSlides   : true,
    //       maxWidth : 1300,
    //       maxHeight: 500,
    //       leftaligned   : true,
    //       cycle         : false,
    //       paging        : true,
    //       swiping       : true,
    //       jumpback      : false,
    //       speed         : 400,
    //       autoplay      : false,
    //       interval      : 4000,
    //       afterSliding  : function() {}
    //     });
    //   });
    // });

    $(window).smartresize(function(){
      $('.slideshow').skidder('resize');
    });

  </script>