JS（ Splide）幻灯片滑块/旋转木马特效插件（可垂直/水平）

演示  website 下载

Splide是一个轻量级、响应迅速、可访问、便于移动的、功能全面的滑块/旋转木插件，用纯JavaScript和CSS/CSS3实现。

功能：

• 支持触摸滑动和鼠标拖动

• 基于CSS3的平滑滑动和渐变过渡

• 图像延迟加载

• 支持嵌套滑块

• 支持HTML视频，youtube，vimeo

• 有项目上允许多个幻灯片。

• 自动播放

• 支持水平和垂直方向

基本用法：

1.在文档中加载必要的JavaScript和CSS文件。

<!-- Core -->
<link rel="stylesheet" href="dist/css/splide.min.css">
<script src="dist/js/splide.min.js"></script>
<!-- Video Extension -->
<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 Hash Change Extension -->
<script src="splide-extension-url-hash/dist/js/splide-extension-url-hash.min.js"></script>

2.创建幻灯片html代码。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
      <li class="splide__slide">Slide 04</li>
      <li class="splide__slide">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>
        Slide 1
      </li>
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="2.jpg">
        </div>
        Slide 2
      </li>
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="3.jpg">
        </div>
        Slide 3
      </li>
    </ul>
  </div>
</div>

3.在自动播放模式下，需要一个进度条，显示在转换到下一张幻灯片之前要等待的时间。

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

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

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

5.建视频旋转木马。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide" data-splide-youtube="YOUTUBE VIDEO URL">
        <img src="cover.jpg">
      </li>
      <li class="splide__slide" data-splide-vimeo="VIMEO VIDEO URL">
        <img src="cover.jpg">
      </li>
    </ul>
  </div>
</div>
new Splide( '#splide', {
    video: {
      // options here
    },
}).mount(window.splide.Extensions);

6.启用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);

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

