lightSlider 好图片轮播插件 支持移动端

时间：2023-03-09 14:50:54
lightSlider 好图片轮播插件 支持移动端

http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider

https://github.com/sachinchoolur/lightslider

api : http://sachinchoolur.github.io/lightslider/settings.html

demo:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>lightSlider 图片滚动</title>

    <link rel="stylesheet"  href="css/lightslider.css"/>

    <script src="js/jquery.min.js"></script>

    <script src="js/lightslider.js"></script> 

<style>

*{ margin:0; padding:0;}

ul{

    list-style: none outside none;

    padding-left: 0;

    margin: 0;

}

.main{ width:100%; max-width:640px; margin:0 auto; border:ccc 1px solid;}

img{ width:100%;}

.main .test{ width:100%; margin:5% 0; border:red 1px solid;}

</style>

</head>

<body>

<div class="main">

    <p>演示地址：http://sachinchoolur.github.io/lightslider/examples.html</p>

       <p>api:  http://sachinchoolur.github.io/lightslider/settings.html</p>

    <div class="test">

      <!-- 开始 -->

        <ul id="image-gallery" class="gallery list-unstyled cS-hidden">

                <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>

                <li data-thumb="img/thumb/cS-3.jpg">

                    <img src="img/cS-3.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-4.jpg">

                    <img src="img/cS-4.jpg" />

                 </li>

                 <li data-thumb="img/thumb/cS-7.jpg">

                        <img src="img/cS-7.jpg" />

                </li>

                <li data-thumb="img/thumb/cS-8.jpg">

                    <img src="img/cS-8.jpg" />

                </li>

                <li data-thumb="img/thumb/cS-9.jpg">

                    <img src="img/cS-9.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-10.jpg">

                    <img src="img/cS-10.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-11.jpg">

                    <img src="img/cS-11.jpg" />

                 </li>

        </ul>

        <!-- 结束 -->

    </div>

   <div class="test">

      <!-- 开始 -->

        <ul id="tu-gallery" class="gallery list-unstyled cS-hidden">

                <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>

                <li data-thumb="img/thumb/cS-3.jpg">

                    <img src="img/cS-3.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-4.jpg">

                    <img src="img/cS-4.jpg" />

                 </li>

                 <li data-thumb="img/thumb/cS-12.jpg">

                        <img src="img/cS-12.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-13.jpg">

                    <img src="img/cS-13.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-14.jpg">

                    <img src="img/cS-14.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-15.jpg">

                    <img src="img/cS-15.jpg" />

                </li>

        </ul>

        <!-- 结束 -->

    </div>

    <div class="test">

      <!-- 开始 -->

        <ul id="sc-gallery" class="gallery list-unstyled cS-hidden">

                <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>

                <li data-thumb="img/thumb/cS-3.jpg">

                    <img src="img/cS-3.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-4.jpg">

                    <img src="img/cS-4.jpg" />

                 </li>

                 <li data-thumb="img/thumb/cS-12.jpg">

                        <img src="img/cS-12.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-13.jpg">

                    <img src="img/cS-13.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-14.jpg">

                    <img src="img/cS-14.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-15.jpg">

                    <img src="img/cS-15.jpg" />

                </li>

        </ul>

        <!-- 结束 -->

    </div>

    <div class="test">

      <!-- 开始 -->

        <ul id="sr-gallery" class="gallery list-unstyled cS-hidden">

                <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>

                <li data-thumb="img/thumb/cS-3.jpg">

                    <img src="img/cS-3.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-4.jpg">

                    <img src="img/cS-4.jpg" />

                 </li>

                 <li data-thumb="img/thumb/cS-12.jpg">

                        <img src="img/cS-12.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-13.jpg">

                    <img src="img/cS-13.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-14.jpg">

                    <img src="img/cS-14.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-15.jpg">

                    <img src="img/cS-15.jpg" />

                </li>

        </ul>

        <!-- 结束 -->

    </div>

    <div class="test">

      <!-- 开始 -->

        <ul id="vertical" class="gallery list-unstyled cS-hidden">

                <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>

                <li data-thumb="img/thumb/cS-3.jpg">

                    <img src="img/cS-3.jpg" />

                 </li>

                <li data-thumb="img/thumb/cS-4.jpg">

                    <img src="img/cS-4.jpg" />

                 </li>

        </ul>

        <!-- 结束 -->

    </div>

