全功能滑块/轮播插件 - Splide
栏目分类:幻灯片 / 轮播图   发布日期:2021-08-16   浏览次数:

Splide 是一个轻量级、响应式、可访问、移动友好、功能齐全的滑块/轮播插件,用纯 JavaScript 和 CSS/CSS3 实现。

更多功能:

  • 触控功能。支持触摸滑动和鼠标拖动。

  • 基于 CSS3 的平滑滑动和淡入淡出过渡。

  • 图片懒加载。

  • 支持嵌套滑块。

  • 支持 HTML 视频、YouTube 或 Vimeo 视频。

  • 允许在幻灯片上显示多个项目。

  • 自动播放。

  • URL 哈希更改。

  • RTL 模式。水平和垂直方向。

Splide基本用法:

您可以直接在文档中加载必要的 JavaScript 和 CSS 文件。

<!-- 核心 -->
<link rel="stylesheet" href="dist/css/splide.min.css">
<script src="dist/js/splide.min.js"></script>
  
<!-- 视频扩展 -->
<link rel="stylesheet" href="splide-extension-video/dist/css/splide-extension-video.min.css">
<script src="splide-extension-video/dist/js/splide-extension-video.min.js"></script>
  
<!-- URL 哈希更改扩展 -->
<script src="splide-extension-url-hash/dist/js/splide-extension-url-hash.min.js"></script>

将任何内容作为幻灯片插入滑块。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">幻灯片 01</li>
      <li class="splide__slide">幻灯片 02</li>
      <li class="splide__slide">幻灯片 03</li>
      <li class="splide__slide">幻灯片 04</li>
      <li class="splide__slide">幻灯片 05</li>
    </ul>
  </div>
</div>
<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="1.jpg">
        </div>
        幻灯片 1
      </li>
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="2.jpg">
        </div>
        幻灯片 2
      </li>
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="3.jpg">
        </div>
        幻灯片 3
      </li>
    </ul>
  </div>
</div>

可能需要在自动播放模式上使用进度条,指示在转换到下一张幻灯片之前等待的时间。

<div class="splide__progress">
  <div class="splide__progress__bar">
  </div>
</div>

使用默认选项调用滑块插件。

new Splide( '.splide' ).mount();

使用视频扩展创建视频轮播。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide" data-splide-youtube="YOUTUBE 视频地址">
        <img src="cover.jpg">
      </li>
      <li class="splide__slide" data-splide-vimeo="VIMEO 视频地址">
        <img src="cover.jpg">
      </li>
    </ul>
  </div>
</div>
new Splide( '#splide', {
    video: {
      // 选项
    },
}).mount(window.splide.Extensions);

启用 URL 哈希更改扩展。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide" data-splide-hash="slide01"></li>
      <li class="splide__slide" data-splide-hash="slide02"></li>
      <li class="splide__slide" data-splide-hash="slide03"></li>
    </ul>
  </div>
</div>
new Splide( '#splide' ).mount(window.splide.Extensions);

自定义滑块的所有可能选项。

