JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div id="slideshow" class="site-content" role="main">
    
            <div id="div0_wrapper" class="slides" style="border: 3px solid violet;">
                <div id="div1_bg" style="border:1px solid red;">
                    <img class="slider-image" src="" alt="This has no source assigned" />
                </div>

                <div id="div1_productimg" style="border:1px solid red;">
                    <img class="slider-image" alt="Product Image" src="" />
                </div>
            </div>     
                    
            <div id="div1_wrapper" class="slides" style="border: 3px solid red;">
                Some product description about item 1
                <div id="div1_bg" style="border:1px solid red;">
                    <img class="slider-image" src="" alt="This has no source assigned" />
                </div>

                <div id="div1_productimg" style="border:1px solid red;">
                    <img class="slider-image" alt="Product Image" src="<?php echo get_option('div1_productimg'); ?>" />
                </div>
            </div>  
    
            <div id="div1.5_wrapper" class="slides" style="border: 3px solid rose;">
                Some product description about item 1
                <div style="border:1px solid red;">
                    <img class="slider-image" src="" alt="This has no source assigned" />
                </div>

                <div style="border:1px solid red;">
                    <img class="slider-image" alt="Product Image" src="" />
                </div>
            </div>    

            <div id="div2_wrapper" class="slides" style="border: 3px solid green;">
                Some product description about item 2
                <div id="div2_bg">
                    <img class="slider-image" alt="Big Image" src="<?php echo get_option('div2_bg'); ?>" />
                </div>

                <div id="div2_productimg">
                    <img class="slider-image" alt="Product Image"...

JavaScript

$().ready(function() {
    
    // remove all elements without a source
    $('img[src=""]').parent('div').remove();
    $('.slides').hide();
    
    window.slideShow= {};
    
    slideShow.slides= $('.slides .slider-image');
    if (slideShow.slides.length > 0) {
        
        // unhide all slides that contain at least one image
        for (var i=0;i<slideShow.slides.length;i++) {
           $(slideShow.slides[i]).parent('div').parent('div').show();  
        }

        // on initialisation, hide all image slides and show the first element only
        slideShow.slides.hide();
        
        $(slideShow.slides[0]).show();
        // show the first parent container
        $(slideShow.slides[0]).parent('div').parent('div').show('fadein');
        
        // initialise the slideshow properties
        slideShow.activeSlide= 0;
        slideShow.numSlides= slideShow.slides.length;        
        
        // start the show
        window.setInterval(function() {
            
            slideShow.nextSlide= slideShow.activeSlide+1 == slideShow.numSlides ? 0 : slideShow.activeSlide+1;
            
            // hide the element shown before
            $(slideShow.slides[slideShow.activeSlide]).hide('fadein');
        
            // increase the slide counter by 1; start with 0 if end reached
            slideShow.activeSlide= slideShow.nextSlide;
            // show the new image
            $(slideShow.slides[slideShow.activeSlide]).show('fadein');           
        }, 3000);
    }
});