Gerador de slider antes/depois
Crie um controle deslizante interativo de comparação entre duas imagens (antes/depois) diretamente no navegador, visualize-o em tempo real e depois copie o código HTML/CSS para incorporá-lo ao seu próprio site.
Como funciona
A imagem “depois” é exibida em tamanho total ao fundo, enquanto a imagem “antes” é sobreposta em um contêiner cuja largura é controlada por um controle deslizante invisível: ao arrastá-lo, você revela aos poucos a imagem de baixo. A prévia acima funciona diretamente na ferramenta, e o código gerado reproduz o mesmo princípio em HTML/CSS puro, sem dependência externa de JavaScript.
Como incorporar o código gerado no meu site?
Copie o código HTML gerado e substitua os dois atributos src pelos caminhos reais das suas imagens (hospedadas no seu servidor) ou por suas versões completas codificadas em base64; o controle nativo input[type=range] incluído no código cuida da interatividade sem biblioteca adicional.
Posso alterar os rótulos “antes” e “depois”?
Sim, os campos de rótulo permitem personalizar o texto exibido em cada canto do slider (por exemplo “Antes da reforma” / “Depois da reforma”, ou datas), tanto na prévia quanto no código gerado.
A prévia e a geração do código acontecem inteiramente no seu navegador: suas imagens nunca são enviadas a um servidor.