我正在使用Flickity画廊自动循环显示一系列图像,但是图像之间存在淡入淡出的过渡。 我想删除它,以便图像立即更改。

我试图按照该线程中的答案进行操作,但是它们没有用。 从Flickity滑块过渡中删除淡入淡出

我尝试将其添加到CSS中,但是没有运气。

.carousel-cell {
  left: 0 !important;
  opacity: 0;
  transition: opacity 0s ease-in-out;
  z-index: -1;
}

.carousel-cell.is-selected {
  opacity: 1;
  z-index: 0
}

#1楼 票数:0

如果删除transition属性,则不应有任何动画。 根据您提供的问题中的小提琴,如果仅删除过渡,则根本没有过渡。

编辑:

我已经在他们的网站上直接签出了Flickity,他们似乎正在使用一些JavaScript来为transform属性设置动画。 如果您使用类似的东西,则必须对javascript而不是css进行修改。

  ask by Sam translate from so

未解决问题?本站智能推荐:

2回复

使用嵌入了 Flickity 插件的 Youtube 视频

我有一个由Flickity插件提供支持的小画廊,其中包含图像和 Youtube 嵌入视频。 标记类似于: 其中预览图像设置单元格的大小,并且 Youtube iframe 被绝对定位以覆盖单元格: 问题是我实际上无法在单击嵌入的视频时drag我的轮播,因为这会播放/暂停视频,但将视频保持在同
1回复

如何控制轮播中的视频的暂停/播放?

我有一个使用flickity轮播库创建的视频轮播 , 在codepen上可以看到 。 我要发生的是,当用户滑动转盘时,停止播放选定的幻灯片,然后开始播放处于选定中间位置的幻灯片。 现在,使用jQuery,我可以选择播放的幻灯片开始播放: 但是,当幻灯片切换位置时,​​所选幻灯片只是移
2回复

Flickity轮播图片未完全加载

我目前正在使用Flickity库在我的wordpress网站上显示信息。 问题:当网站produkte是第一次加载大量的图片没有得到完全加载但只有前厘米。 我很高兴收到有关此问题的任何提示。 亲切的问候卢卡斯
1回复

Flickity.js图库在加载时崩溃

我正在尝试加载一个基于js的简单画廊-Flickity.js 如示例中所述,我尝试加载画廊,该画廊工作得很好。 但是随机地,画廊在页面加载时崩溃: 我用来启动图库的代码: 我确实了解到,这可能与脚本启动时的文档(图像未加载)有关,因此,我尝试包括document.
2回复

Flickity 不会渲染轮播中的第二个图像

http://codepen.io/Thisisntme/pen/rVRyJE是对我网站的测试。 我正在尝试添加一个轻柔的轮播,由于某种原因,它不会在 div 中呈现第二个图像。 这是没有所有其他 html 和 css 内容的轮播。 http://codepen.io/Thisisntme/pe
1回复

Flickity幻灯片标题和幻灯片编号

我正在实现一个Flickity幻灯片,其中在底部包括一个幻灯片计数器,在顶部包括一个幻灯片标题。 我已经把它们都放在了里面,但是顶部的标题不会显示img alt标签。 这就是我所拥有的-JSfiddle HTML: jQuery的:
4回复

除非我调整浏览器的大小,否则图像不会在 Flickity 中加载

我正在处理一个项目,无论出于何种原因,我的 Flickity 幻灯片中的图像仅在浏览器稍微调整大小时才加载。 这是我的网站:/ 我在 Flickity 中将 resize 设置为 true,所以我不确定这里的问题是什么。 任何帮助将不胜感激。 谢谢! 编辑:问题解决了!
1回复

内容高度更改时扩展Flickity幻灯片的高度

我在快速滑动滑块中有一个div,其内部将包含一个包含一些图像的列表,我最初希望将其隐藏,并且仅在用户选择单击按钮以查看它们时才显示。 当前,这会将所有内容推到扩展div底部的视图之外,以及div以下的任何内容。 我试过使用adaptiveHeight和setGallery选项,这两个