CODEWITHSUNDEEP
javascripthtmlcssflickity
10 Replies
10 Replies

Reputation: 436

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;
}

Heres proof the image links are good

art stuff

Oh, and no jQuery.

EDIT: for those of you who still care, the images don't work anymore. Google Drive stopped letting you host from their servers.

Upvotes: 5

Views: 5731

Answers (2)

Romuloux
Romuloux

Reputation: 1183

OK, so I ran into this problem as well, leaving this here for when the next Googler comes through. Whenever I added an image to the carousel it wouldn't show up.

This is because when the cell is appended the image has not loaded yet. Meaning Flickity takes this cell to have no content, making the .flickity-viewport element have a height of 0px.

So what you need to do is make sure that your item that is being appended is tagged to be lazyLoaded. This lets Flickity know that it needs to wait for imagesLoaded before parsing the content.

Example:

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

Upvotes: 1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Your .gallery-cell just needed a width of 100%, and at least for me, your img tags needed to be explicitly closed. To get around a sizing issue, I explicitly initialized Flickity using 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>

Upvotes: 6

Related Questions