《jQuery幻燈片輪播插件Slippry 使用方法 配置參數》 配置參數！
jQuery幻燈片輪播插件Slippry 等比例響應式
演示網址：
https://www.b5b6.com/demo/Slippry/
HTML結構：
<!DOCTYPE html>
<html>
<head>
<title>slippry demo</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="slippry.min.js"></script>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="slippry.css">
<style>
body{margin: 0;padding: 0;font-family: 'source-sans-pro', Helvetica, Arial, sans-serif;font-size: 14px;}
.demo_wrapper {width: 60%;margin: 0 auto;}
@media only screen and (max-device-width: 800px), screen and (max-width: 800px) {
.demo_wrapper {width: 80%;}
}
.demo_block {width: 100%;}
</style>
</head>
<body>
<section class="demo_wrapper">
<article class="demo_block">
<ul id="demo1">
<li><a href="#slide1"><img src="img/image-1.jpg" alt="This is caption 1 <a href='#link'>Even with links!</a>"></a></li>
<li><a href="#slide2"><img src="img/image-2.jpg" alt="This is caption 2"></a></li>
<li><a href="#slide3"><img src="img/image-4.jpg" alt="And this is some very long caption for slide 3. Yes, really long."></a></li>
</ul>
<a href="#glob" class="prev">Prev</a> /
<a href="#glob" class="next">Next</a> ||
<a href="#glob" class="init">Init</a> |
<a href="#glob" class="reset">Destroy</a> |
<a href="#glob" class="reload">Reload</a> ||
<a href="#glob" class="stop">Stop</a> |
<a href="#glob" class="start">Start</a>
</article>
</section>
<script>
$(function() {
var demo1 = $("#demo1").slippry({
//transition: 'fade', //淡入淡出
transition: 'horizontal', // 左滾
useCSS: true,
speed: 600,
pause: 3000,
auto: true,
preload: 'visible',
autoHover: false
});
//暫停
$('.stop').click(function () {
demo1.stopAuto();
});
//開始
$('.start').click(function () {
demo1.startAuto();
});
//上一頁
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
//下一頁
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
//重置
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
//重來
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
//最初
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
</script>
</body>
</html>下載：