Outputting image assets with flickity 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() %}
      &lt;img src="{{ image.url }}" alt="{{ image.title }}" /&gt;
    {% endfor %}
  {% endif %}


For flickity to work it needs to look like this 

&lt;div class="main-carousel"&gt;
  &lt;div class="carousel-cell"&gt;&lt;img src=""&gt;&lt;/div&gt;
  &lt;div class="carousel-cell"&gt;&lt;img src=""&gt;&lt;/div&gt;
  &lt;div class="carousel-cell"&gt;&lt;img src=""&gt;&lt;/div&gt;
&lt;/div&gt;


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!
If I understand the question properly, this should do it for you:

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