<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="src/jquery.skidder.css">
</head>
<body>
<div class="slideshow" style="height: 0; margin-top:15px;overflow: hidden">
<div class="slide"><img src="./img/1.jpg"></div>
<div class="slide"><img src="./img/2.jpg"></div>
<div class="slide"><img src="./img/3.jpg"></div>
<div class="slide"><img src="./img/4.jpg"></div>
<div class="slide"><img src="./img/5.jpg"></div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/smartresize.js"></script>
<script src="src/jquery.skidder.js"></script>
<script type="text/javascript">
$('.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() {}
});
});
});
$(window).smartresize(function(){
$('.slideshow').skidder('resize');
});
</script>