Standart Slider
Fade efektli, tam genişlikte ve metin overlay destekli ana sayfa slider bileşeni. Swiper.js altyapısı ile güçlü performans ve touch desteği sunar.
Önizleme
HTML Kodu
HTML
<!-- Standart Slider (Fade Efektli) -->
<div class="tf-slideshow slider-women slider-effect-fade position-relative">
<div dir="ltr" class="swiper tf-sw-slideshow" data-preview="1" data-tablet="1" data-mobile="1"
data-centered="false" data-space="0" data-loop="true" data-auto-play="false" data-delay="2000"
data-speed="1000">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide" lazy="true">
<div class="wrap-slider">
<img class="lazyload"
data-src="images/slider/slide-1.jpg"
src="images/slider/slide-1.jpg"
alt="Slide Açıklaması">
<div class="box-content">
<div class="container">
<h1 class="fade-item fade-item-1">Elegance</h1>
<p class="fade-item fade-item-2">From casual to formal, we've got you covered</p>
<a href="shop.html" class="fade-item fade-item-3 tf-btn btn-fill animate-hover-btn btn-xl radius-60">
<span>Shop collection</span>
<i class="icon icon-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide" lazy="true">
<div class="wrap-slider">
<img class="lazyload"
data-src="images/slider/slide-2.jpg"
src="images/slider/slide-2.jpg"
alt="Slide Açıklaması">
<div class="box-content">
<div class="container">
<h1 class="fade-item fade-item-1">Boutique</h1>
<p class="fade-item fade-item-2">From casual to formal, we've got you covered</p>
<a href="shop.html" class="fade-item fade-item-3 tf-btn btn-fill animate-hover-btn btn-xl radius-60">
<span>Shop collection</span>
<i class="icon icon-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sayfalama Noktaları -->
<div class="wrap-pagination">
<div class="container">
<div class="sw-dots sw-pagination-slider justify-content-center"></div>
</div>
</div>
</div>Blok Düzenleme Ayarları
Blok düzenleyicide slider'ı eklediğinizde sağ panelde aşağıdaki ayarları yapılandırabilirsiniz:
Slider Ayarları
| Alan | Açıklama | Önerilen |
|---|---|---|
| Slide Görseli | Arka plan görseli (tam genişlik) | 1920 x 800 px |
| Başlık (h1) | Slide üzerindeki ana başlık | 1-3 kelime |
| Açıklama (p) | Başlık altındaki açıklama metni | 1-2 cümle |
| Buton Metni | CTA buton yazısı | "Alışverişe Başla" |
| Buton Linki | Butona tıklanınca yönlendirilecek URL | /kategori veya tam URL |
| Alt Text | Görsel için alternatif metin (SEO) | Açıklayıcı metin |
| Sıralama | Slide'ları sürükleyerek sıralayın | - |
Metin Okunabilirliği
Görsellerin üzerinde metin olacağı için, koyu veya gradient overlay'li görseller tercih edin. Böylece beyaz metinler rahat okunur.
Kod Editör Ayarları
HTML kodunda slider davranışını data-* attribute'ları ile özelleştirebilirsiniz:
Swiper Data Attributes
| Attribute | Varsayılan | Açıklama |
|---|---|---|
data-preview |
1 |
Masaüstünde görünen slide sayısı |
data-tablet |
1 |
Tablette görünen slide sayısı |
data-mobile |
1 |
Mobilde görünen slide sayısı |
data-loop |
true |
Sonsuz döngü |
data-auto-play |
false |
Otomatik oynatma |
data-delay |
2000 |
Otomatik geçiş süresi (ms) |
data-speed |
1000 |
Geçiş animasyon hızı (ms) |
data-space |
0 |
Slaytlar arası boşluk (px) |
data-centered |
false |
Aktif slide'ı ortala |
Kod Örnekleri
Otomatik Oynatma Açık (5 saniye):
html
<div class="swiper tf-sw-slideshow"
data-auto-play="true"
data-delay="5000"
data-speed="1000">Yavaş Geçiş Animasyonu:
html
<div class="swiper tf-sw-slideshow"
data-speed="1500">Döngüsüz Slider:
html
<div class="swiper tf-sw-slideshow"
data-loop="false">CSS Sınıfları
| Class | Açıklama |
|---|---|
.tf-slideshow |
Ana slider container |
.slider-women |
Women teması slider stili |
.slider-effect-fade |
Fade (solma) geçiş efekti |
.fade-item-1, -2, -3 |
Sıralı animasyon efektleri |
.lazyload |
Lazy loading için görsel işaretleme |
.wrap-slider |
Slide içerik wrapper'ı |
.box-content |
Metin overlay container'ı |
.tf-btn.btn-fill.radius-60 |
Yuvarlak dolgulu buton |
Görsel Boyutları
| Cihaz | Önerilen Boyut | En-Boy Oranı |
|---|---|---|
| Masaüstü | 1920 x 800 px | 2.4:1 |
| Tablet | 1024 x 600 px | 1.7:1 |
| Mobil | 768 x 900 px | 0.85:1 |
Performans İpucu
Slider görselleri sayfa açılış hızını doğrudan etkiler. Görselleri WebP formatında kaydedin ve 150-300 KB arasında tutun. Lazy load sayesinde sadece görünen slide yüklenir.
İpuçları
- Maksimum 5 slide kullanın - Fazla slide kullanıcı dikkatini dağıtır
- Başlıkları kısa tutun - 1-3 kelime en etkili sonucu verir
- Tek CTA kullanın - Her slide'da bir aksiyon çağrısı yeterli
- Kontrast önemli - Metin ile arka plan arasında yeterli kontrast olmalı
- Mobil test edin - Metinlerin mobilde de okunabilir olduğundan emin olun
- Auto-play dikkatli kullanın - Çok hızlı geçişler rahatsız edici olabilir