轮播大家应该都非常熟悉，尤其是写过商城/官网的伙伴。在之前一直用的老牌权威 swiper 处理，一个偶然机会，发现了另一个更轻的轮播库：splide。

这篇文章主要介绍一下 splide 的基本用法，更多细节/定制操作可以参考 官方文档 。

话不多说，直接开整：

准备工作

下载

NPM:

$ npm install @splidejs/splide

CDN:

<script
  src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"
></script>

CSS 样式

<link
  href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"
  rel="stylesheet"
/>

如果想选择更多的样式可以在官网选择并导入 主题样式 。

基础轮播

Splide 通过固定的 HTML 结构来实现轮播效果，所以在代码中你需要保持 root、track、list、slide 的基本结构，其他样式你可以自己修改：

<section class="splide" aria-label="Basic Structure Example">
  <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>
    </ul>
  </div>
</section>

注意事项：

• <section> <ul> <li> 不是必须，你可以都替换成 <div>。
• 不要在 track 和 list 元素中插入其他元素。
• 不要破坏 track > list > slide 的父子元素关系， list 和 slide 中间可以插入元素。
• 不要删除 splide__* 开头的 class name ，如果你不知道他是干什么的。

示例一： Default

示例二： 展示多个

示例三： 主体居中

示例四： 自由拖拽

示例五： 垂直

示例六： 自适应宽度/高度

示例七： 自动播放

自定义切换按钮

自定义程度和开发便利程度是考量一个库是否好用的重要标准。

splide 中自定义“下一张”，“上一张”按钮的方法有两种：

1. 半自定义，通过自定义 class name 改变样式，也支持传入箭头的 svg-path：

{
    classes: {
        arrow: "splide__arrow custom-class-name", // splide__arrow 是必须的
    },
    arrowPath: "...", // SVG 尺寸必须为 40×40
}

2. 完全自定义，通过替换 Dom 节点实现完全控制。

注意要保证 HTML 结构限制

<section class="splide" aria-label="Custom Arrows Example">
  <div class="splide__arrows">
    <button class="splide__arrow splide__arrow--prev">自定义 Prev</button>
    <button class="splide__arrow splide__arrow--next">自定义 Next</button>
  </div>
  <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>
    </ul>
  </div>
</section>

自定义页码

1. 通过修改 class name 自定义样式

new Splide(".splide", {
  classes: {
    pagination: "splide__pagination custom-class-name", // splide__pagination 是必须的
    page: "splide__pagination__page custom-class-name", // splide__pagination__page 是必须的
  },
});

2. 你也可以通过 CSS 选择器将分页器改成数字

.splide__pagination {
  counter-reset: pagination-num;
}

.splide__pagination__page:before {
  counter-increment: pagination-num;
  content: counter(pagination-num);
}

3. 如果你想完全自定义，可以通过关闭 splide 的 pagination，并通过自定义组件+API 的方式来实现。

下面是一个最小实现：

<ul>
  {slides.map((_, index) => <li onclick="window.Splide.go(index)">{index}</li>)}
</ul>

特殊案例

示例一： 嵌套轮播

示例二： 断点

响应式布局一直是前端需要关注的重点， Splide 通过断点添加媒体查询的方式实现对轮播的响应式控制。

var slider = new Splide("#bp-slider", {
  perPage: 3,
  gap: "2rem",
  breakpoints: {
    640: { perPage: 2, gap: ".7rem" },
    480: { perPage: 1, gap: ".7rem" },
  },
});
slider.mount();

示例三： 添加/删除

添加和删除主要依靠 slides API 完成，你可以在官网查看所有支持的 API 和 Events。 Splide API

拓展功能

Splide 支持在基础功能上使用插件进行拓展，以实现更多功能。

通过引入 @splidejs/splide-extension-* 的方式，为 Splide 拓展更多功能；

你可以在官网中找到全部拓展功能，这里只做经常使用的几个功能的简单介绍。 Splide-Extension

示例一： Grid

在轮播中使用 Grid 布局并不常见，但是却是一个很有必要的功能。

Grid 功能在 Splide 中属于拓展功能，所以在开始前我们需要额外引入 splide-extension-grid.js 。

NPM:

$ npm install @splidejs/splide-extension-grid

CDN:

<script
  src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-grid@0.4.1/dist/js/splide-extension-grid.min.js"
></script>

并且要在 .mount() 中声明。

import { Splide } from "@splidejs/splide";
import { Grid } from "@splidejs/splide-extension-grid";

new Splide(".splide").mount({ Grid });

or

new Splide("#splide").mount(window.splide.Extensions);

示例二： 自动滚动

自动播放是通过切换 slider 让轮播滚动起来，而自动滚动恰恰相反，通过 scroll 事件触发 slider 切换。

要使用这个功能，一样需要使用 splide-extension。

NPM:

$ npm install @splidejs/splide-extension-auto-scroll

CDN:

<script
  src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"
></script>

并且要在 .mount() 中声明。

import { Splide } from "@splidejs/splide";
import { AutoScroll } from "@splidejs/splide-extension-auto-scroll";

new Splide(".splide").mount({ AutoScroll });

or

new Splide("#splide").mount(window.splide.Extensions);

主要属性：

{
  autoScroll: {
    speed: 1, // 速度
    autoStart: true, // 自动开始
    pauseOnHover: true, // 悬停时停止
    pauseOnFocus: true // 聚焦时停止
  }
}

Example:

示例三： 视口监听

通过对视口的监听可以实现对自动播放、自动滚动的控制。

NPM:

$ npm install @splidejs/splide-extension-intersection

CDN:

<script
  src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-intersection@0.2.0/dist/js/splide-extension-intersection.min.js"
></script>

并且要在 .mount() 中声明。

import { Splide } from "@splidejs/splide";
import { Intersection } from "@splidejs/splide-extension-intersection";

new Splide(".splide").mount({ Intersection });

or

new Splide("#splide").mount(window.splide.Extensions);

Example:

你还可以通过 .on('intersection:in', func (entry) {})、.on('intersection:out', func (entry) {}) 对进入/退出视口事件进行监听

splide.on( 'intersection', function ( entry ) {
  // 所有事件
  if ( entry.isIntersecting ) {
    if ( entry.intersectionRatio >= 0.5 ) {
    }
  }
} );

splide.on( 'intersection:in', function ( entry ) {
  // 进入视窗
  console.log( 'in', entry.target );
} );
splide.on( 'intersection:out', function ( entry ) {
  // 离开视窗
  console.log( 'out', entry.target );
} );

总结

Splide 并不能完美替代所有情况下的 Swiper ，只是在选择轮播时多了一个选择。Splide 目前对移动端的支持并不完美，并且社区还有点小，如果需要特别稳定和完善的库，建议还是使用 Swiper。