问题标签 [flickity]

我在一个 flickity 滑块中有一个 div，其中将包含一个包含一些图像的列表，我最初希望它被隐藏并且仅在用户选择单击按钮以查看它们时才显示。

目前，这会将扩展 div 底部的任何内容以及 div 下方的任何内容推到视图之外。

我尝试使用adaptiveHeightandsetGallery选项，但似乎都不能满足我的需要。

我在这里做了一个演示：

https://jsfiddle.net/y9gmzjdt/10/

我正在尝试实现类似于下图的效果。

蓝色 = 轮播幻灯片（作为图像）

绿色 = 轮播框架/视口/容器

红色 = 可见页面 (1440)

我有 5 张图像，所有图像都具有相同的分辨率（1024x576），我希望它们在根据屏幕尺寸放大/缩小的同时保持它们的比例。

我现在已经花了几个小时，但我一直无法实现我想要的。

我不想使用他们网站上大多数演示中显示的固定高度，因为在缩小到更小的设备时会出现问题。

我发布这个问题的原因是因为每当我尝试使用除固定高度以外的任何东西时，整个轮播都会崩溃，即使使用 AdaptiveHeight: true 和/或 setGallerySize: false 也是如此。

如果有帮助的话，我也在使用顺风。

任何帮助表示赞赏。

免责声明：我正在使用该flickity-slider库来实现基本的幻灯片效果。

我创建了一个包含各种<div>元素的幻灯片，它们都包含一个图片元素、一个标题和一些内容。使用以下模拟 HTML 结构：

使用flickity-slider（版本 2.1.2）和 jQuery，我可以基于此结构生成幻灯片：

我的问题是，我怎样才能使用幻灯片创建一个连续的选框/自动收录器效果，一旦你将鼠标悬停在它们上面就会暂停？

在 Fancybox 模态窗口中，我有 Flickity 轮播。在 iPad 上，当我改变方向时，Flickity 停止正常工作。flickity-viewport 显示为 0px。桌面窗口调整大小没有问题。当 iPad 上的方向改变时，不确定如何更新 Flickity。

https://jsfiddle.net/2zb5qesa/13/embedded/result/

我.gallery-cell img通过 flickity V2 添加了灰度，以及如何在.is-selectedSlider 时删除它？与此相同：（https://codepen.io/irvingarmenta/pen/pyLJvv）

我目前正在将一些幻灯片添加到滑块中（使用 flickity），并且由于某种原因，当滑块移动到下一张幻灯片时发生事件更改时，我可以让第一个视频暂停。但是，如果我在下一张幻灯片中播放下一个视频，然后移回上一张或下一张幻灯片，则视频不会暂停。

到目前为止，这是我正在做的事情：

奇怪的是，当事件发生变化时它会在第一个上工作，但在第二个上却不行。我觉得这与第一个视频已经暂停而不是在滑块更改上暂停第二个视频有关吗？不确定是否还有其他我应该寻找的东西。

如何为以前的 flickity 幻灯片添加一个类？我需要他们淡出。我正在使用安装了 npm 的 Vue.js 轻弹。当前幻灯片有.is-selected类，所以也许我可以以某种方式.is-prev, .is-next动态添加类？

我想自动播放我的Flickity轮播，每张幻灯片有 5 秒的延迟。然后，一旦达到其极限（最后一张幻灯片），它应该循环到第一张。

我怎样才能做到这一点？

在 JSFiddle 上查看

我一直在浏览 w3schools 关于使用 Javascript 使用媒体查询的教程，但我无法让我的叠加层在移动浏览器上滑动整个页面。

在桌面浏览器中，单击变换图标时，叠加层会向左滑动 50%。

使用此示例使用 Javascript 的媒体查询

这是我想添加的新功能。

当我将上述函数添加到片段中列出的现有函数时，叠加层已经可见，并且当视口小于或等于 400px 时不会滑动整个方式。

我还希望在单击叠加层时隐藏滑块中的箭头。箭头的类名是

这是没有新功能供您参考的外观片段。

这是添加新功能后的外观片段。我已<meta name="viewport" content="width=device-width">根据您的建议将该行添加到 head 标签，但结果是相同的 - 叠加仅滑动 50% 的页面。

我正在尝试加载一个简单的基于 js 的画廊 - Flickity.js

如示例中所述，我尝试加载运行良好的图库。

但随机地，画廊在页面加载时崩溃：

我用来启动画廊的代码：

我确实明白这可能与脚本启动时的文档（未加载图像）有关，因此，我尝试包含 document.ready 函数，该函数实际上引发了另一个错误。

这样做的结果是，它表明 flickity 不是一个函数。

为什么会这样？