Vueper Slides
made with
Vuejs
简介及使用教程
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.'
}
]
})
示例
作者
Antoni
相关项目