Vue的Splic传送带和滑块组件 - vue-splide

Vue的Splic传送带和滑块组件 - vue-splide
插件名称 vue-splide
发布时间 2020年10月24日
插件作者 Splidejs

Splide库周围的Vue包装器,使开发人员可以在Vue.js中创建轻便,功能强大且灵活的滑块和轮播。

安装和下载:

# NPM
$ npm i @splidejs/vue-splide --save

如何使用它:

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

import Vue from 'vue';

// globally
import VueSplide from '@splidejs/vue-splide';
Vue.use( VueSplide );

// locally
import { Splide, SplideSlide } from '@splidejs/vue-splide';
export default {
  components: {
    Splide,
    SplideSlide,
  },
}

2.导入您选择的主题,如下所示:

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

3.创建一个基本的轮播。

<splide>
  <splide-slide>
    <img src="1.jpg">
  </splide-slide>
  <splide-slide>
    <img src="2.jpg">
  </splide-slide>
  <splide-slide>
    <img src="3.jpg">
  </splide-slide>
</splide>
export default { 
  data() {
    return {
      options: {
        // options here
      },
    };
  },
}