JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow" class="site-content" role="main">
    <div id="div1_wrapper" class="slides">
        <div id="div1_bg">
            <img src="<?php echo get_option('div1_bg'); ?>" />
        </div>
        <div id="div1_productimg">
            <img src="<?php echo get_option('div1_productimg'); ?>" />
        </div>
    </div>
    <div id="div2_wrapper" class="slides">
        <div id="div2_bg">
            <img src="" alt="2 empty pics" />
        </div>
        <div id="div2_productimg">
            <img src="" alt="2 empty pics" />
        </div>
    </div>
    <div id="div3_wrapper" class="slides">
        <div id="div3_bg">
            <img src="<?php echo get_option('div3_bg'); ?>" />
        </div>
        <div id="div3_productimg">
            <img src="<?php echo get_option('div3_productimg'); ?>" />
        </div>
    </div>
    <div id="div4_wrapper" class="slides">
        <div id="div4_bg">
            <img src="" alt="1 empty pic" />
        </div>
        <div id="div4_productimg">
            <img src="<?php echo get_option('div4_productimg'); ?>" />
        </div>
    </div>
</div>

CSS

#div1_wrapper {
    border: 3px solid green;
}
#div2_wrapper {
    border: 3px solid blue;
}
#div3_wrapper {
    border: 3px solid orange;
}
#div4_wrapper {
    border: 3px solid red;
}

JavaScript

$().ready(function() {
   var wrappers= $('.slides');
    for(var i=0;i<wrappers.length;i++) {
        if($(wrappers[i]).find('img[src!=""]').length == 0) {            
            // remove wrappers that do not contain any image with source
            $(wrappers[i]).remove();
        } else {            
            // wrapper should not be removed, but remove all images without any source
            $(wrappers[i]).find('img[src=""]').remove();
        }
    }
    // create the slide show and reload the slides, this time only the ones with proper images
    window.slideShow= {};
    slideShow.slides= $('.slides');
    slideShow.numSlides= slideShow.slides.length;
    slideShow.activeSlide= 0;
    slideShow.slides.hide();
    $(slideShow.slides[0]).show();
    
    window.setInterval(function() {
        $(slideShow.slides[slideShow.activeSlide]).hide('fadein');
        slideShow.activeSlide= slideShow.activeSlide+1 == slideShow.numSlides ? 0 : slideShow.activeSlide+1;
        $(slideShow.slides[slideShow.activeSlide]).show('fadein');
    }, 3000);
});