vue-splide | 基于vuejs3的轮播图组件

vue-splide是一款基于vuejs3的轻量级、灵活的、利于SEO的轮播图组件。它的特点有：

• 使用TypeScript编写
• 没有任何依赖
• 轻量级，仅29KB
• 灵活可扩展
• 支持响应式短点（breakpoints）
• 支持鼠标和触摸手势滑动
• 支持懒加载
• 支持显示缩略图

使用方法

安装

如果您想使用vue-splide轮播图插件，首先您需要安装它，命令如下：

npm install @splidejs/vue-splide
		

使用

导入VueSplide并将其注册到您的Vue项目中。全局引用：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import VueSplide from '@splidejs/vue-splide';

const app = createApp( App );
app.use( VueSplide );
app.mount( '#app' );

		

局部引用

// App.vue
import { Splide, SplideSlide } from '@splidejs/vue-splide';

export default defineComponent( {
  components: {
    Splide,
    SplideSlide,
  },
} );

		

另外需要导入相应的样式文件

// Default theme
import '@splidejs/vue-splide/css';


// or other themes
import '@splidejs/vue-splide/css/skyblue';
import '@splidejs/vue-splide/css/sea-green';


// or only core styles
import '@splidejs/vue-splide/css/core';		
		

HTML结构

<template>
  <Splide :options="{ rewind: true }" aria-label="My Favorite Images">
    <SplideSlide>
      <img src="image1.jpg" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Sample 2">
    </SplideSlide>
  </Splide>
</template>			
		

一个完整的示例代码

<template>
  <Splide :options="options" aria-label="My Favorite Images">
    <SplideSlide>
      <img src="image1.jpg" alt="Sample 1">
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Sample 2">
    </SplideSlide>
  </Splide>
</template>

import { Splide, SplideSlide } from '@splidejs/vue-splide';
import { defineComponent } from 'vue';


export default defineComponent( {
  components: {
    Splide,
    SplideSlide,
  },


  setup() {
    const options = {
      rewind: true,
      gap   : '1rem',
    };


    return { options };
  }
});			
		

配置参数 options

• options: 轮播图的配置参数，是一个对象，具体内容参考这里
• tag：指定轮播图的根元素，可以是'div', 'section', 'header', 'footer' 或 'nav'中的一个。
• extensions：注册扩展插件。
• transition：自定义过渡动画。
• hasTrack：是否显示track。

github网址：https://github.com/Splidejs/splide