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

Question

http://codepen.io/Thisisntme/pen/rVRyJE是对我网站的测试。 我正在尝试添加一个轻柔的轮播，由于某种原因，它不会在 div 中呈现第二个图像。 这是没有所有其他 html 和 css 内容的轮播。 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;
}

Heres证明图片链接是好的

哦，没有 jQuery。

编辑：对于那些仍然关心的人，图像不再起作用。 Google Drive 停止让您从他们的服务器托管。

Answer 1

你的.gallery-cell只需要100%的width ，至少对我来说，你的img标签需要明确关闭。 为了解决大小问题，我使用 JS 显式初始化 Flickity，而不是隐式使用 HTML 类。

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>

Answer 2

好的，所以我也遇到了这个问题，留在这里等待下一个 Google 员工通过。 每当我向轮播添加图像时，它都不会显示。

这是因为当附加单元格时，图像尚未加载。 含义 Flickity 使该单元格没有内容，从而使.flickity-viewport元素的高度为0px 。

因此，您需要做的是确保将要附加的项目标记为lazyLoaded 。 这让 Flickity 知道它需要在解析内容之前等待imagesLoaded 。

例子：

myNewCell = '<img src="src.png" data-flickity-lazyload="src.png" />
flkty.append(myNewCell);