<!-- INÍCIO DO CÓDIGO PARA SEÇÃO DIVIDIDA -->
<div id="before-after-systeme" style="
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
box-sizing: border-box;
">
<!-- Imagem DEPOIS (fundo completo) -->
<div style="
position: relative;
width: 100%;
height: auto;
display: block;
">
<img src="https://via.placeholder.com/800x500/0288d1/FFFFFF?text=DEPOIS" alt="Depois" style="
display: block;
width: 100%;
height: auto;
">
</div>
<!-- Imagem ANTES (parte visível controlada pelo slider) -->
<div id="before-container" style="
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
">
<img id="before-image" src="https://via.placeholder.com/800x500/d32f2f/FFFFFF?text=ANTES" alt="Antes" style="
display: block;
width: 200%;
height: 100%;
object-fit: cover;
object-position: left;
">
</div>
<!-- Divisor deslizante -->
<div id="slider-divider" style="
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
background-color: white;
cursor: ew-resize;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
">
<div id="slider-button" style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
z-index: 11;
cursor: ew-resize;
display: flex;
justify-content: center;
align-items: center;
">
<!-- Setas no botão -->
<div style="
position: absolute;
width: 10px;
height: 2px;
background-color: #333;
transform: rotate(45deg);
left: 10px;
"></div>
<div style="
position: absolute;
width: 10px;
height: 2px;
background-color: #333;
transform: rotate(-45deg);
right: 10px;
"></div>
</div>
</div>
<!-- Etiquetas -->
<div style="
position: absolute;
bottom: 20px;
left: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
z-index: 9;
">ANTES</div>
<div style="
position: absolute;
bottom: 20px;
right: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
z-index: 9;
">DEPOIS</div>
</div>
<script>
// Script para controle do slider em seção dividida
(function() {
// Elementos DOM
const container = document.getElementById('before-after-systeme');
const beforeContainer = document.getElementById('before-container');
const sliderDivider = document.getElementById('slider-divider');
const beforeImage = document.getElementById('before-image');
// Flag para verificar se está arrastando
let isDragging = false;
// Função para atualizar a posição do slider
function updateSliderPosition(clientX) {
// Obtém as dimensões do container
const rect = container.getBoundingClientRect();
// Calcula a posição do mouse relativa ao container (em percentagem)
let position = (clientX - rect.left) / rect.width;
// Limita entre 0 e 1 (0% e 100%)
position = Math.max(0, Math.min(1, position));
// Converte para percentagem
const percentPosition = position * 100;
// Atualiza a posição do divisor e do container "antes"
sliderDivider.style.left = `${percentPosition}%`;
beforeContainer.style.width = `${percentPosition}%`;
// Ajusta a posição da imagem "antes" para compensar
const scale = 100 / percentPosition;
// Só ajusta se a largura for maior que zero (evita divisão por zero)
if (percentPosition > 0) {
beforeImage.style.width = `${scale * 100}%`;
beforeImage.style.objectPosition = 'left';
}
}
// Eventos de mouse
sliderDivider.addEventListener('mousedown', function(e) {
e.preventDefault();
isDragging = true;
});
document.addEventListener('mousemove', function(e) {
if (!isDragging) return;
updateSliderPosition(e.clientX);
});
document.addEventListener('mouseup', function() {
isDragging = false;
});
// Eventos de toque (mobile)
sliderDivider.addEventListener('touchstart', function(e) {
e.preventDefault();
isDragging = true;
});
document.addEventListener('touchmove', function(e) {
if (!isDragging) return;
// Usa a posição do primeiro toque
updateSliderPosition(e.touches[0].clientX);
});
document.addEventListener('touchend', function() {
isDragging = false;
});
// Clique direto no container
container.addEventListener('click', function(e) {
updateSliderPosition(e.clientX);
});
// Inicializa a posição para 50%
function initializePosition() {
updateSliderPosition(container.getBoundingClientRect().left + container.offsetWidth / 2);
}
// Inicializa com diferentes eventos para garantir que funcione
setTimeout(initializePosition, 200);
window.addEventListener('load', initializePosition);
document.addEventListener('DOMContentLoaded', initializePosition);
window.addEventListener('resize', initializePosition);
})();
</script>
<!-- FIM DO CÓDIGO PARA SEÇÃO DIVIDIDA -->
