const slider = document.querySelector('.slider'); const beforeImage = document.querySelector('.before'); const container = document.querySelector('.slider-container'); let isDragging = false; slider.addEventListener('mousedown', () => { isDragging = true; }); window.addEventListener('mouseup', () => { isDragging = false; }); window.addEventListener('mousemove', (event) => { if (!isDragging) return; const rect = container.getBoundingClientRect(); let offsetX = event.clientX - rect.left; if (offsetX < 0) offsetX = 0; if (offsetX > rect.width) offsetX = rect.width; const percentage = (offsetX / rect.width) * 100; beforeImage.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`; slider.style.left = `${percentage}%`; }); .slider-container { position: relative; width: auto; max-width: auto; aspect-ratio: 16/9; overflow: hidden; border: 2px solid #ccc; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .slider-container img { position: absolute; top: 0; left: 0; width: auto; height: auto; object-fit: cover; pointer-events: none; /* Kullanıcı müdahalesini önler */ } .slider-container .before { clip-path: inset(0 50% 0 0); } .slider-container .slider { position: absolute; top: 0; left: 50%; width: auto; height: auto; background: #000; cursor: ew-resize; transform: translateX(-50%); z-index: 2; } .slider-container .slider::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; background-color: #fff; border: 3px solid #000; border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .slider-container .slider:hover::before { background-color: #ddd; } .slider-container { position: relative; width: auto; max-width: auto; overflow: hidden; } .slider { width: auto; background: #fff; height: auto; position: absolute; cursor: ew-resize; } .filter-text { top: 40%; /* Yüksekliği yukarı aldık */ left: 50%; transform: translate(-50%, -50%); font-size: 2rem; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); pointer-events: none; } .before { position: absolute; top: 0; left: 0; } /* Görüntüde mavilik çıkmasını engelleyen düzenleme */ .slider-container img { user-select: none; /* Seçimi kapatır */ -webkit-user-drag: none; /* Sürükleme davranışını kapatır */ outline: none; /* Mavi tonları engeller */ }