问题标签 [flickity]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1367 浏览

javascript - 如何控制在轮播中暂停/播放视频?

我有一个使用flickity carousel 库创建的视频轮播,可以在 codepen 上看到。我想要发生的是,当用户滑动轮播时,所选幻灯片停止播放,然后采用所选中间位置的幻灯片开始播放。现在,使用 jQuery,我得到了最初播放的选定幻灯片:

但是当幻灯片切换位置时,​​选定的幻灯片只是移动位置并继续播放,而新幻灯片处于中间位置并且不播放。

每次轮播滑动时有没有办法更新这些功能?

0 投票
1 回答
2399 浏览

jquery - Flickity 2 - groupCells 和 pageDots 不能同时工作

我是flickity的新手,我想对单元格进行分组并同时显示点。但是在我的项目中,它们似乎是相互排斥的,我可以对单元格进行分组或显示点,即使从这个codepen,它们也可以很好地协同工作。

我究竟做错了什么?

这是我的代码

我的页面:

这个 html 是我的 angularjs 自定义指令中模板的一部分:

这是我的指令的链接方法中的jquery :

在这种情况下,单元格被正确分组,但我没有看到点。为了看到这些点,我需要删除 groupCells 属性。

我究竟做错了什么?

注意:此代码在同一页面内工作。

谢谢

0 投票
0 回答
862 浏览

html - Flickity 轮播在 Firefox 中无法正确调整幻灯片宽度

我尝试使用flickity来制作一个好看的延迟加载图像轮播。它在 chrome 和 safari 上运行良好,但幻灯片的大小与 Firefox 中的图像不正确。

请尝试使用 Firefox 和其他浏览器的以下链接来了解这个想法:imagescroll

有谁知道如何在不失去可变幻灯片宽度的能力的情况下解决 Firefox 的问题?非常感谢!

0 投票
1 回答
399 浏览

user-experience - 滑动并点击下一张幻灯片

使用 flickity,是否可以在同一张幻灯片上同时具有两种行为?

  • 刷卡(默认和更好的四个触摸屏)
  • 单击到下一张幻灯片(更适合桌面)

我试过类似的东西:

这是小提琴:https ://jsfiddle.net/francoisromain/fum7Lrac/

点击工作正常,但问题是滑动向前移动了两张幻灯片。

0 投票
1 回答
2362 浏览

php - 代码适用于本地主机但不适用于服务器

我刚刚将我的客户站点启动到一个临时 URL,这样他们就可以在我完成 CSS 和最后润色时进行数据输入。然而,当我启动该网站时,我发现它的一部分坏了,罪魁祸首是自定义帖子滑块。我不明白为什么它会中断,因为它在我的本地主机上运行良好。

我正在使用一个名为 Flickity 的 pkg,到目前为止,它一直对我很好。我在我的网站上使用其他 Flickity 滑块,所以我知道 Flickity 本身不是问题。我在我的滑块代码下方附上了。

自定义帖子是剧院制作,应根据结束演出日期订购:ending_date [ACF]。

我们的作品

在我的开发工具中检查控制台错误后,它出现了以下错误。有什么建议么?

Uncaught ReferenceError: jQuery is not defined at jquery-migrate.min.js:2 (index):87 Uncaught ReferenceError: jQuery is not defined at (index):87

0 投票
2 回答
4190 浏览

reactjs - 如何为componentDidMount中的元素设置样式?

我有一个组件:

在 componentDidMount 中,我希望定位其中一个缩略图并更新它的样式,我知道缩略图有什么索引,我该怎么做?

0 投票
1 回答
709 浏览

javascript - 如何为Flickity 添加标签?

0 投票
1 回答
976 浏览

javascript - Flickity 完成回调?

我正在使用 flickity 和 react。我正在像这样实例化它:

Flickity 适用position: absolute于图像,然后用它来测量一些尺寸,我需要在 flickity 完成后将此位置更改为静态,以便我的响应式 css 工作。flickity 有回调还是我可以通过其他方式知道它?

0 投票
1 回答
176 浏览

angularjs - 如何使用 FlickityService 控制播放器的启动/停止

我正在使用 Angular Flickity 指令开发照片幻灯片。我可以使用 FlickityService 调用下一张和上一张函数将幻灯片移动到下一张和上一张幻灯片。但是,尽管 Flickity api 有 stopPlay 和 startPlayer,我如何控制播放器的启动和停止?

HTML:

在我的角度控制器中,我具有以下功能:

0 投票
2 回答
647 浏览

angular - 与路由器插座一起使用时,Angular 2 组件无法正确呈现

我正在开发一个简单的 angular 2 网站,使用 angular 2 惰性路由。我使用flickity滑块在主页中实现滑块,问题是:当我在应用程序组件(根组​​件)中声明滑块组件时

应用程序组件

滑块渲染没有问题,但是当我在使用延迟加载在路由器插座中调用的主页组件中声明滑块组件时,图片在那里但滑块不起作用,

主页.component

app.routing.ts