问题标签 [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 投票
3 回答
1273 浏览

jquery - 查询。根据 img 的方向更改容器宽度

我需要根据其中的 img 的方向来调整容器的大小。以便有一个宽度:50% 的纵向图像容器和一个宽度:100% 的横向图像容器。

我能够想出的 JQuery 不起作用。它只是添加了独立于它看起来的内容的两个类之一。

Javascript:

粗略的 HTML:

CSS:

我制作了一个小提琴来说明这个问题:JSFiddle

希望有人发现我的错误并可以提供帮助。该代码使用flickity滑块。

0 投票
2 回答
95 浏览

javascript - 将函数表达式存储在 angularjs 指令的链接函数中并通过 ng-click 使用它

我有以下 angularjs 指令,我希望能够使用 ng-click 在 property-slider.html 中执行 showMap()。我错过了什么?

0 投票
1 回答
551 浏览

javascript - 使用 flickity 将大小调整为选项卡

所以我现在有一个项目,它基本上是在消除错误,特别是这个项目是一个非常烦人的案例。Flickity 应该“调整”特定元素的大小,<div>并作为底部的选项卡滚动到特定的信息元素。然而,所有的文字只是混合在一起。

闪烁问题.

不过,我发现,当您调整浏览器大小时,它可以正常工作并通过<div>一次显示一个并使用底部的按钮在<div>.

这是jQuery的轻浮部分:

modalPopup()加载信息的函数在哪里。

任何帮助或建议,都非常感谢!

0 投票
1 回答
1084 浏览

angularjs - ng-repeat 的 Flickity 不添加新项目

我想要一个使用FlickityAngular 的ng-repeat 的滑块,我可以从中推送和弹出项目。

它大部分都在工作,但我遇到的问题是我推到滑块上的新项目没有附加到末尾。相反,滑块中的最后一项只会被下一个推送的项目覆盖。HTMLdiv元素和 Array 对象被正确推送,但滑块没有正确显示它。

在我的 index.html 代码中,我只有一个调用pushItem(). 数组本身被正确添加,新的 div 项被正确创建;如上所述,它只是没有正确显示在滑块中。

HTML

Javascript

0 投票
2 回答
6610 浏览

javascript - 让 Flickity 图像适合

我正在创建一个Flickity幻灯片,其中图像应该适合包含的元素,这样就不需要滚动来查看所有图像。目前我有它,所以图像填充了可用宽度,但你可以垂直滚动。

我在jsFiddle上创建了一个我正在尝试做的示例。我也在使用LazySizes插件并使用srcsetand sizeswith Picturefill,但我认为这个问题与任何这些都无关,因为问题似乎是 Flickity 通过内联样式向flickity-viewport元素添加了一个高度,该元素是根据计算得出的图像的自然高度,而不是其缩放高度。

HTML

SCSS

其余的 CSS 来自flickity.css

JS

Flickity文档似乎建议我应该能够在 CSS 中设置 100% 的高度,但是每当我向 CSS 或使用添加高度时setGallerySize: false,我的画廊都没有高度。

0 投票
0 回答
1619 浏览

javascript - 轮播中的水平滚动(Flickity)

我正在尝试将带有鼠标滚轮的水平滚动添加到Flickity图像滑块中。浏览器控制台显示以下错误:

“无法设置未定义的属性'x'”
“无法读取未定义的属性'x'”

并且这些行为非常糟糕,正如您在codepen.io的这个示例中看到的那样

JavaScript:

PS:代码在这个 JQuery 插件之上工作。

0 投票
1 回答
256 浏览

javascript - 无法设置/红色未定义的属性“x”(水平滚动)

我尝试了不同的方法来设置图像轮播的水平滚动并最终解决了这个问题,但不幸的是我无法弄清楚如何使用Flickity图像滑块解决以下问题。浏览器控制台显示以下错误:

无法设置未定义的属性“x”
无法读取未定义的属性“x”

正如您在codepen.io的这个示例中看到的那样,这些行为非常糟糕

PS:代码在这个 JQuery 插件之上工作。

0 投票
1 回答
294 浏览

javascript - 图像轮播中的水平滚动问题

我尝试了不同的方法来设置图像轮播的水平滚动并最终解决了这个问题,但不幸的是我无法弄清楚如何使用Flickity图像滑块解决以下问题。浏览器控制台显示以下错误:

无法设置未定义的属性“x”
无法读取未定义的属性“x”

正如您在codepen.io的这个示例中看到的那样,这些行为非常糟糕

PS:代码在这个 JQuery 插件之上工作。

当我用普通鼠标滚轮测试它时,我看到问题的方式,实际上当你的手指停止时,滚轮停止,所以尽管控制台日志中有错误,你仍然可以轻松地继续导航,一个月前我把我的嘴换成 Apple Magic Mouse,如果我用力转动,我注意到错误日志仍在计数错误,我不能继续直到它到达最后,我还没有在笔记本触摸板上测试它,但我觉得同样的问题将留在那里,我正在寻找他们修复它的方法。

0 投票
0 回答
858 浏览

angularjs - Flickity 轮播:使用 ng-repeat 将项目推出视口?

我正在尝试使用 metafizzy 的 flickity 框架来动态显示内容,使用 angulars ng-repeat。

但由于某种原因,这些项目在加载到 DOM 时似乎从 flickity-viewport 中推出。任何人都知道为什么会发生这种情况以及如何避免它?

当像这样在其中显示静态内容时,画廊工作正常;

HTML:静态标记示例

..它在尝试借助 Angular 的 ng-repeat 指令填充画廊时,画廊会中断。

HTML : 使用 NG-REPEAT 标记

JAVASCRIPT

链接到 flickity apihttp ://flickity.metafizzy.co/api.htm

0 投票
1 回答
94 浏览

javascript - 由于插件完成的 dom 突变导致未捕获的不变违规

我在使用名为flickity的 javascript 插件时遇到了一个问题,它启用了触摸友好的幻灯片图像。

我这样初始化它:


这一切都很好,但问题是它<div ref="carousel"></div>在我的渲染中定位的 div 被突变为 flickity 元素。当我重新渲染组件时,这有时会导致Uncaught Invariant Violation错误,因此我想问是否有解决方案来克服这个问题?


这就是我渲染相关组件的方式