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!