10 Replies 10 Replies - 23 days ago 7
CSS Question

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 the divs. Here is the the carousel without all the 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.

Answer

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>