Html & Css İle Özelleştirilebilir Bir Görsel Karşılaştırma Kaydırıcısı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için herhangi bir özel yazılım kurulumuna gerek yoktur. Modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve temel bir metin editörü (VS Code gibi) yeterlidir. 2026 yılı web standartlarına uygun olarak, CSS Grid ve Flexbox gibi güncel yerleşim tekniklerini kullanacağız.

• HTML5: Yapısal iskeleti oluşturmak için.
• CSS3: Görsel katmanları hizalamak ve kaydırıcıyı şekillendirmek için.
• JavaScript: Kullanıcı etkileşimini (fare hareketi) yakalamak için.

Adım 1: HTML Yapısının Oluşturulması

Öncelikle, iki görseli üst üste bindireceğimiz bir kapsayıcı (container) oluşturmalıyız. Bu yapı, görsellerin aynı boyutta olmasını ve birbirini kusursuz şekilde örtmesini sağlayacaktır.

Burada karsilastirma-container ana sarmalayıcıdır. gorsel-ust, kaydırıcının üzerinde hareket edeceği katmanı temsil ederken, kaydirici ise kullanıcının tutup sürükleyeceği görsel çubuktur.

Adım 2: CSS ile Görsel Katmanların Hizalanması

Görsellerin tam olarak üst üste binmesi için position: absolute özelliğini kullanacağız. Bu, görsellerin aynı koordinat sisteminde yerleşmesini sağlar.

