Answers.Body: <p>It's not really a Craft CMS question, but...</p>
  
  <p>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).</p>
  
  <p>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 <code>&lt;style&gt;</code> element with media queries targeting each cell.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-19T11:06:11.753Z
Answers.LastActivityDate: 2017-04-20T08:29:53.767Z
Answers.LastEditDate: 2017-04-20T08:29:53.767Z
Answers.UserDisplayName: Clive Portman
Body: <p>I have a homepage carousel using <a href="http://flickity.metafizzy.co/" rel="nofollow noreferrer">http://flickity.metafizzy.co/</a> and the images are set as background images and lazyload.</p>
  
  <p>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?</p>
  
  <pre><code>&lt;!-- Flickity carousel images --&gt;
  &lt;div id="carousel-a" class="carousel"&gt;
  
  {% if entry.carouselImage1.first() %}
    &lt;div class="carousel-cell" data-flickity-bg-lazyload="{{ entry.carouselImage1.first().url('homeCarouselLarge') }}"&gt;&lt;/div&gt;
  {% endif %}
  
  {% if entry.carouselImage2.first() %}
    &lt;div class="carousel-cell" data-flickity-bg-lazyload="{{ entry.carouselImage2.first().url('homeCarouselLarge') }}"&gt;&lt;/div&gt;
  {% endif %}
  
  {% if entry.carouselImage3.first() %}
    &lt;div class="carousel-cell" data-flickity-bg-lazyload="{{ entry.carouselImage3.first().url('homeCarouselLarge') }}"&gt;&lt;/div&gt;
  {% endif %}
  
  &lt;/div&gt;
  </code></pre>
  
Tags: <responsive-images>
Title: Responsive background images in carousel
ThreadText: # Responsive background images in carousel
  
  (Asked by: username_0 on 2017-04-19)
  
  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>
  
  ```
  
  **Tags:** responsive-images
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-04-19. Score: 2 | Accepted answer
  
  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.
  
  
  ---
  
  