Html & Css İle Özelleştirilebilir Bir Görsel Döngü Kaydırıcısı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için herhangi bir özel kurulum veya derleyiciye ihtiyacınız yoktur. Modern bir web tarayıcısı (Chrome, Firefox, Edge veya Safari) ve temel bir metin düzenleyici (VS Code gibi) yeterlidir. 2026 yılı standartlarında, modern CSS sözdizimini destekleyen güncel tarayıcı sürümleriyle çalışmanız, animasyonların ve yerleşim özelliklerinin sorunsuz çalışması için önemlidir.

• Modern bir kod editörü (Visual Studio Code önerilir).
• Temel düzeyde HTML5 ve CSS3 bilgisi.
• Test amaçlı kullanılabilecek, optimize edilmiş 3-4 adet görsel dosyası.
• Tarayıcı geliştirici araçları (F12) ile hata ayıklama yetisi.

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

Kaydırıcımızın temel iskeletini oluştururken semantik (anlamlı) HTML etiketleri kullanmak, erişilebilirlik ve SEO açısından büyük önem taşır. Bir ana kapsayıcı (container) ve bu kapsayıcının içinde görselleri barındıran bir liste yapısı kullanacağız.

Burada slider-container sınıfı, kaydırıcının görüneceği pencereyi temsil ederken, slider-wrapper ise tüm görsellerin yan yana dizileceği alanı tanımlar. Görsel dosyalarınızın aynı klasörde olduğundan emin olun.

Adım 2: CSS ile Görünümü Şekillendirme

Şimdi görsellerin yan yana dizilmesini ve kaydırma özelliklerini tanımlayalım. CSS Flexbox kullanarak görselleri yatay düzlemde hizalayacağız. scroll-snap-type özelliği, modern tarayıcılarda kaydırma hareketinin belirli noktalarda durmasını sağlayan en kritik bileşendir.

.slider-container {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
}

.slider-wrapper {
  display: flex;
}

.slider-wrapper img {
  scroll-snap-align: start;
  width: 100vw;
  height: 400px;
  object-fit: cover;
}

Bu CSS bloğunda overflow-x: auto ile yatay kaydırma çubuğunu aktif hale getirdik. scroll-snap-align: start değeri ise her görselin kaydırma bittiğinde kapsayıcının başlangıç noktasına hizalanmasını sağlar.

Adım 3: Kaydırma Çubuğunu Gizleme ve Estetik Düzenlemeler

Kullanıcıların kaydırma çubuğunu görmemesi, daha profesyonel bir görünüm sağlar. CSS'in scrollbar-width ve ::-webkit-scrollbar sözdizimini kullanarak bu çubuğu gizleyebiliriz. Ayrıca görsellerin boyutlarını cihaz uyumlu (responsive) hale getirelim.

/* Firefox için */
.slider-container {
  scrollbar-width: none;
}

/* Chrome, Safari ve Edge için */
.slider-container::-webkit-scrollbar {
  display: none;
}

Bu kod bloğu, kaydırma işlevselliğini bozmadan görsel karmaşayı ortadan kaldırır. Kullanıcılar dokunmatik ekranlarda kaydırma yaparak veya fare tekerleğini kullanarak görseller arasında geçiş yapabilirler.

Adım 4: Özelleştirilebilir Navigasyon Butonları Ekleme

Sadece kaydırma ile yetinmeyip, kullanıcılara ileri ve geri butonları sunmak deneyimi iyileştirir. Bunun için çok küçük bir miktar JavaScript (Vanilla JS) kullanarak kaydırma mesafesini kontrol edebiliriz. Bu yöntem, ağır kütüphanelere göre çok daha hızlı çalışır.

const container = document.querySelector('.slider-container');

function kaydir(yon) {
  const scrollAmount = window.innerWidth;
  container.scrollBy({
    left: yon === 'ileri' ? scrollAmount : -scrollAmount,
    behavior: 'smooth'
  });
}

Bu fonksiyon, butonlara tıklandığında ekran genişliği kadar kaydırma yapar. behavior: 'smooth' parametresi, geçişin yumuşak bir animasyonla gerçekleşmesini sağlar.

Adım 5: Performans ve SEO Karşılaştırması

Aşağıdaki tablo, saf HTML/CSS yönteminin geleneksel JavaScript kütüphanelerine göre avantajlarını özetlemektedir.

Adım 6: Güvenlik ve Hata Ayıklama İpuçları

Web geliştirme sürecinde, özellikle dış kaynaklı görseller kullanıyorsanız güvenlik önlemlerini ihmal etmemelisiniz. Görsellerin 'lazy loading' (tembel yükleme) özelliğini kullanarak sayfa hızını optimize edin.

Dikkat: Kullanıcı tarafından yüklenen görselleri doğrudan

etiketlerinde kullanırken, XSS (Cross-Site Scripting) saldırılarına karşı dosya türü doğrulaması yapmayı ve sunucu tarafında temizleme işlemlerini gerçekleştirmeyi unutmayın. Kodunuzu üretim ortamına almadan önce farklı tarayıcılarda mutlaka test edin.