</div>

 <script>

 $(document).ready(function() {

    $('#image-gallery').lightSlider({

        gallery:true,   //显示成图标还是圆点

        item:1,       //大图：每页个数

        thumbItem:3,   //小图：每页个数

        slideMargin: 0,   //大图直接的空隙

        speed:500,   //播放速度

        auto:true,   //自动播放

        loop:true,   //是否开启循环

        mode:'slide',   //出现方式 fade

        keyPress: true,   //键盘控制

        controls: true,  //左右控制箭头

        onSliderLoad: function() {

            $('#image-gallery').removeClass('cS-hidden');

        },

        onAfterSlide: function ($el, scene) {   //滚动后的回调函数   $el:当前   scene：当前索引值

           console.log(scene);

          // $el.goToSlide();  //去最近的幻灯片例:slider.goToSlide(3)

          // $el.goToNextSlide();  //去下一个幻灯片

        }

    });

   $('#tu-gallery').lightSlider({

        gallery:false,   //显示成图标还是圆点

        item:1,       //大图：每页个数

        slideMargin:5,

        speed:500,

        auto:true,

        loop:true,

        enableDrag: true,

        onSliderLoad: function() {

            $('#tu-gallery').removeClass('cS-hidden');   //加载完成图片显示

        }

    });

   $('#sc-gallery').lightSlider({

        gallery:false,   //显示成图标还是圆点

        item:5,       //大图：每页个数

        slideMargin:5,

        slideWidth:200,

        slideMove:4,

        speed:500,

        auto:true,

        loop:true,

        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',

       // autoWidth:true,  //宽度自适应

        //rtl:true,   //反方向

        enableDrag: true,   //是否可以拖动

        currentPagerPosition:'left',

        onSliderLoad: function() {

            $('#sc-gallery').removeClass('cS-hidden');   //加载完成图片显示

        }

    });

   $('#sr-gallery').lightSlider({

        gallery:false,   //显示成图标还是圆点

        item:3,       //大图：每页个数

        slideMargin:5,

        slideWidth:200,

        slideMove:4,

        speed:500,

        auto:true,

        loop:true,

        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',

       // autoWidth:true,  //宽度自适应

        //rtl:true,   //反方向

        enableDrag: true,   //是否可以拖动

        currentPagerPosition:'left',

         keyPress: true,   //键盘控制

        controls: false,  //左右控制箭头

         vertical: false,  //方向

         currentPagerPosition: 'right',

         enableTouch:true,

        onSliderLoad: function() {

            $('#sr-gallery').removeClass('cS-hidden');   //加载完成图片显示

        }

    });

   $('#vertical').lightSlider({

        gallery:false,   //显示成图标还是圆点

        item:2,       //大图：每页个数

        slideMargin:5,

        slideWidth:200,

        slideMove:4,

        speed:500,

        auto:true,

        loop:true,

       // autoWidth:true,  //宽度自适应

        //rtl:true,   //反方向

        enableDrag: true,   //是否可以拖动

        currentPagerPosition:'left',

         keyPress: true,   //键盘控制

        controls: true,  //左右控制箭头

         vertical: true,  //方向

         verticalHeight: 200,  //纵向高度

        onSliderLoad: function() {

            $('#vertical').removeClass('cS-hidden');   //加载完成图片显示

        }

    });

});

</script>

</body>

</html>

lightSlider 好图片轮播插件 支持移动端

lightSlider 好图片轮播插件 支持移动端

lightSlider 好图片轮播插件 支持移动端

lightSlider 好图片轮播插件 支持移动端

相关文章