Slider de Imagens Interativo • Demonstração

0 Marcos 10:01

🎠 Slider de imagens interativo

Use o controle deslizante abaixo para navegar entre as imagens. Cada posição mostra uma foto diferente.

💡 Como funciona: mova o botão deslizante para a esquerda ou direita. A imagem é alterada instantaneamente. Neste exemplo há três imagens.

🌄 Imagem 1 🏞️ Imagem 2 🌅 Imagem 3

📸 Imagem atual: 1 / 3

✅ Explicação do código: Este slider foi criado com o elemento <input type="range"> e JavaScript. Quando o usuário move o controle, a imagem (elemento <img>) tem seu atributo src alterado conforme o valor selecionado. Você pode adicionar mais opções incluindo novos "else if" e imagens adicionais.

⚙️ Código original do exemplo:
var slider = document.getElementById("slider"); var image = document.getElementById("image"); slider.oninput = function() { if (this.value == 1) image.src = "imagem1.jpg"; else if (this.value == 2) image.src = "imagem2.jpg"; else if (this.value == 3) image.src = "imagem3.jpg"; }