How to display different slides?

Question

JavaScript

Hello. I am making a slider on the site and I have 2 images for each slide. For mobile version and PC. Tell me how to correctly replace the value of src="" depending on the screen? So that once when the page is loaded, that's all.
Now I have this:

<script>
    $(function onload(){
      var mobile = "<?php echo $banner['image_dop']; ?>";
      var pk = "<?php echo $banner['image']; ?>";
      if ( $(window).width() > 1001 ) {
        $('#slide-<?php echo $i; ?>').attr("src", pk);
      } else { $('#slide-<?php echo $i; ?>').attr("src", mobile); }
    });
  </script>
    <a href="<?php echo $banner['link']; ?>"><img id="slide-<?php echo $i; ?>" src="" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>

Answer 1

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

var mobile = "<?php echo $banner['image_dop']; ?>";
var pk = "<?php echo $banner['image']; ?>"; and that hat won't work.