翻转图像效果,使访问者可以使用鼠标悬停在图像之间切换。还支持HTML5视频。
在移动设备上运行时,它会自动将图像转换为自动幻灯片显示。
# NPM
$ npm i vuerollr --save
1.导入VueRollr。
import VueRollr from 'vuerollr';
2.注册组件。
export default {
components: {
VueRollr
}
}
3.将图像和视频添加到VueRollr组件。
<template>
<div>
<VueRollr>
<img src="1.jpg">
<img src="2.jpg">
<video loop autoplay muted>
<source src="3.mp4">
</video>
</VueRollr>
</div>
</template>
4. Props 。
breakpoint: {
type: Number,
default: 768
},
speed: {
type: Number,
default: 1000
}