Carousel elementi, kullanıcıların görselleri veya içerikleri döngüsel olarak görüntülemelerine olanak tanır. Kullanıcılar, kaydırarak veya ok butonlarıyla içerikler arasında geçiş yapabilir. Özellikle ürün tanıtımları, resim galerileri ve kampanya duyuruları için kullanılır.

Kullanım Alanları

• Ürün görsellerinin sergilenmesi,
• Banner ve kampanya duyuruları,
• Görsel galeri veya portfolyo,
• Blog yazısı veya içerik tanıtımı vb.

Carousel elementi, web ve mobil uygulamalarda desteklenir.

Tatil Tanıtım Senaryosu

Bir tatil rezervasyonu uygulamasında, kullanıcıya ana sayfada kampanya görsellerini göstermek için Carousel elementi kullanılır. Kullanıcı slaytları manuel olarak kaydırabilir ya da otomatik geçiş özelliği sayesinde içerikler sırayla döner.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables başlığı yanındaki + ikonuna tıklayın ve tabloya HolidayCarousel ismini verin.
3. Aşağıdaki tabloyu oluşturun. 

4. SQL Actions bölümünden HolidayCarousel adında aksiyon tanımlayın.
5. Aşağıdaki SQL komutunu tanımlayın. 

SELECT 'https://cdn.example.com/beach-resort.png' AS ImageUrl,        'Maldivler Turu' AS Title,        '7 gece 8 gün Maldivler tatili, her şey dahil!' AS DescriptionUNION ALLSELECT 'https://cdn.example.com/europe-tour.png',        'Avrupa Şehirleri',        'Paris, Roma, Amsterdam tur paketi!'UNION ALLSELECT 'https://cdn.example.com/cappadocia.png',        'Kapadokya Kaçamağı',        'Balon turu ve 3 gece konaklama dahil!';

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > HolidayCarousel’i seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

• No Data Found Message
  
  • Veri yoksa gösterilecek mesaj.
  • Örnek: “Gösterilecek içerik bulunamadı.”
• Data Source
  
  • Carousel’deki verilerin kaynağını belirler.
  • Örnek: HolidayCarousel.
• Fade
  
  • Slaytlar arasında geçiş efektini ayarlar.
  • Örnek: Yumuşak geçiş için aktif edilir.
• Hover Font Color
  
  • İmleç slayt üzerindeyken yazı rengi değişir.
  • Örnek: Siyah (#000000).
• Hover Bg Color
  
  • İmleç slayt üzerindeyken arka plan değişir.
  • Örnek: Gri (#f5f5f5).
• Vertical
  
  • Slaytların dikey olarak kaymasını sağlar.
  • Örnek: Mobil uygulamalarda story görünümü.
• Pause On Dots Hover
  
  • Noktalar üzerine gelince otomatik kaydırmayı durdurur.
• Autoplay
  
  • Slaytların otomatik geçişini sağlar.
  • Örnek: Kampanya bannerlarının otomatik dönmesi.
• Autoplay Speed
  
  • Otomatik geçiş süresini belirler (ms).
  • Örnek: 3000 → 3 saniyede bir geçiş.
• Starting Index
  
  • İlk açılışta gösterilecek slaytı belirler.
  • Örnek: 0 (ilk slayt).
• Dots
  
  • Slayt geçiş noktalarını gizler/gösterir.
  • Örnek: Alt kısımda küçük daireler.
• Show No Data Found Image
  
  • Veri bulunmadığında yedek görsel gösterir.

Senaryo Adımı Tamamlandığında

• Kullanıcı ana sayfada ürün kampanya görsellerini görebilir.
• Slaytlar otomatik olarak geçer (her 3 saniyede).
• Noktalar sayesinde manuel seçim yapılabilir.
• Hover efektleri ile görsellik zenginleştirilir.

Kısıtlamalar

• Çok yüksek çözünürlüklü görseller Carousel performansını yavaşlatabilir.
• Fazla uzun başlık ve açıklamalar mobil görünümde taşabilir.
• Autoplay özelliği mobil veri kullanımını artırabilir.
• No Data Found alanı tanımlanmazsa boş alan görünebilir.

İpuçları ve Best Practices

• Görselleri optimize edilmiş boyutta (ör. 1200x600px, <200 KB) kullanın.
• Autoplay Speed değerini 2000–5000 ms arasında tutun.
• Hover renklerini, görselle kontrast oluşturacak şekilde seçin.
• “No Data Found Message” ve “Show No Data Found Image” alanlarını doldurarak boş ekran riskini ortadan kaldırın.
• Çok sayıda slayt yerine 3–6 arasında içerik kullanmak okunabilirliği artırır.