带缩略图的Vue轮播图/滑块组件(vue-splide)

 website 下载

介绍

vue-splide是一款Vue轮播图/滑块组件，使开发人员可以在Vue.js中创建轻便，功能强大且灵活的滑块和轮播。

使用方法

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
      },
    };
  },
}