JavaScript ile Slider Yapımı: Adım Adım Rehber (Vanilla, React, Vue + Örnek Kodlar)

📈 1. SEO Uyumlu Slider Yapmak Neden Önemlidir?

Slider bileşenleri genellikle JavaScript ile dinamik olarak yüklendiğinden, arama motorları bu içerikleri göremeyebilir. Özellikle Google dışındaki arama motorlarında JavaScript renderı sınırlı olabilir.

SEO uyumu için dikkat edilmesi gerekenler:

• HTML içeriği sayfa yüklendiğinde DOM içinde yer almalı.

• alt, title, aria-* gibi açıklayıcı etiketler kullanılmalı.

• Lazy loading doğru şekilde uygulanmalı.

• Sayfa açılışında en az bir görsel gösterilmeli.

🏷️ 2. Görsellerin SEO Dostu Etiketlenmesi

Slider’da kullanılan görsellerin her birine mutlaka alt (alternative text) ve tercihen title özellikleri eklenmelidir.

html

<img src="img1.jpg" alt="Yaz kampanyası - 2025 modeller" title="Yaz kampanyası - 2025 modeller">

Bu sayede:

• Arama motorları görseli daha iyi indeksler.

• Ekran okuyucular bu içeriği sesli olarak sunabilir.

• Kullanıcı görsel yüklenmeden önce ne içerdiğini anlayabilir.

🧩 3. Erişilebilirlik (Accessibility – a11y)

Web içeriklerinin herkes için erişilebilir olması bir standart haline gelmiştir. Slider gibi etkileşimli bileşenlerde bu daha da önemlidir.

a11y için öneriler:

• role="region" veya role="group" gibi ARIA roller kullanılmalı.

• Aktif slide için aria-hidden="false"; diğerleri için aria-hidden="true" ayarlanmalı.

• Butonlara aria-label eklenmeli:

html

<button class="prev" aria-label="Önceki görsel">◀</button>
<button class="next" aria-label="Sonraki görsel">▶</button>

• tabindex ile klavye navigasyonu mümkün olmalı.

• Otomatik kayan slider’da kullanıcıya durdurma seçeneği sunulmalı (örneğin: durdur/başlat butonu).

🧠 4. Lazy Loading (Tembel Yükleme)

Tüm görselleri baştan yüklemek sayfa hızını yavaşlatabilir. Özellikle büyük boyutlu görsellerde loading="lazy" kullanmak büyük fayda sağlar:

html

<img src="img2.jpg" alt="Ürün tanıtımı" loading="lazy">

Tarayıcı, bu özelliği destekliyorsa yalnızca görüntü alanındaki (viewport) içerikleri yükleyecektir.

⚙️ 5. Performans Optimizasyonu

Web performansı, kullanıcı deneyimi ve SEO için kilit bir faktördür. İşte slider’da dikkat etmen gereken performans ipuçları:

A. Görsel Optimizasyonu

• .webp veya .avif formatlarını tercih et.

• Görselleri uygun çözünürlükte kullan.

• srcset ile cihazlara göre uygun görsel boyutu sun:

html

<img 
  src="img1-small.jpg"
  srcset="img1-large.jpg 1024w, img1-medium.jpg 768w, img1-small.jpg 480w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Slider görseli"
>

B. Kodları Minimize Et

• CSS ve JavaScript dosyalarını minimize et (örnek: style.min.css, script.min.js)

• Kullanmadığın CSS/JS kodlarını temizle.

C. Kaynakları Asenkron Yükle

• JavaScript dosyasını HTML’de defer ile tanımla:

html
<script src="script.js" defer></script>

Bu sayede HTML renderı tamamlandıktan sonra JavaScript çalışır, sayfa daha hızlı açılır.

🔐 6. Slider’da Kullanıcı Kontrolü

Slider otomatik kayarken kullanıcıya durdurma imkânı sunmak UX açısından önemlidir. Bir buton yardımıyla otomatik geçişi başlatıp durdurabiliriz:

html

<button id="toggleAutoSlide">Oynat/Durdur</button>

JavaScript’te şu şekilde yönetilir:

javascript

let isAutoPlaying = true;

