- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我有一个 Flickity 旋转木马,其中的所有内容都已设置好并可以正常工作,只是它只显示我拥有的最后一张图片,并在其他图片上重复显示(就好像它在它们上面一样)。我不明白为什么。
这是我的 HTML:
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
</div>
</div>
和 CSS:
.main-carousel {
width: 90%;
align-items: center;
margin-top: 1%;
margin-left: 5%;
height: 420px;
}
.carousel-cell {
width: 100%; /* full width */
padding-left: 10px;
height: 400px;
background: #fff;
/* center images in cells with flexbox */
display: flex;
align-items: center;
justify-content: center;
}
.carousel-cell img {
display: block;
max-height: 100%;
}
非常感谢您的帮助!
.main-carousel {
width: 90%;
align-items: center;
margin-top: 1%;
margin-left: 5%;
height: 420px;
}
.carousel-cell {
width: 100%; /* full width */
padding-left: 10px;
height: 400px;
background: #fff;
/* center images in cells with flexbox */
display: flex;
align-items: center;
justify-content: center;
}
.carousel-cell img {
display: block;
max-height: 100%;
}
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
</div>
</div>
非常感谢您的帮助!
最佳答案
有几个问题。您在加载 jQuery 之前加载 Flickity:
在文档的头部,您有:
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="css/flickity.css" media="screen">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="js/flickity-docs.min.js"></script>
在您的页面末尾,您有:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="index.js"></script>
此外,您还加载了两次 flickity CSS 以及不必要的脚本 flickity-docs.min.js。此脚本仅适用于 flickity 网页中的文档, slider 不需要,它会引发错误。
试试这个:把它放在你的页面的头部:
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
和底部的脚本:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="index.js"></script>
关于html - Flickity 轮播图片不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50253298/
测试用例:Flickity Sample 我正在使用这种笔,但在编辑 flickity-viewport 时遇到了问题。 我正在尝试使视口(viewport)的高度为 它在我的 style.css 上
我正在尝试将 iframe 定位在 flickity 的事件实例中,因为我可能在单个页面上有多个 flickity 实例(最终目标是在用户查看幻灯片时刷新刚刚查看的 iframe)选择另一张幻灯片)。
我希望 flickity slider 隐藏在桌面和更大的设备上。我想我正在按照文档中的说明进行操作,它们看起来很简单,但是,它不起作用。 div 看起来像这样:
Flickity 有事件绑定(bind)。移动到下一张或上一张幻灯片时是否有事件?例如settle event幻灯片稳定后被触发。这确实满足了我的需要,但这里的问题是,如果 Flickity 停留在同
我目前正在使用 Flickity 库在我的 wordpress 网站上显示轮播图。 问题:第一次加载网站 produkte 时,很多图像没有完全加载,只有第一厘米。 我很高兴收到有关此问题的任何提示。
以下 jquery 代码是我用来在屏幕尺寸减小时为我的 div 应用 flickity slider 的代码!但这不起作用...请告诉我这段代码有什么问题: (function($) { $(
我创建了以下 codepane使用 react-flickity-component 显示案例图片: 当我调整浏览器大小时,图像之间的边距会改变并消失 除了刷新页面之外,无论我接下来做什么,图像之间的
我有一个 Flickity 旋转木马,其中的所有内容都已设置好并可以正常工作,只是它只显示我拥有的最后一张图片,并在其他图片上重复显示(就好像它在它们上面一样)。我不明白为什么。 这是我的 HTML:
我正在实现 Flickity幻灯片,其中包括底部的幻灯片计数器和顶部的幻灯片标题。我把它们都放在了里面,但是顶部的标题不会显示应该是 img alt 标签的内容。 这就是我的 - JSfiddle H
我在同一页面上有两个轮播。阅读多个问题 ( https://github.com/metafizzy/flickity/issues/206 ) 和文档 ( https://flickity.meta
http://codepen.io/Thisisntme/pen/rVRyJE是对我的网站的测试。我正在尝试添加一个 flickity 轮播,但出于某种原因,它不会在 div 中呈现第二个图像。这是没
所以,我正在使用这个 https://codepen.io/desandro/pen/wByaqj 然后我像这样激活了 prevNextButtons: true,: $('.characters-m
我有一个包含推荐的 Flickity Carousel。轮播设置为自动播放。 问题是如果用户单击点或下一个/上一个按钮,自动播放就会停止。 这就是我所拥有的: JS var flkty = new F
我目前正在使用 Flickity Carousel创建具有不同电影内容面板的轮播。 轮播正在使用 custom navigation来控制它,而不是旋转木马附带的标准控制。然而,当您到达轮播幻灯片的末
如果轮播单元包含具有特定类的子元素,则尝试将其删除,但不知道如何使用从 flickity 中删除 API 来执行此操作。 使用 jquery mehtods,我可以很好地从 DOM 中删除,但 fli
我想知道用户何时通过单击 Flickity slider 内的链接开始导航到新页面。我在链接上附加了jQuery点击事件,但是当用户滑动并同时点击时,上的点击事件已触发,但不会导航到链接地址。 演示:
我有flickity slider页面加载时应该看起来不错。但页面加载时图像混搭。只有刷新页面一两次后才可以顺利运行。 您可以在此处找到出现意外行为的网站: DEMO 代码 $('.main-gal
我正在使用 Flickity gallery,我希望它循环一次然后停止自动播放。 3 是画廊中的最后一项,所以这就是为什么当画廊在这里落户时我试图调用它。 提前致谢!到目前为止,这是我的代码:
昨天我有一个用户不友好的轮播。然后我搜索其他灵活且响应迅速的旋转木马解决方案,然后谢天谢地我得到了这个 Flickity's carousels a fun to flick by David D
我在我的网站上设置了一个 flickity.js 轮播,我想向它添加几个 mailto 链接。默认情况下,静态点击在轮播中不起作用,所以我不得不使用 staticClick.flickity 事件来捕
我是一名优秀的程序员,十分优秀!