1

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. enter image description here

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!

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 %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.