document.getElementById("toggleAutoSlide").addEventListener("click", () => {
  if (isAutoPlaying) {
    clearInterval(slideInterval);
    isAutoPlaying = false;
  } else {
    slideInterval = setInterval(() => {
      currentIndex = (currentIndex + 1) % slides.length;
      showSlide(currentIndex);
    }, 5000);
    isAutoPlaying = true;
  }
});

📱 7. Responsive (Mobil Uyumlu) Tasarım

Mobil cihazlarda slider’ın düzgün çalışması için responsive tasarım şarttır. Bunun için CSS media query’leri kullanılmalıdır:

css

@media (max-width: 768px) {
  .slider {
    max-width: 100%;
  }

  button.prev, button.next {
    font-size: 18px;
    padding: 5px;
  }
}

Ayrıca, mobil kullanıcılar için swipe desteği (önceki bölümde ekledik) hayati önem taşır.

🔘 1. Dot (Nokta) Navigasyonu Eklemek

Slider’ın altında her slide’a karşılık gelen küçük daireler (dots) oldukça kullanışlıdır. Kullanıcılar hangi slide’ta olduklarını görebilir ve direkt geçiş yapabilirler.

HTML Yapısı

html

<div class="dots-container"></div>

CSS

css

.dots-container {
  text-align: center;
  margin-top: 15px;
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

JavaScript

javascript

const dotsContainer = document.querySelector(".dots-container");

slides.forEach((_, i) => {
  const dot = document.createElement("span");
  dot.classList.add("dot");
  if (i === currentIndex) dot.classList.add("active");
  dot.addEventListener("click", () => {
    currentIndex = i;
    showSlide(currentIndex);
    updateDots();
  });
  dotsContainer.appendChild(dot);
});

function updateDots() {
  document.querySelectorAll(".dot").forEach((dot, i) => {
    dot.classList.toggle("active", i === currentIndex);
  });
}

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.remove("active");
    if (i === index) {
      slide.classList.add("active");
    }
  });
  updateDots();
}

Bu şekilde dots navigasyonu aktif olur ve kullanıcılar kolayca geçiş yapabilir.

🖼️ 2. Thumbnail (Küçük Görsel) Navigasyonu

Slider’a küçük görseller ekleyerek kullanıcıların hangi görseli seçeceklerini önizlemeyle görmesini sağlayabiliriz.

HTML

html

<div class="thumbnails"></div>

CSS

css

.thumbnails {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
  flex-wrap: wrap;
}

.thumbnail {
  width: 80px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.thumbnail.active {
  opacity: 1;
  border: 2px solid #000;
}

JavaScript

javascript

const thumbnailsContainer = document.querySelector(".thumbnails");

slides.forEach((slide, i) => {
  const img = slide.querySelector("img");
  const thumb = document.createElement("img");
  thumb.src = img.src;
  thumb.classList.add("thumbnail");
  if (i === currentIndex) thumb.classList.add("active");
  thumb.addEventListener("click", () => {
    currentIndex = i;
    showSlide(currentIndex);
    updateThumbnails();
  });
  thumbnailsContainer.appendChild(thumb);
});

function updateThumbnails() {
  document.querySelectorAll(".thumbnail").forEach((thumb, i) => {
    thumb.classList.toggle("active", i === currentIndex);
  });
}

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.remove("active");
    if (i === index) {
      slide.classList.add("active");
    }
  });
  updateDots();
  updateThumbnails();
}

Bu sistem, özellikle ürün tanıtım slider’larında profesyonel bir görünüm sağlar.

