lightSlider

lightSlider Demo

by georgie

HTML

<script src="http://sachinchoolur.github.io/lightslider/lightSlider/js/jquery.lightSlider.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightslider/lightSlider/css/lightSlider.css">
<a class='start' href='#'>start</a>

<div class="demo outerContainer">
    
</div>

CSS

.demo {
    width:75%;
}
ul {
    list-style: none outside none;
    padding-left: 0;
    margin-bottom:0;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
img {
    display: block;
    max-width: 100%;
    width: 200px;
}

.outerContainer{
    width: 75%;
    outline: 1px solid red;
}

JavaScript

NO_CACHE = false;

var createSliderDOM = function(){
    console.log('createSliderDOM');
    n = 0;
    var container = $('<ul></ul>')
    container.attr('id','lightSlider');

    while(n++ < 10){
        var r = NO_CACHE ? Math.random() : 1;
        
        var el = $('<li></li>')
        el.data('thumb', 'http://sachinchoolur.github.io/lightslider/img/thumb/cS-'+n+'.jpg')
        
        var img = $('<img/>');
        img.attr('src','http://sachinchoolur.github.io/lightslider/img/cS-'+n+'.jpg?r='+r);
        img.appendTo(el)

        container.append(el)
    }
    
    $('.demo').append(container);
    return container;
}

$('.start').click(function(){
    var slider = createSliderDOM();
    slider.lightSlider({
        pager:false,
        autoWidth: true,
        slideMargin: 10,
        item: 5
    });
});