vue-splide
made with Vuejs

vue-splide是Splide库https://www.cssscript.com/carousel-splide/的Vue包装器，用户可以在Vue中创建轻便、功能强大且灵活的滑块和轮播。

安装

Npm

npm i  @splidejs/vue-splide

Yarn

yarn add  @splidejs/vue-splide

使用

导入VueSplide并将其注册到您的Vue项目中。

全局导入

import Vue from 'vue';
import App from './App';
import VueSplide from '@splidejs/vue-splide';

Vue.use( VueSplide );

new Vue( {
  el    : '#app',
  render: h => h( App ),
} );

本地导入

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

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

导入选择的主题

import '@splidejs/splide/dist/css/themes/splide-default.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css';
// or
import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';

基础用法

<splide>
  <splide-slide>
    <img src="image01.jpg">
  </splide-slide>
  <splide-slide>
    <img src="image02.jpg">
  </splide-slide>
  <splide-slide>
    <img src="image03.jpg">
  </splide-slide>
</splide>

使用选项

<template>
  <splide :options="options">
        <splide-slide>
            <img src="image01.jpg">
        </splide-slide>
        <splide-slide>
            <img src="image02.jpg">
        </splide-slide>
  </splide>
</template>

<script>
  export default {
      data() {
          return {
              options: {
                rewind : true,
                  width  : 800,
                  perPage: 1,
                  gap    : '1rem',
              },
          };
      },
  }
</script>

示例