Outputting image assets with flickity

Question

I'm trying to use flickity to create a draggable gallery on a single entry template, but I'm having issues with the output.

In the backend it looks like this. A field using multiple assets.

Without flickity I'd put them out like this which lists each image from the field.

{% if entry.gallery|length %}
    {% for image in entry.gallery.all() %}
      <img src="{{ image.url }}" alt="{{ image.title }}" />
    {% endfor %}
  {% endif %}

For flickity to work it needs to look like this

<div class="main-carousel">
  <div class="carousel-cell"><img src=""></div>
  <div class="carousel-cell"><img src=""></div>
  <div class="carousel-cell"><img src=""></div>
</div>

I have trouble combining these two things successfully. The goal is to dynamically output each image from the assets into a carousel-cell div. Does anyone have pointers how to do so? Thank you!

Answer 1

If I understand the question properly, this should do it for you:

{% if entry.gallery|length %}
<div class="main-carousel">
    {% for image in entry.gallery.all() %}
    <div class="carousel-cell">
        <img src="{{ image.url }}" alt="{{ image.title }}" />
    </div>
    {% endfor %}
</div>
{% endif %}