Srcset not working in React react-slick carousel

Question

I'm using React-Slick as an image carousel and I'm trying to sub-out an image for another when the screen size shrinks. I wanted to do this with srcset instead of trying to hack together some background-image solution. However, whenever I try only the first image appears in the srcset appears and the image does not change out when the screen width changes. I've tried refreshing the page and still get the same image. How can I switch out an image responsively using srcset (and if that doesn't work through another technique) at specific screen widths.

I've included the code below. I apologize as it's React, so I haven't been able to make a code snippet.

<div className="imtxt"><img className="person" src='https://preview.ibb.co/dpZWrS/Programming.jpg' srcset="https://preview.ibb.co/dpZWrS/Programming.jpg 1000w, https://preview.ibb.co/fuL4BS/learn_fast.jpg 700w"/><div className="nm"><span><h1>Works Hard</h1><p>I don't give up until I've figured it out.</p></span></div></div>

^^SPECIFIC IMAGE I'M TRYING TO MAKE RESPONSIVE

import React from 'react'
import ReactDOM from 'react-dom'
import Slider from 'react-slick'
import './gallery.css';

class Gallery extends React.Component {
  render () {
    var settings = {
      slidesToShow: 1,
      dots: true,
      slidesToScroll: 1,
      swipe: true,
      autoplay: true,
      fade: true,
    };

    return (
      <div className="container">
        <Slider {...settings} arrows={true} >
          <div className="imtxt"><img className="person" src='https://preview.ibb.co/dpZWrS/Programming.jpg' srcset="https://preview.ibb.co/dpZWrS/Programming.jpg 1000w, https://preview.ibb.co/fuL4BS/learn_fast.jpg 700w"/><div className="nm"><span><h1>Works Hard</h1><p>I don't give up until I've figured it out.</p></span></div></div>
          <div id="imtxt2" className="imtxt"><img src='https://preview.ibb.co/ejUbRS/Webp_net_resizeimage_1.jpg' /><div className="nm"><span class="spn"><h1>Awesome Skills</h1><p>I love to code, and I'm great at it.</p></span></div></div>
          <div className="imtxt"><img src='https://preview.ibb.co/fuL4BS/learn_fast.jpg' /><div className="nm"><span><h1>Fast Learner</h1><p>I'm a fast learner and excited to learn new things.</p></span></div></div> 
        </Slider>
      </div>
    );
  }
}

Carr · Accepted Answer · 2018-02-21T12:01:22.787

To demo react code, use CodeSandbox, I'm gonna provide example below.

It's not the problem of practice of react-slick, it's about the srcset. Maybe you shoud study this thread, there are many reasons that srcset would not work as expected i.e. browser caching.

You could find some solutions in the thread above, but I think we could just reform the code and achieve what you want simply and clearly.

By reforming your first element:

  <div className="imtxt">
      {(window.innerWidth > 700) ? (
          <img src="https://preview.ibb.co/dpZWrS/Programming.jpg" />
       ) : (
          <img src="https://preview.ibb.co/fuL4BS/learn_fast.jpg" />
       )}
       <div className="nm">
       <span>
           <h1>Works Hard</h1>
           <p>I don't give up until I've figured it out.</p>
       </span>
    </div>
  </div>

I try to re-produce your problem here: https://codesandbox.io/s/7k51x38lz6

Stretch and refresh the browser in it to see the result, without ./gallery.css (you could new file in src dir by your own), it doesn't really function normally, but enough to show how to fix the problem.

Btw for promoting time

I have released a react carousel component these days, it handles variable width and height images well, but a pity that it's not supporting "fade" effect yet, this is what it could done with your example: https://codesandbox.io/s/o9ymmnmkx6

Repository

Maybe you could do something with it when you need a carousel next time :)

Srcset not working in React react-slick carousel

1 Answers1