new munki banner code

showcase_template_new.html

<script type="text/javascript">
var currentSlide = 0, playing = 1

function slides(){
    return document.querySelectorAll('div.stage>img')
}

function showSlide(slideNumber){
    theSlides = slides()
    for (c=0; c<theSlides.length; c++) {
        theSlides[c].style.opacity="0";
    }
    theSlides[slideNumber].style.opacity="1";
}

function showNextSlide(){
    if (playing) {
        currentSlide = (currentSlide > slides().length-2) ? 0 : currentSlide + 1;
        showSlide(currentSlide);
    }
}

function stageClicked() {
    slide = slides()[currentSlide];
    target = slide.getAttribute('target');
    if (target == '_blank') {
        window.AppController.openExternalLink_(slide.getAttribute('href'));
    } else {
        window.location.href = slide.getAttribute('href');
    }
}

window.onload=function(){
    showSlide(0);
    if (slides().length > 1) {
        setInterval(showNextSlide, 7500);
    }
}
</script>

<style>
    div {
        position: relative;
    }

    @media (prefers-color-scheme: dark) {
        .msc-banner {
            height: 200px;
            background-color: white;
        }
    }

    @media (prefers-color-scheme: light) {
        .msc-banner {
            height: 200px;
            background-color: black;
        }
    }

    .banner-img-centered {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>

<div class="showcase">
    <div class="stage" onClick='stageClicked();'>
        <div class="msc-banner">
            <picture>
                <source srcset="custom/resources/logoLight.png" media="(prefers-color-scheme: dark)">
                <img class="banner-img-centered" href="#" alt="Branding" src="custom/resources/logoDark.png" height="50%">
            </picture>
        </div>
    </div>
</div>

showcase_template_old.html

<script type="text/javascript">
var currentSlide = 0, playing = 1

function slides(){
    return document.querySelectorAll('div.stage>img')
}

function showSlide(slideNumber){
    theSlides = slides()
    for (c=0; c<theSlides.length; c++) {
        theSlides[c].style.opacity="0";
    }
    theSlides[slideNumber].style.opacity="1";
}

function showNextSlide(){
    if (playing) {
        currentSlide = (currentSlide > slides().length-2) ? 0 : currentSlide + 1;
        showSlide(currentSlide);
    }
}

function stageClicked() {
    slide = slides()[currentSlide];
    target = slide.getAttribute('target');
    if (target == '_blank') {
        window.AppController.openExternalLink_(slide.getAttribute('href'));
    } else {
        window.location.href = slide.getAttribute('href');
    }
}

window.onload=function(){
    showSlide(0);
    if (slides().length > 1) {
        setInterval(showNextSlide, 7500);
    }
}
</script>

<div class="showcase">
    <div class="stage" onClick='stageClicked();'>
        <img href="#" alt="Branding" src="custom/resources/logo.png" />
    </div>
</div>

Screen.Recording.2021-03-11.at.9.12.27.AM.mov

if the preview doesn't work try going to the url