title: How to use different image on mobile in ReactJs Slick
body: <p>Is there any way to use mobile image different from the desktop mode in react slick slider? I can use display none for breakpoints but what I want to learn, Is there any different way to do it?</p>
  <pre><code>const Hero = () =&gt; {
    const classes = useStyle();
    const { push } = useRouter();
    const [sliderState, setSliderState] = useState(heroSliderData);
    const [my_swiper, set_my_swiper] = useState({});
    return (
      &lt;section className={classes.section}&gt;
          &lt;Grid style={{ width:&quot;100%&quot;, padding: &quot;0px&quot; }}&gt;
          &lt;Swiper
                loop={true}
                navigation={true}
                onInit={(ev) =&gt; {
                  set_my_swiper(ev);
                }}
              &gt;
                {sliderState.map(({ id, mainheading, mainheading2, subheading, subheading2, buttontext, image }) =&gt; (
                &lt;SwiperSlide key={id}&gt;
                  &lt;Grid item className={classes.hero}&gt;
                  &lt;img className={classes.heroimg} src={image} style={{ position:&quot;relative&quot;}} /&gt;
            &lt;Grid item xs={12} style={{ position:&quot;absolute&quot;, top:&quot;30%&quot;, left:&quot;0&quot;, right:&quot;0&quot;, textAlign: &quot;center&quot; }}&gt;
              &lt;Typography variant=&quot;h1&quot; className={classes.h1}&gt;
              {mainheading}&lt;br /&gt;
              {mainheading2}
              &lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} style={{ position:&quot;absolute&quot;, top:&quot;42%&quot;, left:&quot;0&quot;, right:&quot;0&quot;, textAlign: &quot;center&quot; }}&gt;
              &lt;Typography variant=&quot;h2&quot; className={classes.h2}&gt;
              {subheading} 
                &lt;br/&gt;
                {subheading2}
              &lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12} style={{ position:&quot;absolute&quot;, top:&quot;52%&quot;, left:&quot;0&quot;, right:&quot;0&quot;, textAlign: &quot;center&quot; }}&gt;
              &lt;Button
                variant=&quot;contained&quot;
                onClick={() =&gt; push(&quot;/teklif-al&quot;)}
                className={classes.teklifal}
              &gt;
                {buttontext}
              &lt;/Button&gt;
            &lt;/Grid&gt;
            &lt;/Grid&gt;
            &lt;/SwiperSlide&gt;
            ))}
            &lt;/Swiper&gt;
          &lt;/Grid&gt;
      &lt;/section&gt;
    );
  };
  </code></pre>
  <p>This is my code that I am working on it</p>