Splide 入门指南：轻量高效的幻灯组件

Splide 是一款现代、轻量且无依赖的 JavaScript 幻灯插件，适用于多种项目场景，支持响应式设计和多种滑动效果。

为什么选择 Splide？

• 🚀 轻量快速，性能优秀，体积小
• 🧩 无依赖，可以直接用在任何项目中
• 🎨 主题灵活，支持多种外观样式和扩展
• 🔧 配置简单，易于上手并且扩展性好

快速开始

你可以通过 CDN 快速引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

基础 HTML 结构

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">幻灯片1</li>
      <li class="splide__slide">幻灯片2</li>
      <li class="splide__slide">幻灯片3</li>
    </ul>
  </div>
</div>

初始化组件

<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Splide('.splide', {
      type   : 'loop',
      perPage: 1,
      autoplay: true,
    }).mount();
  });
</script>

常用配置项

• type：幻灯类型，如 loop、slide、fade
• perPage：每页显示的幻灯片数量
• autoplay：是否自动播放
• pagination：是否显示分页
• arrows：是否显示左右箭头

进阶主题：Default

Splide 默认提供 splide.min.css 样式文件，也支持自定义主题，例如 skyblue、sea-green。你可以通过引入不同的样式文件实现主题切换。

结语

如果你正在寻找一款轻便好用、功能强大的幻灯插件，Splide 无疑是一个优秀选择。它适合几乎所有的前端项目场景。

官网地址：https://splidejs.com/