Responsive background images in carousel

Question

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

</div>

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.