Flickity 不渲染轮播中的第二张图片
Flickity does not render the second image in the carousel
http://codepen.io/Thisisntme/pen/rVRyJE is a test of my website. I am attempting to add a flickity carousel, and for some reason it will not render the second image in the divs. Here is the carousel without all the other html and css stuff. http://codepen.io/Thisisntme/pen/waOeWa
<div class="gallery js-flickity">
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art">
</div>
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff">
</div>
<div class="gallery-cell">
</div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery {
padding: 50px 0px 0px 0px;
}
.gallery img {
display: block;
width: 100%;
height:auto;
}
这里证明图像链接是好的
哦,没有 jQuery。
编辑:对于那些仍然关心的人,这些图像不再有效。 Google Drive 停止让您从他们的服务器托管。
您的 .gallery-cell
只需要 width
个 100%
,至少对我来说,您的 img
标签需要明确关闭。为了解决大小问题,我使用 JS 显式初始化了 Flickity,而不是隐式使用 HTML class.
JSFiddle:https://jsfiddle.net/3qr6hub1/2/
var flkty = new Flickity('.gallery');
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery {
padding: 50px 0px 0px 0px;
}
.gallery-cell {
width: 100%;
}
.gallery img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>
<div class="gallery">
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art" />
</div>
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff" />
</div>
<div class="gallery-cell">
</div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
好的,所以我 运行 也遇到了这个问题,留在这里等下一位 Google 员工来解决。每当我将 image 添加到轮播时它都不会显示。
这是因为附加单元格时图像尚未加载。意思是 Flickity 认为此单元格没有内容,使 .flickity-viewport
元素的高度为 0px
.
因此,您需要做的是确保将要附加的项目标记为 lazyLoaded。这让 Flickity 知道在解析内容之前需要等待 imagesLoaded。
示例:
myNewCell = '<img src="src.png" data-flickity-lazyload="src.png" />
flkty.append(myNewCell);
http://codepen.io/Thisisntme/pen/rVRyJE is a test of my website. I am attempting to add a flickity carousel, and for some reason it will not render the second image in the divs. Here is the carousel without all the other html and css stuff. http://codepen.io/Thisisntme/pen/waOeWa
<div class="gallery js-flickity">
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art">
</div>
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff">
</div>
<div class="gallery-cell">
</div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery {
padding: 50px 0px 0px 0px;
}
.gallery img {
display: block;
width: 100%;
height:auto;
}
这里证明图像链接是好的
哦,没有 jQuery。
编辑:对于那些仍然关心的人,这些图像不再有效。 Google Drive 停止让您从他们的服务器托管。
您的 .gallery-cell
只需要 width
个 100%
,至少对我来说,您的 img
标签需要明确关闭。为了解决大小问题,我使用 JS 显式初始化了 Flickity,而不是隐式使用 HTML class.
JSFiddle:https://jsfiddle.net/3qr6hub1/2/
var flkty = new Flickity('.gallery');
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery {
padding: 50px 0px 0px 0px;
}
.gallery-cell {
width: 100%;
}
.gallery img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>
<div class="gallery">
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art" />
</div>
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff" />
</div>
<div class="gallery-cell">
</div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
好的,所以我 运行 也遇到了这个问题,留在这里等下一位 Google 员工来解决。每当我将 image 添加到轮播时它都不会显示。
这是因为附加单元格时图像尚未加载。意思是 Flickity 认为此单元格没有内容,使 .flickity-viewport
元素的高度为 0px
.
因此,您需要做的是确保将要附加的项目标记为 lazyLoaded。这让 Flickity 知道在解析内容之前需要等待 imagesLoaded。
示例:
myNewCell = '<img src="src.png" data-flickity-lazyload="src.png" />
flkty.append(myNewCell);