5

http://codepen.io/Thisisntme/pen/rVRyJEは私のウェブサイトのテストです。flickity カルーセルを追加しようとしていますが、何らかの理由で div の 2 番目の画像がレンダリングされません。これは、他のすべての 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;
}

画像リンクが良好であることの証明

美術 もの

ああ、jQuery はありません。

編集: まだ気にしている方のために、画像はもう機能しません。Google ドライブでは、サーバーからホストすることはできなくなりました。

4

2 に答える 2

6

.gallery-cell必要だったwidthのは of100%で、少なくとも私にとっては、imgタグを明示的に閉じる必要がありました。サイズの問題を回避するために、HTML クラスを暗黙的に使用する代わりに、JS を使用して Flickity を明示的に初期化しました。

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>

于 2015-08-09T22:46:30.703 に答える