使用方法
引用相关文件
<link type="text/css" rel="stylesheet" href="css/lightSlider.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightSlider.js"></script>
HTML
<ul id="lightSlider">
<li>
<h3>First Slide</h3>
<p>Lorem ipsum Cupidatat quis pariatur anim.</p>
</li>
<li>
<h3>Second Slide</h3>
<p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
</li>
...
</ul>
js调用
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
相关设置
<script type="text/javascript">
$(document).ready(function() {
$("#lightSlider").lightSlider({
slideWidth:270,
slideMargin:0,
slideMove:1,
minSlide:1,
maxSlide:8,
pager:true,
controls:true,
prevHtml:'',
nextHtml:'',
keyPress:true,
thumbWidth:50,
thumbMargin:3,
gallery:false,
currentPagerPosition:'middle',
useCSS:true,
auto: false,
pause: 2000,
loop:true,
easing: '',
speed: 1000,
mode:"slide",
swipeThreshold:10,
onBeforeStart: function(){},
onSliderLoad: function() {},
onBefroreSlide:function(){},
onAfterSlide:function(){},
onBeforeNextSlide: function(){},
onBeforePrevSlide: function(){}
});
});
</script>
公共方法
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#lightSlider").lightSlider();
slider.goToSlide(3);
slider.goToPrevSlide();
slider.goToNextSlide();
slider.getCurrentSlideCount();
slider.refresh();
});
</script>