new Splide( '.splide' , {
    /**
     * Determine a slider type.
     * - 'slide': Regular slider.
     * - 'loop' : Carousel slider.
     * - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
     *
     * @type {string}
     */
    type: 'slide',

    /**
     * Whether to rewind a slider before the first slide or after the last one.
     * In "loop" mode, this option is ignored.
     *
     * @type {boolean}
     */
    rewind: false,

    /**
     * Transition speed in milliseconds.
     *
     * @type {number}
     */
    speed: 400,

    /**
     * Transition speed on rewind in milliseconds.
     *
     * @type {number}
     */
    rewindSpeed: 0,

    /**
     * Whether to prevent any actions while a slider is transitioning.
     * If false, navigation, drag and swipe work while the slider is running.
     * Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
     *
     * @type {boolean}
     */
    waitForTransition: true,

    /**
     * Define slider max width.
     *
     * @type {number}
     */
    width: 0,

    /**
     * Define slider height.
     *
     * @type {number}
     */
    height: 0,

    /**
     * Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
     * perPage number will be ignored when this option is falsy.
     *
     * @type {number|string}
     */
    fixedWidth: 0,

    /**
     * Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
     * heightRatio option will be ignored when this option is falsy.
     *
     * @type {number}
     */
    fixedHeight: 0,

    /**
     * Determine height of slides by ratio to a slider width.
     * This will be ignored when the fixedHeight is provided.
     *
     * @type {number}
     */
    heightRatio: 0,

    /**
     * If true, slide width will be determined by the element width itself.
     * - perPage/perMove should be 1.
     * - lazyLoad should be false.
     *
     * @type {boolean}
     */
    autoWidth: false,

    /**
     * Determine how many slides should be displayed per page.
     *
     * @type {number}
     */
    perPage: 1,

    /**
     * Determine how many slides should be moved when a slider goes to next or perv.
     *
     * @type {number}
     */
    perMove: 0,

    /**
     * Start index.
     *
     * @type {number}
     */
    start: 0,

    /**
     * Determine manually how many clones should be generated on the left and right side.
     * The total number of clones will be twice of this number.
     *
     * @type {number}
     */
    clones: 0,

    /**
     * Determine which slide should be focused if there are multiple slides in a page.
     * A string "center" is acceptable for centering slides.
     *
     * @type {boolean|number|string}
     */
    focus: false,

    /**
     * Gap between slides. CSS format is allowed such as 1em.
     *
     * @type {number|string}
     */
    gap: 0,

    /**
     * Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
     * Give a single value to set a same size for both sides or
     * do an object for different sizes.
     * Also, CSS format is allowed such as 1em.
     *
     * @example
     * - 10: Number
     * - '1em': CSS format.
     * - { left: 0, right: 20 }: Object for different sizes in horizontal mode.
     * - { top: 0, bottom: 20 }: Object for different sizes in vertical mode.
     *
     * @type {number|string|Object}
     */
    padding: 0,

    /**
     * Whether to append arrows.
     *
     * @type {boolean}
     */
    arrows: true,

    /**
     * Change the arrow SVG path like 'm7.61 0.807-2.12...'.
     *
     * @type {string}
     */
    arrowPath: '',

    /**
     * Whether to append pagination(indicator dots) or not.
     *
     * @type {boolean}
     */
    pagination: true,

    /**
     * Activate autoplay.
     *
     * @type {boolean}
     */
    autoplay: false,

    /**
     * Autoplay interval in milliseconds.
     *
     * @type {number}
     */
    interval: 5000,

    /**
     * Whether to stop autoplay when a slider is hovered.
     *
     * @type {boolean}
     */
    pauseOnHover: true,

    /**
     * Whether to stop autoplay when a slider elements are focused.
     * True is recommended for accessibility.
     *
     * @type {boolean}
     */
    pauseOnFocus: true,

    /**
     * Whether to reset progress of the autoplay timer when resumed.
     *
     * @type {boolean}
     */
    resetProgress: true,

    /**
     * Loading images lazily.
     * Image src must be provided by a data-splide-lazy attribute.
     *
     * - false: Do nothing.
     * - 'nearby': Only images around an active slide will be loaded.
     * - 'sequential': All images will be sequentially loaded.
     *
     * @type {boolean|string}
     */
    lazyLoad: false,

    /**
     * This option works only when a lazyLoad option is "nearby".
     * Determine how many pages(not slides) around an active slide should be loaded beforehand.
     *
     * @type {number}
     */
    preloadPages: 1,

    /**
     * Easing for CSS transition. For example, linear, ease or cubic-bezier().
     *
     * @type {string}
     */
    easing: 'cubic-bezier(.42,.65,.27,.99)',

    /**
     * Whether to control a slide via keyboard.
     *
     * @type {boolean}
     */
    keyboard: true,

    /**
     * Whether to allow mouse drag and touch swipe.
     *
     * @type {boolean}
     */
    drag: true,

    /**
     * The angle threshold for drag.
     * The slider starts moving only when the drag angle is less than this threshold.
     *
     * @type {number}
     */
    dragAngleThreshold: 30,

    /**
     * Distance threshold for determining if the action is "flick" or "swipe".
     * When a drag distance is over this value, the action will be treated as "swipe", not "flick".
     *
     * @type {number}
     */
    swipeDistanceThreshold: 150,

    /**
     * Velocity threshold for determining if the action is "flick" or "swipe".
     * Around 0.5 is recommended.
     *
     * @type {number}
     */
    flickVelocityThreshold: .6,

    /**
     * Determine power of flick. The larger number this is, the farther a slider runs by flick.
     * Around 500 is recommended.
     *
     * @type {number}
     */
    flickPower: 600,

    /**
     * Limit a number of pages to move by flick.
     *
     * @type {number}
     */
    flickMaxPages: 1,

    /**
     * Slider direction.
     * - 'ltr': Left to right.
     * - 'rtl': Right to left.
     * - 'ttb': Top to bottom.
     *
     * @type {string}
     */
    direction: 'ltr',

    /**
     * Set img src to background-image of its parent element.
     * Images with various sizes can be displayed as same dimension without cropping work.
     * fixedHeight or heightRatio is required.
     *
     * @type {boolean}
     */
    cover: false,

    /**
     * Whether to enable accessibility(aria and screen reader texts) or not.
     *
     * @type {boolean}
     */
    accessibility: true,

    /**
     * Whether to add tabindex="0" to visible slides or not.
     *
     * @type {boolean}
     */
    slideFocus: true,

    /**
     * Determine if a slider is navigation for another.
     * Use "sync" API to synchronize two sliders.
     *
     * @type {boolean}
     */
    isNavigation: false,

    /**
     * Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
     *
     * @type {boolean}
     */
    trimSpace: true,

    /**
     * Slide status is updated after move as default.
     * If true, it will be updated before move.
     *
     * @type {boolean}
     */
    updateOnMove: false,

    /**
     * Throttle duration in milliseconds for the resize event.
     *
     * @type {number}
     */
    throttle: 100,

    /**
     * Breakpoints definitions.
     *
     * @example
     * {
     *   '1000': {
     *     perPage: 3,
     *     gap: 20
     *   },
     *   '600': {
     *     perPage: 1,
     *     gap: 5,
     *   }
     * }
     *
     * @type {boolean|Object}
     */
    breakpoints: false,

    /**
     * Collection of class names.
     *
     * @see ./classes.js
     *
     * @type {Object}
     */
    classes: ELEMENT_CLASSES,

    /**
     * Collection of i18n texts.
     *
     * @see ./i18n.js
     *
     * @type {Object}
     */
    i18n: I18N
}).mount();

