Slideshow

Demonstração do widget

Este widget serve para adicionar várias imagens que se alternam num tempo especificado. É bem útil para colocar logos se alternando no canto do overlay.

Agradecimentos especiais à Dabs, do Pra Quem Gosta, por me permitir publicar este widget que eu fiz pra uso dela ^^

Te ajudei? Me manda um cafézinho ^^

[email protected]

Índice:

Guia de configuração

Antes de começar, se você não sabe instalar um widget no StreamElements, veja aqui como instalar.

Transição

Controla o tempo que vai levar na troca de cada imagem, e o tempo da transição entre as duas imagens.

Imagens

Aqui você irá inserir todas as imagens que serão exibidas no widget. Se você quiser inserir um video, sugiro converter para GIF com uma ferramenta como o EzGif

Códigos

Veja aqui como instalar um widget customizado no StreamElements.

HTML

<body 
    style="--transitionSpeed: {{transitionSpeed}}ms"
    data-imagesurls="{{imagesURLs}}"
    data-transitioninterval="{{transitionInterval}}"
></body>

CSS

* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    width: 100vw;
    height: 100vh;

    transition: var(--transitionSpeed) ease-in-out;
    opacity: 0%;
}

[visible='true'] {
    opacity: 100%;
}

Javascript

window.onload = () => {

    // Cria o HTML das imagens
    let imagesURLs = document.body.dataset.imagesurls.split(",")
    imagesURLs.forEach(url => {
        document.body.insertAdjacentHTML("beforeend", `<div class="image" style="background-image: url('${url}');"></div>`)
    })

    // Obtém as variáveis para o loop de imagens
    let interval = parseInt(document.body.dataset.transitioninterval)
    let images = document.querySelectorAll(".image[style*='streamelements.com']")
    let counter = 0

    // Exibe a primeira imagem
    document.querySelector(".image[style*='streamelements.com']").setAttribute('visible', 'true')

    // Cria o loop
    setInterval(() => {
        if (counter == images.length) counter = 0
        images.forEach((e) => e.setAttribute('visible', 'false'))
        images[counter].setAttribute('visible', 'true')
        counter++
    }, interval);

}

Fields

{

    "credits1": {
        "type": "checkbox",
        "value": true,
        "label": "Detalhes de como fazer a configuração podem ser encontrados no site toolbox.danifluffy.dev :)",
        "group": "Slideshow | DaniFluffyCat ^^"
    },
    "credits2": {
        "type": "text",
        "label": "Você pode copiar o link abaixo:",
        "value": "toolbox.danifluffy.dev",
        "group": "Slideshow | DaniFluffyCat ^^"
    },
    "transitionSpeed": {
        "group": "Transição",
        "type": "slider",
        "label": "Velocidade da transição (ms)",
        "value": 200,
        "min": 50,
        "max": 2000,
        "step": 50
    },
    "transitionInterval": {
        "group": "Transição",
        "type": "slider",
        "label": "Tempo entre imagens (ms)",
        "value": 5000,
        "min": 500,
        "max": 60000,
        "step": 500
    },
    "imagesURLs": {
        "group": "Imagens",
        "type": "image-input",
        "multiple": true,
        "label": "Imagens"
    }
}

Te ajudei? Me manda um cafézinho ^^

[email protected]