问题标签 [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.
javascript - 将函数表达式存储在 angularjs 指令的链接函数中并通过 ng-click 使用它
我有以下 angularjs 指令,我希望能够使用 ng-click 在 property-slider.html 中执行 showMap()。我错过了什么?
javascript - 让 Flickity 图像适合
我正在创建一个Flickity幻灯片,其中图像应该适合包含的元素,这样就不需要滚动来查看所有图像。目前我有它,所以图像填充了可用宽度,但你可以垂直滚动。
我在jsFiddle上创建了一个我正在尝试做的示例。我也在使用LazySizes插件并使用srcset
and sizes
with Picturefill,但我认为这个问题与任何这些都无关,因为问题似乎是 Flickity 通过内联样式向flickity-viewport
元素添加了一个高度,该元素是根据计算得出的图像的自然高度,而不是其缩放高度。
HTML
SCSS
其余的 CSS 来自flickity.css
JS
Flickity文档似乎建议我应该能够在 CSS 中设置 100% 的高度,但是每当我向 CSS 或使用添加高度时setGallerySize: false
,我的画廊都没有高度。
javascript - 轮播中的水平滚动(Flickity)
我正在尝试将带有鼠标滚轮的水平滚动添加到Flickity图像滑块中。浏览器控制台显示以下错误:
“无法设置未定义的属性'x'”
“无法读取未定义的属性'x'”
并且这些行为非常糟糕,正如您在codepen.io的这个示例中看到的那样
JavaScript:
PS:代码在这个 JQuery 插件之上工作。
javascript - 无法设置/红色未定义的属性“x”(水平滚动)
我尝试了不同的方法来设置图像轮播的水平滚动并最终解决了这个问题,但不幸的是我无法弄清楚如何使用Flickity图像滑块解决以下问题。浏览器控制台显示以下错误:
无法设置未定义的属性“x”
无法读取未定义的属性“x”
正如您在codepen.io的这个示例中看到的那样,这些行为非常糟糕
PS:代码在这个 JQuery 插件之上工作。
javascript - 图像轮播中的水平滚动问题
我尝试了不同的方法来设置图像轮播的水平滚动并最终解决了这个问题,但不幸的是我无法弄清楚如何使用Flickity图像滑块解决以下问题。浏览器控制台显示以下错误:
无法设置未定义的属性“x”
无法读取未定义的属性“x”
正如您在codepen.io的这个示例中看到的那样,这些行为非常糟糕
PS:代码在这个 JQuery 插件之上工作。
当我用普通鼠标滚轮测试它时,我看到问题的方式,实际上当你的手指停止时,滚轮停止,所以尽管控制台日志中有错误,你仍然可以轻松地继续导航,一个月前我把我的嘴换成 Apple Magic Mouse,如果我用力转动,我注意到错误日志仍在计数错误,我不能继续直到它到达最后,我还没有在笔记本触摸板上测试它,但我觉得同样的问题将留在那里,我正在寻找他们修复它的方法。
angularjs - Flickity 轮播:使用 ng-repeat 将项目推出视口?
我正在尝试使用 metafizzy 的 flickity 框架来动态显示内容,使用 angulars ng-repeat。
但由于某种原因,这些项目在加载到 DOM 时似乎从 flickity-viewport 中推出。任何人都知道为什么会发生这种情况以及如何避免它?
当像这样在其中显示静态内容时,画廊工作正常;
HTML:静态标记示例
..它在尝试借助 Angular 的 ng-repeat 指令填充画廊时,画廊会中断。
HTML : 使用 NG-REPEAT 标记
JAVASCRIPT
链接到 flickity api:http ://flickity.metafizzy.co/api.htm
javascript - 由于插件完成的 dom 突变导致未捕获的不变违规
我在使用名为flickity的 javascript 插件时遇到了一个问题,它启用了触摸友好的幻灯片图像。
我这样初始化它:
这一切都很好,但问题是它<div ref="carousel"></div>
在我的渲染中定位的 div 被突变为 flickity 元素。当我重新渲染组件时,这有时会导致Uncaught Invariant Violation
错误,因此我想问是否有解决方案来克服这个问题?
这就是我渲染相关组件的方式