I have a homepage carousel using http://flickity.metafizzy.co/ and the images are set as background images and lazyload.

What I need to do is to make them into responsive images, so that different images are served up for mobile, tablet and retina screens. But am struggling on how to do it in the code. Can anyone help?

<!-- Flickity carousel images -->
<div id="carousel-a" class="carousel">

{% if entry.carouselImage1.first() %}
  <div class="carousel-cell" data-flickity-bg-lazyload="{{ entry.carouselImage1.first().url('homeCarouselLarge') }}"></div>
{% endif %}

{% if entry.carouselImage2.first() %}
  <div class="carousel-cell" data-flickity-bg-lazyload="{{ entry.carouselImage2.first().url('homeCarouselLarge') }}"></div>
{% endif %}

{% if entry.carouselImage3.first() %}
  <div class="carousel-cell" data-flickity-bg-lazyload="{{ entry.carouselImage3.first().url('homeCarouselLarge') }}"></div>
{% endif %}


1 Answer 1


It's not really a Craft CMS question, but...

I don't remember Flickity supporting what you describe. You could try listening for screen size on pageload (and resize), assigning the correct image to the cell, and then creating the slideshow (destroying it first if it's a resize).

But half the point of lazy loading is to avoid loading images until they're needed anyway, so I'd question whether serving different images for different sizes is the right approach. Probably the easiest method would be to forget lazy loading and use an inline <style> element with media queries targeting each cell.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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