Minimum and Maximum Slides
$(document).ready(function() {
$('#minMax').lightSlider({
minSlide:2,
maxSlide:4,
slideMargin:5,
slideWidth:200
});
});
SlideMove
$(document).ready(function() {
$('#slideMove').lightSlider({
slideMove:2,
slideMargin:4,
slideWidth:200
});
});
Image Gallery
$(document).ready(function() {
$('#imageGallery').lightSlider({
gallery:true,
minSlide:1,
maxSlide:1,
currentPagerPosition:'left'
});
});
<ul id="imageGallery">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
</ul>
Fade Transition
$(document).ready(function() {
$('#fade').lightSlider({
minSlide:1,
maxSlide:1,
mode:'fade'
});
});
Public Methods
$(document).ready(function() {
var slider = $('#publicMethods').lightSlider({
slideMargin:4,
slideWidth:200,
loop:false
});
$('#goToSlide').click(function(){
slider.goToSlide(3);
});
$('#goToPrevSlide').click(function(){
slider.goToPrevSlide();
});
$('#goToNextSlide').click(function(){
slider.goToNextSlide();
});
$('#getCurrentSlideCount').click(function(){
slider.getCurrentSlideCount();
});
$('#refresh').click(function() {
var newEl = ' <li> <a href="javascript:void(0)"><img src="img/cS-1.jpg" /></a> </li>';
$('#publicMethods').prepend(newEl);
slider.refresh();
});
$('#play').click(function(){
slider.play();
});
$('#pause').click(function(){
slider.pause();
});
});