How do I add alt tags to an image slideshow using backstretch?

Question

I am trying to add alt tags to an image slideshow using backstretch, but my code below is not working.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/min/jquery.backstretch-min.js"></script> 
<script>
    $.backstretch([
     { url: "img/hero/hero11.jpg", alt: "Some alt text" }, 
     { url: "img/hero/hero10.jpg", alt: "Some alt text 2" },
    ],  {duration: 2000, fade: 750});
  });
});

</script>

I added this to jquery.backstretch-min.js:

 $(document).ready(function() { $('.backstretch img').attr('alt', 'this is a purple background image'); });

And it works for the first image, but when the slideshow changes to the next image the alt tag goes away and never reloads.

reeljanie.com for reference, homepage slideshow needs to have alt tags.

I am very new to js, thanks for your help.

Answer 1

You don't need to add anything to jquery.backstretch-min.js as it supports alt pretty well.

All you need is to fix your JS which has syntax error due to last two lines.
Just remove them:

    $.backstretch([
     { url: "https://picsum.photos/400/230", alt: "Some alt text" }, 
     { url: "https://picsum.photos/400/230", alt: "Some alt text 2" },
    ],  {duration: 2000, fade: 750});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.1.18/jquery.backstretch.min.js"></script>