Can't make responsive images work with parallax.js - plus image missing from jsfiddle

I have a mixture of scrolling and parallax images. I need one of the parallax images to be responsive - either scale with the width of the viewport (preferred), or display a different image.

Or failing that, switch the parallax image with a static image at certain viewport widths.

Images are not being swapped.

I put together a jsfiddle using the responsive example from github, and the images do not change when the viewport changes.

When I tried to take the responsive version out and replace it with the usual parallax code, it doesn't show at all.

Since the JS is creating the mirror images with the widths and visibility specified with style, there's no way to override the width or visibility.

<div class="text-block">
<p>...</p>
</div>
<figure>
        <img src="/link/to/image.jpg" alt="">
<!-- static image -->
<figcaption>...</figcaption>
            </figure>
    
    
    <div class="text-block">
    <p>...</p>
    
    </div>
          
   <figure> 
    <div class="parallax-window" data-parallax="scroll" data-image-src="/link/to/image.jpg" ></div>
<!-- parallax image -->
  <figcaption>...</figcaption>
  
  </figure>  
          <div class="text-block">
        <p>...</p>    
          </div>
          <figure>

<div class="parallax-window">
  <div class="parallax-slider">
    <img src="/link/to/image.jpg" srcset="/link/to/image.jpg 1000w, /link/to/another/image.jpg 800w, /link/to/yet-another/image.jpg 500w" sizes="100vw">
  </div>
</div>
 <!-- image is not responsive. -->
    <figcaption>....</figcaption>
  </figure>
   
<div class="text-box">
<p>...</p>
</div>
      <figure>
    <div class="parallax-window" data-parallax="scroll" data-image-src="/link/to/image.jpg"></div>
    <!-- this image is parallax -->
    <figcaption>...</figcaption>
    </figure>
   <div class="text-block">
   <p>...</p>
   </div>

Here's the fiddle: https://jsfiddle.net/RioBrewster/vy6rhtfz/39/