new Splide( '.splide' , {
    /**
     * 确定滑块类型。
     * - 'slide': 常规滑块。
     * - 'loop' : 旋转木马滑块。
     * - 'fade' : 使用淡入淡出过渡更改幻灯片。perPage,拖动选项被忽略。
     *
     * @type {string}
     */
    type: 'slide',
   
    /**
     * 是否在第一张幻灯片之前或最后一张幻灯片之后倒带滑块。
     * 在“loop”模式下,此选项被忽略。
     *
     * @type {boolean}
     */
    rewind: false,
   
    /**
     * 以毫秒为单位的过渡速度。
     *
     * @type {number}
     */
    speed: 400,
   
    /**
     * 倒带时的过渡速度(以毫秒为单位)。
     *
     * @type {number}
     */
    rewindSpeed: 0,
   
    /**
     * 是否在滑块过渡时阻止任何操作。
     * 如果为 false,则在滑块运行时导航、拖动和滑动工作。
     * 即便如此,在循环模式中的某些情况下,它会被迫等待过渡以移动滑块。
     *
     * @type {boolean}
     */
    waitForTransition: true,
   
    /**
     * 定义滑块最大宽度。
     *
     * @type {number}
     */
    width: 0,
   
    /**
     * 定义滑块高度。
     *
     * @type {number}
     */
    height: 0,
   
    /**
     * 修复幻灯片的宽度。允许使用 CSS 格式,例如 10em、80% 或 80vw。
     * 当此选项为假时,每页编号将被忽略。
     *
     * @type {number|string}
     */
    fixedWidth: 0,
   
    /**
     * 固定幻灯片的高度。允许使用 CSS 格式,例如 10em、80vh,但不接受 % 单位。
     * 当此选项为假时,heightRatio 选项将被忽略。
     *
     * @type {number}
     */
    fixedHeight: 0,
   
    /**
     * 通过与滑块宽度的比率确定幻灯片的高度。
     * 当提供 fixedHeight 时,这将被忽略。
     *
     * @type {number}
     */
    heightRatio: 0,
   
    /**
     * 如果为 true,则幻灯片宽度将由元素宽度本身决定。
     * - perPage/perMove 应该 1.
     * - lazyLoad 应该 false.
     *
     * @type {boolean}
     */
    autoWidth: false,
   
    /**
     * 确定每页应显示多少张幻灯片。
     *
     * @type {number}
     */
    perPage: 1,
   
    /**
     * 确定当滑块进入 next 或 perv 时应移动多少张幻灯片。
     *
     * @type {number}
     */
    perMove: 0,
   
    /**
     * 开始索引。
     *
     * @type {number}
     */
    start: 0,
   
    /**
     * 手动确定左侧和右侧应生成多少个克隆。
     * 克隆的总数将是这个数字的两倍。
     *
     * @type {number}
     */
    clones: 0,
   
    /**
     * 如果页面中有多张幻灯片,确定应该聚焦哪张幻灯片。
     * 字符串“center”可用于居中幻灯片。
     *
     * @type {boolean|number|string}
     */
    focus: false,
   
    /**
     * 幻灯片之间的差距。允许使用 CSS 格式,例如 1em。
     *
     * @type {number|string}
     */
    gap: 0,
   
    /**
     * 在水平模式下设置 padding-left/right 或在垂直模式下 padding-top/bottom。
     * 给一个值来为双方设置相同的大小或
     * 做一个不同尺寸的对象。
     * 此外,允许使用 CSS 格式,例如 1em。
     *
     * @example
     * - 10: Number
     * - '1em': CSS format.
     * - { left: 0, right: 20 }: 水平模式下不同大小的对象。
     * - { top: 0, bottom: 20 }: 垂直模式下不同大小的对象。
     *
     * @type {number|string|Object}
     */
    padding: 0,
   
    /**
     * 是否附加箭头。
     *
     * @type {boolean}
     */
    arrows: true,
   
    /**
     * 更改箭头 SVG 路径,如“m7.61 0.807-2.12...”。
     *
     * @type {string}
     */
    arrowPath: '',
   
    /**
     * 是否附加分页(指示器点)。
     *
     * @type {boolean}
     */
    pagination: true,
   
    /**
     * 激活自动播放。
     *
     * @type {boolean}
     */
    autoplay: false,
   
    /**
     * 以毫秒为单位的自动播放间隔。
     *
     * @type {number}
     */
    interval: 5000,
   
    /**
     * 滑块悬停时是否停止自动播放。
     *
     * @type {boolean}
     */
    pauseOnHover: true,
   
    /**
     * 是否在滑块元素聚焦时停止自动播放。
     * True 建议用于可访问性。
     *
     * @type {boolean}
     */
    pauseOnFocus: true,
   
    /**
     * 是否在恢复时重置自动播放计时器的进度。
     *
     * @type {boolean}
     */
    resetProgress: true,
   
    /**
     * 延迟加载图像。
     * 图像 src 必须由 data-splide-lazy 属性提供。
     *
     * - false: 什么都不做.
     * - 'nearby': 仅加载活动幻灯片周围的图像.
     * - 'sequential': 所有图像将按顺序加载.
     *
     * @type {boolean|string}
     */
    lazyLoad: false,
   
    /**
     * 此选项仅在lazyLoad 选项为“nearby”时有效。
     * 确定应预先加载活动幻灯片周围的页数(不是幻灯片)。
     *
     * @type {number}
     */
    preloadPages: 1,
   
    /**
     * 简化 CSS 过渡。例如,linear、ease 或cubic-bezier()。
     *
     * @type {string}
     */
    easing: 'cubic-bezier(.42,.65,.27,.99)',
   
    /**
     * 是否通过键盘控制幻灯片。
     *
     * @type {boolean}
     */
    keyboard: true,
   
    /**
     * 是否允许鼠标拖动和触摸滑动。
     *
     * @type {boolean}
     */
    drag: true,
   
    /**
     * 拖动的角度阈值。
     * 只有当拖动角度小于此阈值时,滑块才会开始移动。
     *
     * @type {number}
     */
    dragAngleThreshold: 30,
   
    /**
     * 确定动作是“flick”还是“swipe”的距离阈值。
     * 当拖动距离超过此值时,动作将被视为“swipe”,而不是“flick”。
     *
     * @type {number}
     */
    swipeDistanceThreshold: 150,
   
    /**
     * 确定动作是“flick”还是“swipe”的速度阈值。
     * 建议使用 0.5 左右。
     *
     * @type {number}
     */
    flickVelocityThreshold: .6,
   
    /**
     * 确定轻弹的力量。数字越大,滑块滑动的距离越远。
     * 建议使用 500 左右。
     *
     * @type {number}
     */
    flickPower: 600,
   
    /**
     * 限制通过轻弹移动的页面数。
     *
     * @type {number}
     */
    flickMaxPages: 1,
   
    /**
     * S滑块方向.
     * - 'ltr': 从左到右.
     * - 'rtl': 从右到左.
     * - 'ttb': 从上到下.
     *
     * @type {string}
     */
    direction: 'ltr',
   
    /**
     * 设置 img src 为其父元素的 background-image。
     * 不同尺寸的图像可以显示为相同尺寸,无需裁剪工作。
     * 需要 fixedHeight 或 heightRatio。
     *
     * @type {boolean}
     */
    cover: false,
   
    /**
     * 是否启用辅助功能(咏叹调和屏幕阅读器文本)。
     *
     * @type {boolean}
     */
    accessibility: true,
   
    /**
     * 是否在可见幻灯片中添加tabindex="0"。
     *
     * @type {boolean}
     */
    slideFocus: true,
   
    /**
     * 确定一个滑块是否是另一个滑块的导航。
     * 使用“sync”API 同步两个滑块。
     *
     * @type {boolean}
     */
    isNavigation: false,
   
    /**
     * 当“focus”不为0时,是否在第一张幻灯片之前或最后一个幻灯片之后修剪空格。
     *
     * @type {boolean}
     */
    trimSpace: true,
   
    /**
     * 默认移动后更新幻灯片状态。
     * 如果为真,它将在移动前更新。
     *
     * @type {boolean}
     */
    updateOnMove: false,
   
    /**
     * 调整大小事件的节流持续时间(以毫秒为单位)。
     *
     * @type {number}
     */
    throttle: 100,
   
    /**
     * 断点定义.
     *
     * @example
     * {
     *   '1000': {
     *     perPage: 3,
     *     gap: 20
     *   },
     *   '600': {
     *     perPage: 1,
     *     gap: 5,
     *   }
     * }
     *
     * @type {boolean|Object}
     */
    breakpoints: false,
   
    /**
     * 类名的集合.
     *
     * @see ./classes.js
     *
     * @type {Object}
     */
    classes: ELEMENT_CLASSES,
   
    /**
     * i18n 文本的集合.
     *
     * @see ./i18n.js
     *
     * @type {Object}
     */
    i18n: I18N
}).mount();