8.视频扩展的可能选项

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

9.也可以通过HTML数据属性传递选项，如下所示：

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

10.事件侦听器

instance.on( 'mounted', function () {
  // do something
});

instance.on( 'updated', function (OPTIONS) {
  // do something
});

instance.on( 'move', function (newIndex, oldIndex, destIndex) {
  // do something
});

instance.on( 'moved', function (newIndex, oldIndex, destIndex) {
  // do something
});

instance.on( 'drag', function (info) {
  // do something
});

instance.on( 'dragged', function (info) {
  // do something
});

instance.on( 'visible', function (slideObject) {
  // do something
});

instance.on( 'hidden', function (slideObject) {
  // do something
});

instance.on( 'active', function (slideObject) {
  // do something
});

instance.on( 'inactive', function (slideObject) {
  // do something
});

instance.on( 'click', function (slideObject) {
  // do something
});

instance.on( 'arrows:mounted', function (prev, next) {
  // do something
});

instance.on( 'arrows:updated', function (prev, next, prevIndex, nextIndex) {
  // do something
});

instance.on( 'pagination:mounted', function (data, activeItem:) {
  // do something
});

instance.on( 'pagination:updated', function (data, prevItem, nextItem) {
  // do something
});

instance.on( 'navigation:mounted', function (Splide) {
  // do something
});

instance.on( 'autoplay:play', function () {
  // do something
});

instance.on( 'autoplay:pause', function () {
  // do something
});

instance.on( 'autoplay:playing', function () {
  // do something
});

instance.on( 'lazyload:loaded', function () {
  // do something
});

instance.on( 'video:play', function (player) {
  // do something
});

instance.on( 'video:paused', function (player) {
  // do something
});

instance.on( 'video:ended', function (player) {
  // do something
});

11.属性

// root element
splide.root

// zero-based active index
splide.index

// options
splide.options

// the number of slides
splide.length

// a collection of CSS classes
splide.classes

// i18n
splide.i18n

// an object containing all components
splide.Components

// set/get state
// CREATED = 1: Splide instance has just been created.
// MOUNTED = 2: All components have been mounted.
// IDLE = 3: Idling.
// MOVING = 4: The slider is moving.
splide.State.is( 4 )
splide.State.set( 2 )

12.API方法

// go to a specific slide
// {number}: Go to slide specified by {number}.
// '+','+{number}': Increase active slide index.
// '-','-{number}': Decrease active slide index.
// '>','>{number}': Go to next page or the page specified by {number}. For example, '>2' moves a slider to page 2.
// '<','<{number}': Go to previous page or the page specified by {number}.
splide.go(0);

// check the slider type
// SLIDE = 'slide'
// LOOP = 'loop'
// FADE = 'fade'
splide.is( 'loop' );

// register a Splide instance for sync
// must be called before mount().
splide.sync( splide );

// add a new slide
splide.add( slide, index );

// remove a slide
splide.remove( index );

// refresh the slider
splide.refresh();

// destroy the slider
splide.destroy();

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。