Flickity does not display second image in carousel
http://codepen.io/Thisisntme/pen/rVRyJE is a test of my site. I'm trying to add a carousel and for some reason it won't display the second image in the div. Here is the carousel without all the other html and 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;
}
Proof that image links are good
Oh and no jQuery.
EDIT: For those who still care, the images don't work anymore. Google Drive has stopped accessing your host from its servers.
source to share
For .gallery-cell
just need width
from 100%
, and at least for me, tags img
should be explicitly closed. To get around the sizing issue, I explicitly initialized Flickity with JS instead of implicitly using the 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>
source to share
So, I ran into this problem, leaving it here when the next googler comes along. Whenever I added an image to the carousel, it didn't appear.
This is because the image has not been loaded yet when the cell is added. The Flickity value takes this cell with no content, resulting in the .flickity-viewport
element .flickity-viewport
having a height 0px
.
So you need to make sure that the added element is marked lazyLoaded . This lets Flickity know to wait for imagesLoaded before analyzing the content.
Example:
myNewCell = '<img src="src.png" data-flickity-lazyload="src.png" />
flkty.append(myNewCell);
source to share