Images not showing within carousel-cell? (flickity help)

[S0confused]

I'm trying to create a carousel with product recommendations, but cannot get the images and product titles to show within the carousel-cell

Here's the code I have:

<script src="{{ 'flickity.pkgd.min.js' | asset_url }}" defer></script>
<link rel="stylesheet" href="{{ 'flickity.css' | asset_url }}">

{% comment %} product.metafields.custom.product_recommendations.value {% endcomment %}

{% if section.settings.rec == 'product_recs' %}
  
<div class="carousel">
  {% assign products = product.metafields.custom.product_recommendations.value %}
  {% for product in products %}
    <a href="{{ product.url }}">
      <div class="carousel-cell">     
        <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
        <h4>{{ product.title }}</h4>
      </div> 
    </a>
  {% endfor %}
</div>

{% endif %}

<style>
.carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
  visibility: hidden
}

.carousel-cell.page-loaded {
  visibility: visible;
  
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}
</style>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    // initialize flickity
    var carousels = document.querySelectorAll(".carousel");
    carousels.forEach(function(carousel){
      new Flickity(carousel,{
        //flickity options
        draggable: true,
        freescroll: false,
        wrapAround: true
      });
    });
    // page loaded class instance once flickity has initialized
    var carouselCells = document.querySelectorAll(".carousel-cell");
    carouselCells.forEach(function(cell){
      cell.classList.add("page-loaded");
    });
  });
</script>

{% schema %}
  {
    "name": "Product Recommendations",
    "settings": [
      {
        "type": "select",
        "id": "rec",
        "label": "Product Recs",
        "default": "none",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "product_recs",
            "label": "Product Recs"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Product Recommendations"
      }
    ]
  }
{% endschema %}

which creates a section that looks like this:

when I move the image and product title outside of the <div class="carousel-cell"> the section looks like this:

what in the world am i doing wrong?

[Made4uo-Ribe]

Hi @S0confused 

What you mean move out? It is difficult to help someone when you are using third party packages since it needs debugging but the the updated code below. 

<script src="{{ 'flickity.pkgd.min.js' | asset_url }}" defer></script>
<link rel="stylesheet" href="{{ 'flickity.css' | asset_url }}">

{% comment %} product.metafields.custom.product_recommendations.value {% endcomment %}

{% if section.settings.rec == 'product_recs' %}
  
<div class="carousel">
  {% assign products = product.metafields.custom.product_recommendations.value %}
  {% for product in products %}
    <a href="{{ product.url }}" class="carousel-cell">
      <div>     
        <img src="{{ product.featured_image | img_url: '300x300' }}" alt="{{ product.title }}">
        <h4>{{ product.title }}</h4>
      </div> 
    </a>
  {% endfor %}
</div>

{% endif %}

<style>
.carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
  visibility: hidden
}

.carousel-cell.page-loaded {
  visibility: visible;
  
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}
</style>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    // initialize flickity
    var carousels = document.querySelectorAll(".carousel");
    carousels.forEach(function(carousel){
      new Flickity(carousel,{
        //flickity options
        draggable: true,
        freescroll: false,
        wrapAround: true
      });
    // page loaded class instance once flickity has initialized
    var carouselCells = carosel.querySelectorAll(".carousel-cell");
    carouselCells.forEach(function(cell){
      cell.classList.add("page-loaded");
    });
    });
  });
</script>

{% schema %}
  {
    "name": "Product Recommendations",
    "settings": [
      {
        "type": "select",
        "id": "rec",
        "label": "Product Recs",
        "default": "none",
        "options": [
          {
            "value": "none",
            "label": "None"
          },
          {
            "value": "product_recs",
            "label": "Product Recs"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Product Recommendations"
      }
    ]
  }
{% endschema %}

[S0confused · Accepted solution]

it turns out I had to remove a section of code that I had included when looking at the flickity code examples on their website:

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

I also had to play around with the cell size, and ended up with this code, with everything else staying the same:

{% if section.settings.rec == 'product_recs' %}
  
<div class="carousel">
  {% assign products = product.metafields.custom.product_recommendations.value %}
  {% for product in products %}
    <a href="{{ product.url }}" class="carousel-cell">
      <div>     
        <img src="{{ product.featured_image | image_url: width: 270, height: 380 }}" alt="{{ product.title }}">
        <h4>{{ product.title }}</h4>
      </div> 
    </a>
  {% endfor %}
</div>

{% endif %}

<style>
.carousel-cell {
  width: 270px;
  height: 450px;
  margin-right: 10px;
  border-radius: 5px;
  counter-increment: carousel-cell;
  visibility: hidden
}

.carousel-cell.page-loaded {
  visibility: visible;
  
}
</style>

 this gave enough room for the product image (with some being cropped slightly, to keep the sizes consistent), and 2 lines of the product title:

just thought I would share, in case anyone else has the same issue