<div class="carrossel-container">
<div class="carrossel-simples" id="carrossel-simples">
<!-- SLIDE 1 - Personalize com seu link e imagem -->
<div class="carrossel-slide">
<a href="#link-slide-1" class="slide-link" data-url="https://seu-link-aqui-1.com">
<img src="URL-DA-SUA-IMAGEM-1.jpg" alt="Descrição da imagem 1">
</a>
</div>
<!-- SLIDE 2 - Personalize com seu link e imagem -->
<div class="carrossel-slide">
<a href="#link-slide-2" class="slide-link" data-url="https://seu-link-aqui-2.com">
<img src="URL-DA-SUA-IMAGEM-2.jpg" alt="Descrição da imagem 2">
</a>
</div>
<!-- SLIDE 3 - Personalize com seu link e imagem -->
<div class="carrossel-slide">
<a href="#link-slide-3" class="slide-link" data-url="https://seu-link-aqui-3.com">
<img src="URL-DA-SUA-IMAGEM-3.jpg" alt="Descrição da imagem 3">
</a>
</div>
<!-- Você pode adicionar mais slides duplicando o bloco acima -->
</div>
<!-- Indicadores (pontos) no rodapé -->
<div class="indicadores-container" id="indicadores-container"></div>
</div>
<style>
.carrossel-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.carrossel-simples {
display: flex;
transition: transform 0.5s ease;
width: 100%;
}
.carrossel-slide {
min-width: 100%;
position: relative;
overflow: hidden;
}
.slide-link {
display: block;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
.carrossel-slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.indicadores-container {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 10;
}
.indicador {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.indicador.ativo {
background-color: #ffffff;
}
@media (max-width: 768px) {
.indicador {
width: 8px;
height: 8px;
margin: 0 4px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Configuração do carrossel
const carrossel = document.getElementById('carrossel-simples');
const slides = carrossel.querySelectorAll('.carrossel-slide');
const indicadoresContainer = document.getElementById('indicadores-container');
let slideAtual = 0;
const totalSlides = slides.length;
let temporizador = null;
const intervalo = 5000; // 5 segundos entre cada slide
// Cria os indicadores (pontos) para navegação
for (let i = 0; i < totalSlides; i++) {
const indicador = document.createElement('div');
indicador.classList.add('indicador');
if (i === 0) indicador.classList.add('ativo');
indicador.addEventListener('click', function(e) {
e.preventDefault();
irParaSlide(i);
reiniciarTemporizador();
});
indicadoresContainer.appendChild(indicador);
}
const indicadores = indicadoresContainer.querySelectorAll('.indicador');
// Função para atualizar o carrossel
function atualizarCarrossel() {
carrossel.style.transform = `translateX(-${slideAtual * 100}%)`;
// Atualiza os indicadores
indicadores.forEach((ind, index) => {
if (index === slideAtual) {
ind.classList.add('ativo');
} else {
ind.classList.remove('ativo');
}
});
}
// Função para ir para um slide específico
function irParaSlide(indice) {
slideAtual = indice;
if (slideAtual < 0) slideAtual = totalSlides - 1;
if (slideAtual >= totalSlides) slideAtual = 0;
atualizarCarrossel();
}
// Função para avançar para o próximo slide
function proximoSlide() {
irParaSlide(slideAtual + 1);
}
// Função para iniciar o temporizador de autoplay
function iniciarTemporizador() {
temporizador = setInterval(proximoSlide, intervalo);
}
// Função para reiniciar o temporizador
function reiniciarTemporizador() {
clearInterval(temporizador);
iniciarTemporizador();
}
// Método seguro para redirecionamento
function redirecionarSeguro(url) {
if (!url) return;
// Cria um elemento <form> temporário para submissão segura
const form = document.createElement('form');
form.method = 'GET';
form.action = url;
form.target = '_blank';
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
// Adiciona manipuladores de clique para os links
const links = carrossel.querySelectorAll('.slide-link');
links.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
const url = this.getAttribute('data-url');
if (url) {
redirecionarSeguro(url);
}
});
});
// Evento de swipe para dispositivos móveis
let touchStartX = 0;
let touchEndX = 0;
carrossel.addEventListener('touchstart', function(e) {
touchStartX = e.changedTouches[0].screenX;
});
carrossel.addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
});
function handleSwipe() {
if (touchEndX < touchStartX - 50) {
// Swipe da direita para a esquerda
proximoSlide();
reiniciarTemporizador();
} else if (touchEndX > touchStartX + 50) {
// Swipe da esquerda para a direita
irParaSlide(slideAtual - 1);
reiniciarTemporizador();
}
}
// Pausa o carrossel quando o mouse está sobre ele
carrossel.addEventListener('mouseenter', function() {
clearInterval(temporizador);
});
// Reinicia o carrossel quando o mouse sai
carrossel.addEventListener('mouseleave', function() {
iniciarTemporizador();
});
// Inicia o carrossel
iniciarTemporizador();
});
</script>
