lightSlider

lightSlider Demo

by Emmanuel Garcia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">
<div class="demo">
    <ul id="lightSlider">
        <li data-thumb="https://www.multideas.mx/wp-content/uploads/2018/06/f30d2f.png">
            <img src="http://travelraintree.com/images/resort_sliders/sandcastle/overview/overview1.jpg" alt="" />
        </li>
        <li data-thumb="http://travelraintree.com/images/resort_sliders/sandcastle/overview/overview2.jpg">
            <img src="http://travelraintree.com/images/resort_sliders/sandcastle/overview/overview2.jpg" />
        </li>
        <li data-thumb="http://travelraintree.com/images/resort_sliders/sandcastle/overview/overview3.jpg">
            <img src="http://travelraintree.com/images/resort_sliders/sandcastle/overview/overview3.jpg" />
        </li>
        <li data-thumb="http://travelraintree.com/images/resort_sliders/sandcastle/overview/overview4.jpg">
            <img src="http://travelraintree.com/images/resort_sliders/sandcastle/overview/overview4.jpg" />
        </li>
        </ul></div>

CSS

.demo {
    width:785px;
}
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%;
}

JavaScript

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