İstanbul | Kartal 
JavaScript ile Sıfırdan Slider Yapımı
Web geliştirmede en çok kullanılan bileşenlerden biri olan slider'ları (resim kaydırıcı) JavaScript ile sıfırdan nasıl yapabileceğinizi detaylı kod açıklamalarıyla öğrenin. Bu rehberde, temel HTML/CSS yapısını oluşturup JavaScript ile interaktif hale getireceğiz.
1. Proje Yapısını Oluşturma
Slider'ımız için önce temel HTML ve CSS yapısını hazırlayalım.
HTML Kodu ve Açıklamaları
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Slider Yapımı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider-container">
<div class="slider">
<!-- Her bir slayt -->
<div class="slide active"> <!-- "active" class'ı görünür slaytı belirler -->
<img src="slide1.jpg" alt="Ürün Galerisi 1"> <!-- SEO için alt etiketi ekledik -->
</div>
<div class="slide">
<img src="slide2.jpg" alt="Ürün Galerisi 2">
</div>
</div>
<!-- Önceki/Sonraki butonları -->
<button class="prev-btn">❮</button> <!-- HTML entity kullanımı -->
<button class="next-btn">❯</button>
</div>
<script src="script.js"></script>
</body>
</html>Neden Önemli?
- alt etiketleri: Görselleriniz SEO dostu olur.
- Semantik yapı: Arama motorları slider'ın yapısını anlar.
2. CSS ile Stil Verme
Slider'ımıza temel stilleri ekleyelim.
CSS Kodu ve Açıklamaları
.slider-container {
position: relative;
max-width: 800px; /* Slider genişliği */
margin: 0 auto; /* Ortalama */
overflow: hidden; /* Taşan içeriği gizle */
}
.slider {
display: flex;
transition: transform 0.5s ease; /* Yumuşak geçiş efekti */
}
.slide {
min-width: 100%; /* Her slayt container genişliğinde */
}
.slide img {
width: 100%;
display: block;
}
/* Önceki/Sonraki buton stilleri */
.prev-btn, .next-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.5);
color: white;
border: none;
padding: 10px;
cursor: pointer;
z-index: 10; /* Resimlerin üstünde görünmesi için */
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }Performans İpuçları:
- transition özelliği animasyonu yumuşatır.
- overflow: hidden kaydırma dışındaki slaytları gizler.
3. JavaScript ile İşlevsellik Ekleme
Slider'ı dinamik hale getirelim.
JavaScript Kodu ve Açıklamaları
document.addEventListener('DOMContentLoaded', () => {
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentIndex = 0;
const slideCount = slides.length;
// Slaytları güncelleme fonksiyonu
function updateSlider() {
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
slides.forEach(slide => slide.classList.remove('active'));
slides[currentIndex].classList.add('active');
}
// Sonraki slayta git
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slideCount;
updateSlider();
});
// Önceki slayta git
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
updateSlider();
});
// Otomatik kaydırma (opsiyonel)
setInterval(() => {
currentIndex = (currentIndex + 1) % slideCount;
updateSlider();
}, 3000);
});Kod Analizi:
- translateX: Slaytları yatayda kaydırır.
- % operatörü: Slaytların başa dönmesini sağlar.
- classList: Aktif slaytı görünür yapar.
4. SEO ve Performans Optimizasyonları
Resim Optimizasyonu:
- WebP formatı kullanın.
- loading="lazy" ekleyerek geç yüklenmesini sağlayın.
Erişilebilirlik:
- Butonlara aria-label ekleyin (<button aria-label="Önceki slayt">).
Sonuç: Slider'ınız Hazır!
Bu rehberde:
✅ Temel HTML/CSS yapısını öğrendiniz.
✅ JavaScript ile dinamik slider yaptınız.
✅ SEO ve performans ipuçlarını uyguladınız.
javascript slider yapımı, resim kaydırıcı kodu, slider geliştirme, js ile galeri yapma, web slider tasarımı, frontend slider, javascript projeleri
Hakkımızda
Banner
