Vueper Slides
made with Vuejs

Vueper Slides

这是一个幻灯片/轮播组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vueper Slides是一个幻灯片/轮播组件,适用于Vue.js的触摸就绪且响应灵敏的幻灯片/轮播。 Vueper Slides可以随容器缩放,并且易于触摸且易于访问,内置视差效果和3D旋转以及无限循环。 Vueper Slides是完全可定制的,并且具有最少的样式(BEM约定)。

安装

Npm

npm i vueperslides

Yarn

yarn add vueperslides

浏览器

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vueperslides"></script>
  <link href="https://unpkg.com/vueperslides/dist/vueperslides.css" rel="stylesheet">

使用

全局引入

import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'

组件引入 export default { components: { VueperSlides, VueperSlide }, ... }

组件使用

<vueper-slides>
  <vueper-slide v-for="(slide, i) in slides" :key="i" :title="slide.title" :content="slide.content" />
</vueper-slides>

...

data: () => ({
  slides: [
    {
      title: 'Slide #1',
      content: 'Slide content.'
    }
  ]
})

示例

image.png

image.png

image.png

作者

Antoni

相关项目