lightSlider

index.html

<div class="demo">
    <ul id="lightSlider">
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
        </li>
        <li data-thumb="https://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
            <img src="https://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
        </li>
    </ul>
</div>

lightslider.markdown

lightSlider

lightSlider demo

A Pen by Sachin choolur on CodePen.

License.

script.js

$('#lightSlider').lightSlider({
    gallery: true,
    item: 1,
    loop:true,
    slideMargin: 0,
    thumbItem: 9
});

scripts

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//sachinchoolur.github.io/lightslider/dist/js/lightslider.js"></script>

style.css

.demo {
    width:450px;
}
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;
    height: auto;
    max-width: 100%;
}

styles

<link href="//sachinchoolur.github.io/lightslider/dist/css/lightslider.css" rel="stylesheet" />