lightslider-支持移动触摸的轻量级jQuery幻灯片插件

标签：简介   示例   firefox   显示   木马   null   document   style   位置   

插件简介

lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备，它可以制作为带缩略图的内容幻灯片，或者制作为无限循环的旋转木马。它的特点还有：

下载地址

在线演示

下载地址：http://www.jqhtml.com/5633.html

功能

• 完全响应式设计，自动适配任何设备。
• 可以单独设置每一个breakpoint。
• 画廊模式中可以创建带缩略图的幻灯片。
• 支持移动手机的swipe和触摸拖拽。
• 可动态添加或删除幻灯片。
• 文件体积小，主题丰富，实现简单。
• 采用CSS过渡效果，不支持CSS过渡效果的浏览器中使用jQuery来回退。
• 提供丰富的回调函数和公开方法。
• 提供自动播放和无限循环的旋转木马模式。
• 支持键盘、箭头和圆点导航。
• 跨浏览器、跨设备：Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone。
• 同一个页面中可以生成多个幻灯片实例。
• 幻灯片的内容可以是图片、视频等。

安装

可以通过npm或bower来安装该幻灯片插件。

$ bower install lightslider
$ npm install lightslider

也可以下载安装包，在页面中引入文件 插件下载地址http://www.jqhtml.com/5633.html
官方地址 http://sachinchoolur.github.io/lightslider/index.html

<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="js/jquery.min.js"></script>
<script src="js/lightslider.js"></script>

使用方法

HTML结构

<ul id="lightSlider">
  <li>
      <h4>First Slide</h4>
      <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
      <h4>Second Slide</h4>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  ...
</ul>

初使化插件

  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });

参数设置示例

  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });
Play with settings
$(document).ready(function() {
    $("#lightSlider").lightSlider({
        item: 3,
        autoWidth: false,
        slideMove: 1, // slidemove will be 1 if loop is true
        slideMargin: 10,
 
        addClass: '',
        mode: "slide",
        useCSS: true,
        cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
        easing: 'linear', //'for jquery animation',////
 
        speed: 400, //ms'
        auto: false,
        loop: false,
        slideEndAnimation: true,
        pause: 2000,
 
        keyPress: false,
        controls: true,
        prevHtml: '',
        nextHtml: '',
 
        rtl:false,
        adaptiveHeight:false,
 
        vertical:false,
        verticalHeight:500,
        vThumbWidth:100,
 
        thumbItem:10,
        pager: true,
        gallery: false,
        galleryMargin: 5,
        thumbMargin: 5,
        currentPagerPosition: 'middle',
 
        enableTouch:true,
        enableDrag:true,
        freeMove:true,
        swipeThreshold: 40,
 
        responsive : [],
 
        onBeforeStart: function (el) {},
        onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {}
    });
});

参数配置

回调函数

公开方法

公开方法示列

<script type="text/javascript">
  $(document).ready(function() {
    var slider = $("#lightSlider").lightSlider();
    slider.goToSlide(3);
    slider.goToPrevSlide();
    slider.goToNextSlide();
    slider.getCurrentSlideCount();
    slider.refresh();
    slider.play(); 
    slider.pause();    
  });
</script>

lightslider-支持移动触摸的轻量级jQuery幻灯片插件

标签：简介   示例   firefox   显示   木马   null   document   style   位置   

原文地址：https://www.cnblogs.com/lalalagq/p/9973517.html