🧩 3. Dinamik Slider İçeriği (JavaScript ile JSON'dan Yükleme)

Slider’ı manuel olarak HTML’e yazmak yerine JavaScript üzerinden dinamik olarak oluşturabiliriz. Özellikle CMS tabanlı projelerde bu yöntem çok işlevseldir.

Örnek JSON İçeriği

javascript

const sliderData = [
  {
    src: "img1.jpg",
    alt: "Yeni sezon ürünleri",
    title: "Koleksiyon 2025"
  },
  {
    src: "img2.jpg",
    alt: "Yaz kampanyası",
    title: "Yaz İndirimleri"
  },
  {
    src: "img3.jpg",
    alt: "Kış serisi",
    title: "Kışa Özel Tasarımlar"
  }
];

JavaScript ile HTML Oluşturma

javascript

const sliderContainer = document.querySelector(".slider");

sliderData.forEach((item, i) => {
  const slideDiv = document.createElement("div");
  slideDiv.classList.add("slide");
  if (i === 0) slideDiv.classList.add("active");

  const img = document.createElement("img");
  img.src = item.src;
  img.alt = item.alt;
  img.title = item.title;

  slideDiv.appendChild(img);
  sliderContainer.appendChild(slideDiv);
});

Bu yapı ile hem görselleri hem de SEO uyumlu alt/title verilerini dışarıdan JSON ile kontrol edebiliriz. Gelişmiş CMS veya e-ticaret sitelerinde bu yaklaşım şarttır.

🧠 Bonus: Daha Fazla Gelişmiş Özellik Fikri

İleri seviye slider projelerinde aşağıdaki özellikler entegre edilebilir:

• Slider’a video desteği (YouTube, MP4)

• Keyboard navigation (← → tuşlarıyla geçiş)

• Slider’a giriş animasyonları (fade, slide, zoom)

• Durum çubuğu (progress bar)

• İçerik katmanı (caption, açıklama metinleri)

jsx

import { useState, useEffect } from "react";

const images = [
  { src: "img1.jpg", alt: "Ürün 1" },
  { src: "img2.jpg", alt: "Ürün 2" },
  { src: "img3.jpg", alt: "Ürün 3" },
];

function Slider() {
  const [currentIndex, setCurrentIndex] = useState(0);

  const nextSlide = () => {
    setCurrentIndex((prev) => (prev + 1) % images.length);
  };

  const prevSlide = () => {
    setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
  };

  useEffect(() => {
    const interval = setInterval(nextSlide, 5000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="slider">
      <button onClick={prevSlide}>◀</button>
      <img
        src={images[currentIndex].src}
        alt={images[currentIndex].alt}
        className="slide"
      />
      <button onClick={nextSlide}>▶</button>
    </div>
  );
}

export default Slider;

vue

<template>
  <div class="slider">
    <button @click="prevSlide">◀</button>
    <img :src="images[currentIndex].src" :alt="images[currentIndex].alt" />
    <button @click="nextSlide">▶</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      images: [
        { src: "img1.jpg", alt: "Görsel 1" },
        { src: "img2.jpg", alt: "Görsel 2" },
        { src: "img3.jpg", alt: "Görsel 3" },
      ],
    };
  },
  mounted() {
    this.autoSlide = setInterval(this.nextSlide, 5000);
  },
  methods: {
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    prevSlide() {
      this.currentIndex =
        (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
  },
  beforeUnmount() {
    clearInterval(this.autoSlide);
  },
};
</script>

html

<div id="slider">
  <img src="img1.jpg" alt="1" class="slide active">
  <img src="img2.jpg" alt="2" class="slide">
  <img src="img3.jpg" alt="3" class="slide">
</div>
<button id="prev">◀</button>
<button id="next">▶</button>

javascript

let currentIndex = 0;
let $slides = $("#slider .slide");

function showSlide(index) {
  $slides.removeClass("active").eq(index).addClass("active");
}

$("#next").click(function () {
  currentIndex = (currentIndex + 1) % $slides.length;
  showSlide(currentIndex);
});

$("#prev").click(function () {
  currentIndex = (currentIndex - 1 + $slides.length) % $slides.length;
  showSlide(currentIndex);
});

setInterval(() => {
  currentIndex = (currentIndex + 1) % $slides.length;
  showSlide(currentIndex);
}, 5000);

css

.slide {
  display: none;
}
.slide.active {
  display: block;
}

⚠️ 1. Sık Yapılan Slider Hataları ve Çözümleri

Hata 1: “Uncaught TypeError: slides is undefined”

Sebep: document.querySelectorAll(".slide") yanlış yerde veya DOM yüklü değilken çalışıyor.

Çözüm:

javascript

document.addEventListener("DOMContentLoaded", () => {
  const slides = document.querySelectorAll(".slide");
  // Kodlar buraya
});

Hata 2: Dots veya Thumbnail’lerin slide ile senkronize olmaması

Sebep: currentIndex güncelleniyor ama dot/thumbnail sınıfı güncellenmiyor.

Çözüm: updateDots() ve updateThumbnails() fonksiyonlarını showSlide() fonksiyonu içine entegre et.

Hata 3: Slider çok hızlı ya da yavaş çalışıyor

Sebep: setInterval() değeri yanlış belirlenmiş.

Çözüm:

javascript

setInterval(() => {
  nextSlide();
}, 3000); // 3 saniyede bir geçiş

Hata 4: Responsive (mobil uyumlu) olmaması

Sebep: CSS media query veya object-fit gibi responsive özelliklerin eksik olması.

Çözüm:

css

@media (max-width: 768px) {
  .slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

🧪 2. Debug Teknikleri

1. console.log() ile kontrol

Slider geçişlerinde console.log(currentIndex) ile geçişlerin doğru çalışıp çalışmadığını kontrol et.

2. DOM Element kontrolü

javascript

if (!slides || slides.length === 0) {
  console.error("Slider içeriği bulunamadı!");
}

3. Tarayıcı geliştirici araçları (DevTools)

• Network sekmesinden görsel yolları (404 hatası) kontrol et.

• Elements sekmesinde display: none veya opacity: 0 durumlarına dikkat et.

4. setTimeout ile animasyonları kontrol et

javascript

setTimeout(() => {
  slide.classList.add("active");
}, 500);

🌐 3. SEO Uyumlu Slider İçin İpuçları

Slider görsellerinin SEO açısından da optimize edilmesi gerekir. Google görsellerden trafik almak için:

• Görsellerin dosya isimleri anlamlı olmalı:
  ✅ yeni-sezon-koleksiyon.jpg
  ❌ img123.jpg

• Görsellere alt ve title attributeleri eklenmeli:

html

<img src="kaban2025.jpg" alt="2025 Kadın Kaban Koleksiyonu" title="Yeni Sezon Kadın Kabanları" />

• Slider başlıkları <h2> veya <h3> gibi SEO önemine sahip etiketlerle kullanılmalı:

html

<h2>2025 İlkbahar Yaz Koleksiyonu</h2>

• Lazy load (gecikmeli yükleme) SEO için önemlidir:

html

<img src="..." loading="lazy" />

🧩 4. Gerçek Hayatta Kullanım Senaryoları

E-ticaret Sitelerinde

• Ürün tanıtımı

• Kampanya slider’ları

• Ön plana çıkarmak istenen ürünler

Blog ve Haber Sitelerinde

• Öne çıkan yazılar

• Galeri içerikleri

• Kategoriye özel slider’lar

Kurumsal Sitelerde

• Ana sayfa vitrin bölümleri

• Müşteri referansları slider’ı

• Proje/portföy galerileri

Uygulamalarda

• Onboarding (ilk açılış) slider’ları

• Mobil uygulamalarda “swipeable” intro’lar

• Dashboard içi görsel yönlendirmeler

🎁 Bonus: Hazır Kütüphaneler

Kod yazmak istemeyenler veya hızlı çözüm isteyenler için slider kütüphaneleri:

• Swiper.js

• Slick Slider

• Glide.js

• Splide

🎉 Sonuç: JavaScript ile Slider Yapımı

Bu kapsamlı makalede, sıfırdan profesyonel düzeyde bir slider yapmayı öğrendin. İşte başardıkların:

✅ Temel slider yapımı
✅ Dots, thumbnail ve dinamik veri yönetimi
✅ React, Vue, jQuery ile entegrasyon
✅ Hata ayıklama ve SEO optimizasyonu
✅ Gerçek projelerde kullanım örnekleri

Artık sadece slider yapmayı değil, bu slider'ı projene nasıl entegre edeceğini ve SEO’dan performansa kadar her yönüyle nasıl optimize edeceğini de biliyorsun. 🚀

İstersen bu slider’ı bir galeriye, bir portföy sitesine ya da e-ticaret kampanyana hemen uygulamaya başlayabilirsin.