.karsilastirma-container {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.gorsel-ust {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.gorsel-alt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

gorsel-ust sınıfına verdiğimiz width: 50% değeri, başlangıçta görselin yarısının görünmesini sağlar. overflow: hidden ise bu katmanın dışına taşan kısımların gizlenmesini garantiler.

Adım 3: Kaydırıcı (Slider) Tasarımı ve İşlevsellik

Kaydırıcı, kullanıcının görseli kontrol etmesini sağlayan görsel tutamaçtır. Bunu CSS ile şık bir hale getirelim.

.kaydirici {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: white;
  cursor: ew-resize;
  z-index: 3;
}

Bu kod, tam ortada dikey beyaz bir çizgi oluşturur. cursor: ew-resize özelliği, kullanıcıya bu öğenin sağa ve sola sürüklenebileceğini görsel bir ipucu olarak sunar.

Adım 4: JavaScript ile Etkileşim Katmanı

Statik yapıyı dinamik hale getirmek için fare hareketlerini izlememiz gerekir. Kullanıcı farenin tuşuna basılı tuttuğunda veya hareket ettirdiğinde, gorsel-ust genişliğini güncelleyeceğiz.

const container = document.querySelector('.karsilastirma-container');
const ustGorsel = document.querySelector('.gorsel-ust');
const kaydirici = document.querySelector('.kaydirici');

container.addEventListener('mousemove', (e) => {
  let x = e.clientX - container.getBoundingClientRect().left;
  ustGorsel.style.width = x + 'px';
  kaydirici.style.left = x + 'px';
});

Bu JavaScript kodu, farenin kapsayıcı içerisindeki X koordinatını hesaplar ve bu değeri hem üst görselin genişliğine hem de kaydırıcının konumuna uygular. Böylece pürüzsüz bir geçiş sağlanır.

Adım 5: Gelişmiş Özelleştirme ve Performans

Kaydırıcınızı daha profesyonel hale getirmek için CSS geçişleri (transitions) ve dokunmatik ekran desteği ekleyebilirsiniz. Aşağıdaki tablo, farklı yöntemlerin karşılaştırmasını sunar.

Güvenlik Uyarısı: Kullanıcı girdilerini doğrudan DOM'a yansıtırken (örneğin dinamik görsel yükleme durumlarında), XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olunmalıdır. Görsel URL'lerini her zaman doğrulayın ve güvenilir kaynaklardan çekin.

Sıkça Sorulan Sorular

Kaydırıcı neden mobil cihazlarda çalışmıyor?

Mobil cihazlarda mousemove yerine touchmove etkinliklerini dinlemeniz gerekir. Kodunuza container.addEventListener('touchmove', ...) bloğunu ekleyerek dokunmatik desteği sağlayabilirsiniz.

Görsellerin boyutu farklıysa ne olur?

Görsellerin aynı boyutta olması şarttır. Farklı boyutlarda görseller kullanıyorsanız, CSS ile object-fit: cover kullanarak görselleri kapsayıcıya zorla sığdırabilirsiniz.

Daha fazla performans için ne yapmalıyım?

Görselleri lazy-load (tembel yükleme) yöntemiyle yüklemek ve CSS'te will-change: transform özelliğini kullanarak donanım hızlandırmasını tetiklemek performansı ciddi oranda artıracaktır.

Kaydırıcıya bir tutamaç ikonu ekleyebilir miyim?

Evet, .kaydirici içerisine bir span veya div ekleyerek CSS ile arka planına bir ok ikonu yerleştirebilirsiniz.

Bu yapı SEO uyumlu mu?

Görsellerin alt etiketlerini doğru doldurduğunuz sürece, bu yapı arama motorları tarafından tamamen erişilebilir ve SEO dostudur.

Görsel Karşılaştırma Kaydırıcısı İçin İleri Düzey Optimizasyon Teknikleri

Kaydırıcı yapınızı oluşturduktan sonra, özellikle yüksek çözünürlüklü görsellerle çalışırken kullanıcı deneyimini (UX) ve sayfa yüklenme hızını korumak için bazı optimizasyonlar yapmanız gerekir. Tarayıcıların görselleri işleme biçimini yönetmek, kaydırıcının akıcılığını doğrudan etkiler.

Görsel Yükleme Stratejileri

Görsellerin aynı anda yüklenmesi, özellikle yavaş ağ bağlantılarında "layout shift" (düzen kayması) sorununa yol açabilir. loading="lazy" özniteliği yerine, kaydırıcı içindeki görseller için ön yükleme (preload) stratejisi kullanmak daha sağlıklıdır.

Ayrıca, object-fit: cover kullanarak görsellerin kapsayıcı içerisinde esnek bir şekilde ölçeklenmesini sağlamak, farklı ekran boyutlarında bozulmaları engeller. CSS tarafında şu yapı, görsellerin kaydırıcıyı tam doldurmasını garanti eder:

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* Sürükleme sırasında hata oluşmasını engeller */
}

Hata Ayıklama ve Tarayıcı Uyumluluğu

Geliştirme sürecinde en sık karşılaşılan sorun, dokunmatik ekranlarda kaydırıcının sayfa kaydırma hareketiyle çakışmasıdır. Bunu engellemek için JavaScript tarafında touch-action CSS özelliğini veya preventDefault() metodunu doğru yapılandırmalısınız.

Dokunmatik Cihazlarda Kaydırma Sorununu Giderme

Kullanıcı kaydırıcıyı hareket ettirmeye çalışırken sayfanın aşağı-yukarı kaymasını önlemek için touch-action: none stilini tutamaç (handle) elementine uygulamak en temiz çözümdür:

.slider-handle {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

Hata Ayıklama Kontrol Listesi

• Konsol Hataları: getBoundingClientRect() fonksiyonunun null dönüp dönmediğini kontrol edin. Bu genellikle element henüz DOM'a yüklenmeden scriptin çalışmasından kaynaklanır.
• Z-Index Çakışmaları: Kaydırıcı tutamacının, görsellerin üzerinde olduğundan emin olun. z-index değerini her zaman en üstte tutun.
• Event Listener Temizliği: mousemove ve mouseup olaylarını window objesine eklediğinizden emin olun, böylece kullanıcı fareyi kaydırıcının dışına çıkarsa bile hareket devam eder.

Aşağıdaki JavaScript parçası, fare kaydırıcı sınırlarının dışına çıksa bile işlemin kesintisiz devam etmesini sağlayan güvenli bir yaklaşımdır:

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  moveSlider(e.clientX);
});

window.addEventListener('mouseup', () => {
  isDragging = false;
});

Bu teknikleri uygulayarak, görsel karşılaştırma aracınızı sadece görsel bir öğe olmaktan çıkarıp, her türlü cihazda kararlı çalışan profesyonel bir arayüz bileşenine dönüştürebilirsiniz.

Sonuç

Html & Css ile özelleştirilebilir bir görsel karşılaştırma kaydırıcısı yapmak, web projelerinize profesyonel bir dokunuş katar. Bu rehberde öğrendiğiniz temel yapı, üzerine ekleyeceğiniz animasyonlar ve CSS efektleri ile daha da geliştirilebilir. Bir sonraki adım olarak, kaydırıcıya "basılı tutma" yerine "tıklama ile sabitleme" özelliği eklemeyi deneyerek kullanıcı etkileşimini derinleştirebilirsiniz.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce tarayıcı testlerini yapmanız ve güvenlik açıklarına karşı girdi kontrollerini sağlamanız önerilir.