我正在尝试获取此 Flickity 示例(CodePen)在 VueJS 组件中工作。
HTML
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
JS
var flkty = new Flickity('.carousel');
flkty.on( 'dragStart', function() {
console.log('dragStart');
});
我收到此错误:
Flickity 的坏元素:轮播
我的不工作的版本:
JS数据()
import Flickity from 'flickity'
var flkty = new Flickity('.carousel')
export default {
data () {
return {
flickityOptions: {
dragThreshold: 50,
initialIndex: 1,
prevNextButtons: false,
pageDots: false,
wrapAround: false,
hash: true,
percentPosition: false
},
JS挂载()
mounted () {
flkty.on('dragStart', function () {
this.stageDragging = true
console.log('stageDragging: ' + this.stageDragging)
})
flkty.on('dragEnd', function () {
this.stageDragging = false
console.log('stageDragging: ' + this.stageDragging)
})
如何在 VueJS 组件中使用这个 Flickity 示例 ?