- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试获取this Flickity example (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');
});
我收到此错误:
bad element for Flickity: carousel
我的不工作版本:
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)
})
如何使用this Flickity example在 VueJS 组件中?
最佳答案
在您的 <script>
中部分,JavaScript 在文档中呈现模板之前执行,因此 Flickity 将无法找到 .carousel
如果在钩子(Hook)之外调用。 Vue 实例有 mounted()
lifecycle hook当它的模板呈现时被调用,这是您应该创建 Flickity 轮播的地方:
// const flkty = new Flickity(...) // DON'T DO THIS HERE
export default {
mounted() {
this.$nextTick(() => {
const flkty = new Flickity(...)
// ...
});
}
}
此外,不要传递 .carousel
类名到 Flickity,传递 ref
到.carousel
元素以避免抓取意外的 .carousel
文档中的元素(例如,如果您有多个组件实例)。
// template
<div ref="carousel">
// script
new Flickity(this.$refs.carousel)
关于javascript - VanillaJS 到 VueJS 错误 : bad element for Flickity: carousel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54483754/
测试用例:Flickity Sample 我正在使用这种笔,但在编辑 flickity-viewport 时遇到了问题。 我正在尝试使视口(viewport)的高度为 它在我的 style.css 上
我正在尝试将 iframe 定位在 flickity 的事件实例中,因为我可能在单个页面上有多个 flickity 实例(最终目标是在用户查看幻灯片时刷新刚刚查看的 iframe)选择另一张幻灯片)。
我希望 flickity slider 隐藏在桌面和更大的设备上。我想我正在按照文档中的说明进行操作,它们看起来很简单,但是,它不起作用。 div 看起来像这样:
Flickity 有事件绑定(bind)。移动到下一张或上一张幻灯片时是否有事件?例如settle event幻灯片稳定后被触发。这确实满足了我的需要,但这里的问题是,如果 Flickity 停留在同
我目前正在使用 Flickity 库在我的 wordpress 网站上显示轮播图。 问题:第一次加载网站 produkte 时,很多图像没有完全加载,只有第一厘米。 我很高兴收到有关此问题的任何提示。
以下 jquery 代码是我用来在屏幕尺寸减小时为我的 div 应用 flickity slider 的代码!但这不起作用...请告诉我这段代码有什么问题: (function($) { $(
我创建了以下 codepane使用 react-flickity-component 显示案例图片: 当我调整浏览器大小时,图像之间的边距会改变并消失 除了刷新页面之外,无论我接下来做什么,图像之间的
我有一个 Flickity 旋转木马,其中的所有内容都已设置好并可以正常工作,只是它只显示我拥有的最后一张图片,并在其他图片上重复显示(就好像它在它们上面一样)。我不明白为什么。 这是我的 HTML:
我正在实现 Flickity幻灯片,其中包括底部的幻灯片计数器和顶部的幻灯片标题。我把它们都放在了里面,但是顶部的标题不会显示应该是 img alt 标签的内容。 这就是我的 - JSfiddle H
我在同一页面上有两个轮播。阅读多个问题 ( https://github.com/metafizzy/flickity/issues/206 ) 和文档 ( https://flickity.meta
http://codepen.io/Thisisntme/pen/rVRyJE是对我的网站的测试。我正在尝试添加一个 flickity 轮播,但出于某种原因,它不会在 div 中呈现第二个图像。这是没
所以,我正在使用这个 https://codepen.io/desandro/pen/wByaqj 然后我像这样激活了 prevNextButtons: true,: $('.characters-m
我有一个包含推荐的 Flickity Carousel。轮播设置为自动播放。 问题是如果用户单击点或下一个/上一个按钮,自动播放就会停止。 这就是我所拥有的: JS var flkty = new F
我目前正在使用 Flickity Carousel创建具有不同电影内容面板的轮播。 轮播正在使用 custom navigation来控制它,而不是旋转木马附带的标准控制。然而,当您到达轮播幻灯片的末
如果轮播单元包含具有特定类的子元素,则尝试将其删除,但不知道如何使用从 flickity 中删除 API 来执行此操作。 使用 jquery mehtods,我可以很好地从 DOM 中删除,但 fli
我想知道用户何时通过单击 Flickity slider 内的链接开始导航到新页面。我在链接上附加了jQuery点击事件,但是当用户滑动并同时点击时,上的点击事件已触发,但不会导航到链接地址。 演示:
我有flickity slider页面加载时应该看起来不错。但页面加载时图像混搭。只有刷新页面一两次后才可以顺利运行。 您可以在此处找到出现意外行为的网站: DEMO 代码 $('.main-gal
我正在使用 Flickity gallery,我希望它循环一次然后停止自动播放。 3 是画廊中的最后一项,所以这就是为什么当画廊在这里落户时我试图调用它。 提前致谢!到目前为止,这是我的代码:
昨天我有一个用户不友好的轮播。然后我搜索其他灵活且响应迅速的旋转木马解决方案,然后谢天谢地我得到了这个 Flickity's carousels a fun to flick by David D
我在我的网站上设置了一个 flickity.js 轮播,我想向它添加几个 mailto 链接。默认情况下,静态点击在轮播中不起作用,所以我不得不使用 staticClick.flickity 事件来捕
我是一名优秀的程序员,十分优秀!