视频扩展的可能选项。

new Splide( '.splide' , {
    video: {
      /**
       * Whether to play the video automatically.
       *
       * @type {boolean}
       */
      autoplay: false,
  
      /**
       * Hide the video control UI.
       *
       * @type {boolean}
       */
      hideControls: false,
  
      /**
       * Hide full screen button.
       * Only for YouTube.
       *
       * @type {boolean}
       */
      disableFullScreen: false,
  
      /**
       * Loop the video.
       *
       * @type {boolean}
       */
      loop: false,
  
      /**
       * Mute the video.
       *
       * @type {boolean}
       */
      mute: false,
  
      /**
       * Default volume(0.0-1.0).
       *
       * @type {number}
       */
      volume: 0.2
  }
})

您还可以通过 HTML 数据属性传递选项,如下所示:

<div class="splide" data-splide="{OPTIONS HERE}"></div>

事件监听器。

instance.on( 'mounted', function () {
  // 做点什么
});
  
instance.on( 'updated', function (OPTIONS) {
  // 做点什么
});
  
instance.on( 'move', function (newIndex, oldIndex, destIndex) {
  // 做点什么
});
  
instance.on( 'moved', function (newIndex, oldIndex, destIndex) {
  // 做点什么
});
  
instance.on( 'drag', function (info) {
  // 做点什么
});
  
