安装猫头鹰轮播

猫头鹰轮播是一款基于JavaScript的图片轮播插件，它能够自适应响应式布局，支持移动端交互手势，并提供了多种自定义选项。

安装方法

通过 NPM 安装

npm install @splidejs/splide

通过 CDN 引入

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

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

快速上手

引入样式和 JS 文件

在 HTML 文件中引入样式和 JavaScript 文件：

<link rel="stylesheet" href="path/to/splide.min.css">
<script src="path/to/splide.min.js"></script>

HTML 结构

创建一个包含轮播图片的列表，并添加一个空的容器作为画廊：

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="image1.jpg"></li>
      <li class="splide__slide"><img src="image2.jpg"></li>
      <li class="splide__slide"><img src="image3.jpg"></li>
    </ul>
  </div>
</div>

初始化

在 JavaScript 文件中实例化 Splide：

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

自定义选项

可以通过传递选项对象来自定义 Splide 的行为和外观。

new Splide( '.splide', {
	type       : 'loop',
	perPage    : 3,
	rewind     : true,
	gap        : '1rem',
	focus      : 'center',
	isNavigation: true,
	pagination : false,
	arrows     : false,
	autoplay   : true,
	interval   : 3000,
} ).mount();

更多自定义选项请参考官方文档：https://splidejs.com/options/

总结

猫头鹰轮播是一款功能强大的图片轮播插件，提供了丰富的自定义选项，使用起来非常简单。跟随官方文档，我们可以轻松地实现一个漂亮的响应式图片轮播效果。