Yaygın bir hata, görsellerin farklı boyutlarda olmasıdır. object-fit: cover kullanarak tüm görsellerin aynı oranda kırpılmasını ve düzgün görünmesini sağlayabilirsiniz. Eğer kaydırma çalışmıyorsa, kapsayıcı elemanın genişliğinin 100% olduğundan emin olun.

Sıkça Sorulan Sorular

CSS ile yapılan kaydırıcı mobil cihazlarda çalışır mı?

Evet, CSS scroll-snap teknolojisi modern mobil tarayıcıların tamamında desteklenmektedir ve dokunmatik kaydırma hareketleriyle tam uyumludur.

Neden JS kütüphanesi yerine CSS tercih etmeliyim?

Daha az kod, daha hızlı sayfa yüklenmesi ve tarayıcı kaynaklarının daha verimli kullanılması için CSS tercih edilmelidir. Özellikle basit görsel galeriler için kütüphane yüklemek gereksiz bir trafik maliyetidir.

Görsellerin otomatik dönmesini nasıl sağlarım?

Otomatik döngü için CSS @keyframes kullanarak belirli aralıklarla scrollLeft değerini güncelleyen bir animasyon tanımlayabilirsiniz, ancak bu işlem genellikle JavaScript ile daha stabil kontrol edilir.

Görsel üzerine yazı ekleyebilir miyim?

Evet, slider-wrapper içindeki her görseli ayrı bir div içine alarak, bu div içerisine metin katmanları ekleyebilir ve CSS position: absolute ile konumlandırabilirsiniz.

SEO açısından nelere dikkat etmeliyim?

Her görsel için mutlaka açıklayıcı alt etiketleri kullanın. Bu, hem arama motorlarının içeriği anlamasını sağlar hem de erişilebilirlik standartlarını karşılar.

İleri Seviye Özelleştirme: CSS Scroll-Snap ile Geçiş Efektleri

Standart kaydırma deneyimini daha akıcı hale getirmek için scroll-behavior ve scroll-snap-type özelliklerini bir adım öteye taşıyabilirsiniz. Kullanıcıların kaydırma yaparken görsellerin tam ortalanmasını sağlamak, profesyonel bir kullanıcı deneyimi sunar.

Aşağıdaki CSS bloğu, kaydırma işlemini daha "yumuşak" (smooth) hale getirir ve her görselin tam ekran oturmasını zorunlu kılar:

.slider-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS cihazlar için akıcılık */
}

.slider-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

Bu yapı, kullanıcının kaydırma çubuğunu bıraktığı anda görselin en yakın hizalama noktasına "mıknatıs" gibi çekilmesini sağlar. -webkit-overflow-scrolling özelliği ise özellikle eski iOS sürümlerinde kaydırmanın takılmasını engellemek için kritik öneme sahiptir.

Performans Optimizasyonu ve Görsel Yükleme Stratejileri

Görsel döngü kaydırıcıları, sayfa açılış hızını doğrudan etkileyen unsurlardır. Çok sayıda yüksek çözünürlüklü görsel kullanmak, LCP (Largest Contentful Paint) skorunuzu düşürebilir. Bu durumu engellemek için tarayıcı düzeyinde yerleşik optimizasyon tekniklerini kullanmalısınız.

Lazy Loading (Tembel Yükleme) Kullanımı

Kullanıcı kaydırıcıya gelene kadar görsellerin yüklenmesini ertelemek için HTML5 loading="lazy" niteliğini kullanın. Bu, sayfanın ilk yüklenme süresini ciddi oranda kısaltır.

Modern Görsel Formatları

JPEG veya PNG yerine, daha yüksek sıkıştırma oranına sahip WebP veya AVIF formatlarını tercih edin. Bu formatlar, görsel kalitesinden ödün vermeden dosya boyutunu %30 ile %50 arasında küçültebilir.

Deployment ve Tarayıcı Testleri

Kaydırıcınızı canlıya almadan önce farklı görüntü oranlarında (aspect ratio) test etmeniz gerekir. Özellikle aspect-ratio CSS özelliği, görseller yüklenirken oluşan "layout shift" (düzen kayması) sorununu engellemek için kullanılmalıdır.

.slider-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Bu kod parçası, görsel henüz yüklenmemiş olsa bile tarayıcıya o alan için 16:9 oranında bir boşluk ayırmasını söyler. Böylece sayfa yüklendiğinde içerik aşağıya doğru aniden kaymaz ve kullanıcı deneyimi (CLS - Cumulative Layout Shift) korunmuş olur. Yayına almadan önce mutlaka Google Lighthouse üzerinden performans raporunuzu kontrol etmeyi ihmal etmeyin.

Sonuç

Html & Css ile özelleştirilebilir bir görsel döngü kaydırıcısı yapmak, modern web standartlarında oldukça verimli ve sürdürülebilir bir yöntemdir. Bu rehberde öğrendiğiniz scroll-snap ve temel CSS yerleşim teknikleri, projelerinizde performans kaybı yaşamadan etkileyici arayüzler oluşturmanıza olanak tanır. Bir sonraki adım olarak, bu yapıyı daha karmaşık hale getirmek isterseniz CSS Grid sistemlerini inceleyerek çok sütunlu galeri yapılarına geçiş yapabilirsiniz. Kodlarınızı her zaman temiz tutun ve tarayıcı uyumluluğunu düzenli olarak kontrol edin.