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

http://codepen.io/Thisisntme/pen/rVRyJE是对我的网站的测试。我正在尝试添加一个 flickity carousel,并且由于某种原因它不会在 div 中渲染第二个图像。这里是没有所有其他 html 和 css 东西的 carousel。http://codepen.io/Thisisntme/pen/waOeWa

http://codepen.io/Thisisntme/pen/rVRyJE是对我的网站的测试。我正在尝试添加一个 flickity carousel,并且由于某种原因它不会在 div 中渲染第二个图像。这里是没有所有其他 html 和 css 东西的 carousel。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。

编辑:对于那些你谁仍然关心,图像不工作了。谷歌驱动器停止让你从他们的服务器主机。

6

您的.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>
1

好的,所以我也遇到了这个问题,把它留在这里,当下一个 Googler 通过时。每当我添加一个图像到轮播,它不会显示。

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

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

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

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(68)
什么是较少的文件 (css/less)
上一篇
Inno Setup"源文件 C:\ Windows\ System32\ vcruntime140_1.dll不存在" 错误
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(22条)