<script language="javascript" type="text/javascript" src="./js/jquery.lightSlider.js"></script> 

<style>

    #bx_gallery {position:relative;}

    #bx_gallery .photo_slide {position:absolute;top:25%;width:100%;}

</style>

<ul id="imageGallery">

    <li data-thumb="{domain}/m150106_000.jpg"><img src="{domain}/m150106_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_000.jpg"><img src="{domain}/m150105_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_001.jpg"><img src="{domain}/m150105_001.jpg" /></li>

    <li data-thumb="{domain}/m150106_000.jpg"><img src="{domain}/m150106_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_000.jpg"><img src="{domain}/m150105_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_001.jpg"><img src="{domain}/m150105_001.jpg" /></li>

    <li data-thumb="{domain}/m150106_000.jpg"><img src="{domain}/m150106_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_000.jpg"><img src="{domain}/m150105_000.jpg" /></li>

    <li data-thumb="{domain}/m150105_001.jpg"><img src="{domain}/m150105_001.jpg" /></li>

</ul>

<script type="text/javascript">

<!--

    $('#imageGallery').lightSlider({

        gallery:true,

        item:1,

        thumbItem:4,

        slideMargin:0,

        mode:'fade',

        currentPagerPosition:'left',

        controls         : true,  // Whether to display prev/next buttons.

        loop             : true, // Allows to go to the other end of the gallery at first/last img.

        auto             : true, // Enables slideshow mode.

        pause            : 3000,  // Delay (in ms) between transitions in slideshow mode.

        escKey           : false,  // Whether lightGallery should be closed when user presses "Esc".

        closable         : false,  //allows clicks on dimmer to close gallery

        onSliderLoad: function(el) {

            el.lightGallery();

        }

    });

//-->

</script>