📌 Genel Bakış
Hero slider'a eklenen tüm interaktif özellikler aşağıda detaylı olarak açıklanmıştır. Her özelliğin ne işe yaradığını, nasıl kullanıldığını ve hangi parametrelerin ne yaptığını öğrenebilirsiniz.
Test URL: https://ixtif.com/design/hero-slider
Slider geçiş efektini değiştirmenizi sağlar. 9 farklı efekt arasından seçim yapabilirsiniz.
🎯 Ne işe yarar?
- Slide'ların geçiş animasyonunu değiştirir
- Her efekt farklı bir görsel deneyim sunar
- Anında değişim - swiper yeniden başlatılır
⚙️ Mevcut Efektler:
- Slide: Klasik yatay kayma
- Fade: Solma/belirme (varsayılan)
- Cube: 3D küp döndürme
- Coverflow: Galeri/carousel efekti
- Flip: Kart çevirme
- Cards: Kart destesi efekti
- Creative: Wave: Dalga hareketi
- Creative: Zoom: Derinlik efekti
- Creative: Rotate: Döndürme efekti
Slide geçişlerinin ne kadar hızlı/yavaş olacağını ayarlar. Slider ile 300ms - 2000ms arası ayarlayabilirsiniz.
🎯 Ne işe yarar?
- Geçiş animasyonunun süresini kontrol eder
- 300ms = Çok hızlı, keskin geçiş
- 800ms = Normal, dengeli geçiş (varsayılan)
- 2000ms = Çok yavaş, sinematik geçiş
💡 Nasıl Kullanılır?
- Slider'ı sola/sağa kaydırın
- Anlık olarak gösterir: 800ms
- Değişiklik anında uygulanır
swiper.params.speed = 800; // Milisaniye cinsinden
Her slide'ın ne kadar süre ekranda kalacağını belirler. 2 saniye - 10 saniye arası ayarlanabilir.
🎯 Ne işe yarar?
- Otomatik geçiş bekleme süresini kontrol eder
- 2s = Hızlı, dinamik sunum
- 5s = Dengeli, rahat okuma (varsayılan)
- 10s = Yavaş, detaylı inceleme
🔄 Progress Bar İle Senkron:
- Linear progress bar bu süreye göre doluyor
- Circular progress (pagination) da bu süreyi kullanıyor
- Süreyi değiştirince tüm progress'ler güncelleniyor
swiper.params.autoplay.delay = 5000; // 5 saniye
Geçiş animasyonunun hız eğrisini değiştirir. Animasyonun başlangıç ve bitiş hızını kontrol eder.
🎯 Easing Türleri:
- Linear: Sabit hız - Baştan sona aynı hızda
- Ease: Yumuşak - Başlangıç ve bitişte yavaş (varsayılan)
- Ease-In: Yavaş başla - Hızlanarak bitir
- Ease-Out: Hızlı başla - Yavaşlayarak bitir
- Ease-In-Out: Hem yavaş başla, hem yavaş bitir
💡 Hangi Durumda Kullanılır?
- Ease: En doğal, çoğu durumda ideal
- Linear: Mekanik, teknik sunumlar
- Ease-Out: Dinamik, enerji verici
Her slide'ı temsil eden dairesel bullet'lar. Aktif slide'ın bullet'i etrafında dönen bir progress ring var - autoplay süresi dolana kadar doluyor.
🎯 Ne işe yarar?
- Kaç slide var gösterir (6 adet bullet)
- Hangi slide'dayız gösterir (mavi/büyük olan)
- Ne kadar süre kaldı gösterir (dönen ring)
- Bullet'a tıklayarak o slide'a atlayabilirsiniz
🎨 Görsel Özellikler:
- Pasif bullet: Gri çember, küçük nokta
- Aktif bullet: Mavi çember, büyük nokta, dönen ring
- Ring 360° dönüp bitince → sonraki slide
- Dark mode'da renkler otomatik değişiyor
/* CSS Animation */
animation: progressRing 5000ms linear forwards;
Sayfanın en üstünde tam genişlikte mavi-mor gradient bir çubuk. Her slide için soldan sağa doluyor.
🎯 Ne işe yarar?
- Otomatik geçiş ilerlemesini gösterir
- 0%'dan başlar, 100%'e kadar doluyor
- Slide değişince sıfırlanıp yeniden başlıyor
- Görsel geri sayım etkisi yaratıyor
⚙️ Teknik Detay:
- 50ms aralıklarla güncelleniyor (smooth)
- Autoplay delay süresine göre hız ayarlıyor
- Play/Pause ile durduruluyor/devam ediyor
// JavaScript ile anlık güncelleme
progressBar.style.width = progress + '%';
Otomatik slide geçişini durdurmanıza/devam ettirmenize yarar. Mavi gradient buton, tıklanabilir.
🎯 Ne işe yarar?
- Autoplay'i durdurur/başlatır
- Durdurulunca: ▶️ OYNAT gösterir
- Çalışıyorken: ⏸️ DURAKLAT gösterir
- Progress bar'lar da durur/devam eder
💡 Kullanım Senaryosu:
- Kullanıcı bir slide'ı detaylı okumak istediğinde
- Form doldururken otomatik geçişi durdurmak
- Video/görsel'i daha uzun incelemek
Kaçıncı slide'dasınız ve toplam kaç slide var gösterir. Örnek: 3 / 6
🎯 Ne işe yarar?
- Mevcut slide numarasını gösterir (1-6 arası)
- Toplam slide sayısını gösterir (6)
- Her slide geçişinde otomatik güncellenir
- Kullanıcı nerede olduğunu anlar
🎨 Tasarım:
- Beyaz/koyu arka plan (dark mode uyumlu)
- Büyük mavi rakam (3xl font)
- Alt tarafta "SLIDE" yazısı
- Mavi border ile vurgulu
Slider'ın sonsuz döngüde çalışıp çalışmayacağını belirler. Toggle switch ile açıp/kapatabilirsiniz.
🎯 Ne işe yarar?
- Açık (varsayılan): Son slide'dan sonra ilk slide'a döner
- Kapalı: Son slide'da durur, tekrar başlatmaz
💡 Ne Zaman Kapatılır?
- Lineer bir sunum varsa (başlangıç → son)
- Son slide'da CTA (harekete geçirici çağrı) varsa
- Tutorial/onboarding amaçlıysa