How do I make a conditionally loaded JS react to dynamic browser widths?

JavaScript
,
1

I have a rotating JS banner that loads only when the screen is 900px or larger:

<script>
// Conditionally load rotating banner, 2 scripts just above </body>:
function loadbanner() {
    var elem = document.createElement('img');
    elem.class = 'slide';
    elem.id = 'slide';
    elem.src = '../images/2014-main1r.jpg';
    elem.width = '900';
    elem.height = '260';
    elem.alt = 'Scrolling slide show';
    var currentDiv = document.getElementById('slideshow'); 
    currentDiv.appendChild(elem); 
};
</script>

<script>
if (document.documentElement.clientWidth > 899) {
    loadbanner();
}

</script>

It successfully shows in this div when I open the browser at 900px or wider:

<!-- SLIDESHOW -->            
        <div id="slideshow"></div>

For smaller screens, a static jpg is displayed:

<!-- STATIC IMAGE replaces slideshow at smaller screen sizes -->        
<img class="main-pic" src="../images/2014-main1r.jpg" alt="">

This static image hides/displays through media queries:

/* RESPONSIVE */

@media screen and (max-width:3000px) {
/* Big screens */
    .main-pic {display:none;}
}
@media screen and (max-width:899px) {
/* Medium */
    .main-pic {display:block;} 
}
@media screen and (max-width:640px) {
/* Small */
    .main-pic {display:block;} 
}

The problem:
When the device is initially loaded/viewed from landscape, the rotating banner is correctly seen, but when the device is rotated to portrait mode, the rotating banner is still seen, but above the static image that is supposed to replace it. (The rotating banner should not be seen in this position when the portrait mode is <900px; only the static image should be visible.)

How do I change the script so the conditional load recognizes dynamic screen width changes, turning off when smaller than 900px? (No Jquery is used in this project, just HTML/CSS/JS.)

Adding .slideshow{display:none;} to the two smaller screens in the responsive section of the CSS does nothing.