instance.on( 'dragged', function (info) {
  // 做点什么
});
  
instance.on( 'visible', function (slideObject) {
  // 做点什么
});
  
instance.on( 'hidden', function (slideObject) {
  // 做点什么
});
  
instance.on( 'active', function (slideObject) {
  // 做点什么
});
  
instance.on( 'inactive', function (slideObject) {
  // 做点什么
});
  
instance.on( 'click', function (slideObject) {
  // 做点什么
});
  
instance.on( 'arrows:mounted', function (prev, next) {
  // 做点什么
});
  
instance.on( 'arrows:updated', function (prev, next, prevIndex, nextIndex) {
  // 做点什么
});
  
instance.on( 'pagination:mounted', function (data, activeItem:) {
  // 做点什么
});
  
instance.on( 'pagination:updated', function (data, prevItem, nextItem) {
  // 做点什么
});
  
instance.on( 'navigation:mounted', function (Splide) {
  // 做点什么
});
  
instance.on( 'autoplay:play', function () {
  // 做点什么
});
  
instance.on( 'autoplay:pause', function () {
  // 做点什么
});
  
instance.on( 'autoplay:playing', function () {
  // 做点什么
});
  
instance.on( 'lazyload:loaded', function () {
  // 做点什么
});
  
instance.on( 'video:play', function (player) {
  // 做点什么
});
  
instance.on( 'video:paused', function (player) {
  // 做点什么
});
  
instance.on( 'video:ended', function (player) {
  // 做点什么
});

特性。

// 根元素
splide.root
  
// 从零开始的活动索引
splide.index
  
// 选项
splide.options
  
// 幻灯片的数量
splide.length
  
// CSS 类的集合
splide.classes
  
// i18n
splide.i18n
  
// 一个包含所有组件的对象
splide.Components
  
// 设置/获取状态
// CREATED = 1: Splide 实例刚刚创建。
// MOUNTED = 2: 所有组件都已安装。
// IDLE = 3: 空闲.
// MOVING = 4: 滑块正在移动。
splide.State.is( 4 )
splide.State.set( 2 )

API 方法。

// 转到特定幻灯片
// {number}:转到由 {number} 指定的幻灯片。
// '+','+{number}': 增加活动幻灯片索引。
// '-','-{number}': 减少活动幻灯片索引。
// '>','>{number}': 转到下一页或{number}指定的页面。例如,'>2' 将滑块移动到第 2 页。
// '<','<{number}': 转到上一页或{number}指定的页面。splide.go(0);
splide.go(0);
  
// 检查幻灯片类型
// SLIDE = 'slide'
// LOOP = 'loop'
// FADE = 'fade'
splide.is( 'loop' );
  
// 为同步注册一个 Splide 实例
// 必须在 mount() 之前调用。
splide.sync( splide );
  
// 添加一个新的幻灯片
splide.add( slide, index );
  
// 删除幻灯片
splide.remove( index );
  
// 刷新幻灯片
splide.refresh();
  
// 销毁幻灯片
splide.destroy();

官方网站:https://splidejs.com/

相关热词: Splide滑块

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库