1. Carousel Elementine Genel Bakış

Carousel elementi, kullanıcıların görselleri veya içerikleri döngüsel bir yapı içinde görüntülemesini sağlayan etkileşimli bir UI elementidir. Kullanıcılar, ok butonlarıyla veya dokunarak/ kaydırarak slaytlar arasında geçiş yapabilir. Tekil görseller, metin içerikleri veya ürün tanıtımları gibi birden fazla öğeyi sırayla göstermek için kullanılabilir.

Carousel, özellikle ürün vitrinleri, kampanya slaytları, portföy galerileri, reklam banner’ları, hikâye akışları veya öne çıkan içerik modülleri gibi tasarımlarda güçlü bir görsel deneyim sunar. Aynı zamanda sayfa alanını verimli kullanarak içerik yoğunluğu yüksek uygulamalarda kullanıcıya sade bir gezinme imkânı tanır.

Carousel elementi, web ve mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Ürün tanıtımı yapmak. Birden fazla ürün görselini veya ürün detayını slaytlar hâlinde kullanıcıya sunmak için kullanılır.
• Kampanya veya banner gösterimi. Pazarlama kampanyaları, duyurular veya promosyon içeriklerini döngüsel şekilde göstermek için idealdir.
• Resim galerisi oluşturmak. Görsel ağırlıklı uygulamalarda fotoğraf galerisi veya portföy alanı oluşturmak için kullanılır.
• Blog, haber veya içerik slaytları göstermek. Öne çıkan içerikler, son eklenen yazılar veya duyurular slayt yapısı ile etkili şekilde sunulabilir.
• Referans veya kullanıcı yorumlarını göstermek. Testimonial/yorum slaytları oluşturarak kullanıcı deneyimini zenginleştirir.
• Eğitim veya onboarding akışlarını göstermek. Adım adım ilerleyen eğitim içeriklerini görsel açıklamalarla göstermek için uygundur.

2. Temel Özellikler

• Slayt Yapısı ile İçerik Gösterimi. Kullanıcılar, birden fazla içeriği slaytlar hâlinde görüntüleyebilir ve kolayca ileri–geri navigasyon yapabilir.
• Hem Görsel Hem Metinsel İçerik Destekleme. Carousel içine görseller, metinler, butonlar veya diğer UI elemanları eklenebilir.
• Otomatik Kaydırma (Auto Play) Desteği. Slaytların belirli aralıklarla otomatik olarak geçiş yapması sağlanabilir.
• Ok Butonları ve Kaydırma Desteği. Kullanıcılar mouse ile, dokunarak veya ok ikonlarıyla slaytlar arasında gezinir.
• Dinamik İçerik Bağlama. Datasource veya aksiyonlardan gelen verilerle Carousel içeriği otomatik oluşturulabilir.
• Responsive Tasarım Uyumlu. Mobil ve web ekranlarında içerikler otomatik ölçeklenerek doğru görünüm sağlanır.

2.1. Carousel Elementi Özellikleri (Properties)

Carousel elementini seçtiğinizde sağ tarafta yer alan Properties paneli üzerinden içerik yönetimi, geçiş ayarları ve görsel davranışlar kolayca yapılandırılabilir. Aşağıdaki tüm özellikler detaylı şekilde açıklanmıştır:

Veri ve Mesaj Ayarları

• Data Source: Carousel içinde görüntülenecek verilerin kaynağını belirler. Datasource veya aksiyonlar üzerinden alınan veriler slaytlara otomatik olarak uygulanır.
• No Data Found Message: Veri kaynağında gösterilecek kayıt bulunamadığında görüntülenecek mesajı tanımlar.
• Show No Data Found Image: Veri bulunamadığında gösterilecek özel görseli belirlemenizi sağlar.

Geçiş ve Animasyon Ayarları

• Fade: Slayt geçişlerinin solma (fade) efektiyle yapılmasını sağlar.
• Autoplay: Carousel’in kullanıcı etkileşimi olmadan otomatik olarak slayt geçişi yapmasını sağlar.
• Autoplay Speed: Otomatik geçiş hızını milisaniye cinsinden belirler. Örn. 2000 = 2 saniyede bir slayt değişimi.
• Starting Index: Carousel ilk yüklendiğinde gösterilecek slaytın sıra numarasını tanımlar.
  
  
• Vertical: Slaytların yatay yerine dikey yönde hareket etmesini sağlar.

Kullanıcı Etkileşim Ayarları

• Pause On Dots Hover: Kullanıcı navigasyon noktalarının (dots) üzerine geldiğinde otomatik oynatmanın durmasını sağlar.
• Dots: Slaytların altında bulunan navigasyon noktalarının görünürlüğünü açar veya kapatır.

Hover (Üzerine Gelme) Ayarları

• Hover Font Color: Kullanıcı slayt üzerine geldiğinde metin renginin değişmesini sağlar.
• Hover Bg Color: Kullanıcı slayt üzerine geldiğinde arka plan rengini değiştirir.
  
  

2.2. Elemente Eklenebilen Aksiyonlar

Carousel elementi, kullanıcı etkileşimlerine bağlı olarak aksiyon çalıştırmanıza olanak tanır. Elementi seçip sağ panelde yer alan ADD ACTION bölümünden aşağıdaki tetikleyicileri kullanabilirsiniz:

onClick: Kullanıcı Carousel içindeki herhangi bir slayta tıkladığında tetiklenir. Slayta tıklama ile işlem başlatmak veya detay ekranı açmak için kullanılır.

Kullanım senaryoları:

• Slayta bağlı ürün veya içerik detay sayfasına yönlendirme
• Pop-up açma
• Tıklanan slaytın ID’sini başka bir aksiyona parametre olarak gönderme
• Bir listeyi seçilen slayta göre filtrelemek

onChange: Kullanıcı slaytlar arasında geçiş yaptığında veya Carousel otomatik olarak slayt değiştirdiğinde tetiklenir. Bu tetikleyici, gösterilen aktif slayta göre işlemler yapmayı sağlar.

Kullanım senaryoları:

• Aktif slayt değiştiğinde açıklama metnini güncellemek
• Seçilen slayta göre başka elementleri (örn. Panel, Text, Image) dinamik olarak değiştirmek
• Aktif slayt ID’sine göre veri sorgulamak
• Bir analiz veya log sistemi için slayt görüntüleme davranışını kaydetmek

3. Carousel Elementi Nasıl Kullanılır? 

Bu bölümde Carousel elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.

Senaryo: Kampanya Tanıtım Alanı

Bir tatil rezervasyonu uygulamasında, ana sayfada kullanıcıya güncel kampanyaları şık ve dikkat çekici bir şekilde göstermek için Carousel elementi kullanılır. Carousel, yüksek çözünürlüklü kampanya görsellerini, başlıklarını ve kısa açıklamaları ardışık slaytlar hâlinde sunar.
Kullanıcı slaytlar arasında manuel geçiş yapabilir veya otomatik geçiş özelliği açık olduğunda kampanyalar belirli aralıklarla kendiliğinden değişir.

Bu yapı, tatil fırsatlarını görsel ağırlıklı bir şekilde tanıtarak kullanıcıların dikkatini çeker ve rezervasyon kararını kolaylaştırır

Senaryoda:

• Carousel üzerinde her bir kampanya slaytı; kampanya görseli, başlık, kısa açıklama ve detay bilgisinin düzenli bir şekilde sunulması amacıyla yapılandırılmıştır.
• Slaydın üst kısmında kampanyaya ait görsel yer alırken, altında kampanya başlığı, hemen altında kısa tanıtım mesajı ve en altta detay açıklaması gösterilir.
• Carousel elementi, kullanıcı deneyimini artırmak için slaytlar arasında manuel ya da otomatik geçiş yapılmasını sağlar. Böylece kampanya bilgilerinin tek bir alan içinde sade, akıcı ve görsel ağırlıklı bir biçimde sunulması mümkün olur.

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “HolidayCarousel” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• Önemli Alan adları:
  
  • Title: Carousel üzerinde gösterilecek kampanyanın başlık bilgisini tutar. Kullanıcının ilk dikkat ettiği metindir.
  • Description: Kampanyaya ait kısa açıklama veya öne çıkan mesajın saklandığı alandır. Başlığın hemen altında gösterilir.
  • Detail: Kampanyaya ilişkin daha detaylı açıklamanın bulunduğu alandır. Kullanıcıya ek bilgi sunmak için kullanılır.
  • ImageUrl: Carousel slaydında görüntülenecek görselin URL bilgisini içerir. Kampanya tanıtımında kullanılan ana görsel bu alandan yüklenir.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

1. İki aksiyon tanımlamanız gerekir.
2. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
   
   

• Örnek Verileri Ekleyen Aksiyon (InsertHolidayCarousel): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO HolidayCarousel (Id, Title, Description, Detail, ImageUrl)
VALUES
(NEWID(), 
 N'Yaz Fırsatları', 
 N'Erken rezervasyonda %40’a varan indirim!', 
 N'Yaz sezonunda seçili otellerde erken rezervasyon fırsatları sizi bekliyor. Plaj, havuz ve doğa aktiviteleriyle dolu bir tatil için şimdi yerinizi ayırtın.', 
 'https://images.pexels.com/photos/3319711/pexels-photo-3319711.jpeg'),

(NEWID(), 
 N'Kış Tatil Paketleri', 
 N'Kayak otellerinde 3 gece kal, 2 gece öde fırsatı!', 
 N'Kışın keyfini çıkarın! Kayak otellerinde ücretsiz ekipman desteği, spa kullanımı ve özel aile paketleriyle unutulmaz bir tatil fırsatı.', 
 'https://images.pexels.com/photos/20529386/pexels-photo-20529386.jpeg'),

(NEWID(), 
 N'Hafta Sonu Kaçamakları', 
 N'Şehir otellerinde özel hafta sonu fiyatları!', 
 N'Yoğun iş temposundan uzaklaşıp kısa bir tatil yapmak isteyenler için hazırlanan özel hafta sonu paketleri. Şehir otellerinde konforlu ve ekonomik bir deneyim sunuyor.', 
 'https://images.pexels.com/photos/35130337/pexels-photo-35130337.jpeg');

‍

Uygularken HolidayCarousel kısmını silip tekrar HolidayCarousel yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Sağlayan ve Filtreleyen Aksiyon (GetCarouselDetail):
  

SELECT * FROM HolidayCarousel WHERE Id = @Id;

Uygularken HolidayCarousel kısmını silip tekrar HolidayCarousel yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Tüm Verileri Sağlayan Aksiyon (GetHolidayCarousel):

SELECT * FROM HolidayCarousel;

Uygularken HolidayCarousel kısmını silip tekrar HolidayCarousel yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

Başlangıçta anasayfada: 

1. UI Design modülünü açın.
2. Sayfada Add Action > Initial Action > Custom > Managed Db > GetHolidayCarousel aksiyonunu ekleyin.

Adım 4 - Element Ekleme ve Stil Düzenleme

1. Sol yan panelden Elements > Data > Carousel elementini sayfaya sürükleyip bırakın. 
2. Carousel elementi içerisinde Carousel > Properties > DataSource alanına  GetHolidayCarousel aksiyonunu bağlayın.

3. Üzerine gelindiğinde arka plan rengi için Carousel > Properties > HoverBgColor alanına aşağıdaki tanımlamayı yapın.

4. Otomatik oynatma için Carousel > Properties > AutoPlay alanını açık hale getirin.

5. Oynatma hızını Carousel > Properties > AutoPlaySpeed > 3000 olarak ayarlayın.

6. Sayfaları göstermek için Carousel > Properties > ShowPageIndicator alanını açık hale getirin.
7. Carousel elementi içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.

8. Vertical Stack elementinde VerticalStack > Styling > Layout > Align alanından dikeyde ortalayın.

9. Vertical Stack içerisine Elements > Display > Image elementini sürükleyip bırakın.
10. Image içerisinde Image > Properties > Value alanına ImageUrl tanımını yapın.
11. Image elementini boyutlandırmak için Image > Styling > Layout > Width ve Height alanlarını 400 px olarak tanımlayın.

12. Image elementi altına Elements > Display > Label elementini sürükleyip bırakın.

13. Label elementinde Label > Properties > Value alanında Title seçimini yapın.

14. Label görünüşünü Label > Styling > Text > Style > Heading 2 olarak ayarlayın.

15. Label rengini Label > Styling > Text > Color > HEX > 8C8C8C olarak ayarlayın.

16. Label elementini ilk seçenek olan Duplicate butonuyla klonlayın.
17.  Klonlanan Label elementine tıklayın Label > Properties > Value alanında Description seçimini yapın.

18. Label görünüşünü Label > Styling > Text > Style > Heading 4 değiştirin.

19.  Son durumda ana sayfanın aşağıdaki gibi olması beklenir.

Adım 5 - Detay Görüntüleme Sayfasının Oluşturulması

1. UI Design modülünde sol yan paneldeki Screens alanından ‘CarouselDetail’ adında yeni bir sayfa oluşturun.

2. Oluşturulan yeni sayfaya ScreenInput > Add Screen Input alanına ‘CarouselId’ adında ‘Guid’ tipinde screen input ekleyin.

3. Sayfa içerisine Add Action > Initial Action > Custom > Managed DB > GetCarouselDetail pageInit Action ekleyin.
4. GetCarouselDetail aksiyon içerisine CarouselId screen input id bilgisini tanımlayınız.
   
   

5. Sayfa içerisine Elements > Container > Panel elementini sürükleyip bırakın.
6. Panel elementinde Panel > Styling > Layout > Width ve Height alanlarını 500 px olarak ayarlayın.

7. Arka plan rengi için Panel > Styling > Fill > Style alanını White Background olarak ayarlayın.

8. Panel içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.

9. Vertical stack üzerinde boşluk bırakmak için VerticalStack > Styling > Layout > Padding alanında üst kısmı 10 olarak ayarlayınız.

9. Vertical Stack içerisine Elements > Display > Image elementini sürükleyip bırakın.
10. Image elementinde Image > Styling > Layout > Width ve Height alanlarını 200 px olarak ayarlayın.

12. Kenarları düzenlemek için Image > Styling > Border > Radius > 50 px olarak ayarlayın.

13. Image altına Vertical Stack elementi içerisine Elements > Display > Label elementini sürükleyip bırakın.
14. Label elementinde Label > Styling > Layout > Align alanında yatay ve dikey olarak ortalayın.

15.  Yazı stilini Label > Styling > Text > Style > Heading 4 olarak ayarlayın.

16. Label elementinde Label > Properties > Value > Action Result > GetCarouselDetail > First > Title bilgisini tanımlayın.

17.  Aynı adımları izleyerek label elementi altına ikinci bir Elements > Display > Label ekleyin. 

18. Label > Styling > Layout > Align alanından elementi dikey ve yatay olarak ortalayın.
19.  Label yazı stilini Label > Styling > Text > Style > Heading 5 olarak ayarlayın.
20.  Label elementinde Label > Properties > Value > Action Result > GetCarouselDetail > First > Description bilgisini tanımlayın.

21.  Son olarak aynı adımlarla üçüncü label elementini ekleyin, dikey ve yatay olarak ortalayın.
22. Label elementinde Label > Properties > Value > Action Result > GetCarouselDetail > First > Detail tanımlamasını yapın.

23.  Son durumda beklenen sayfa yapısı aşağıdaki gibidir.

Adım 6 - Ana Sayfanın Detay Sayfasına Bağlanması

1. UI Design modülünde sol yan paneldeki Pages alanından Carousel’i kullanıdığınız ‘HomePage’ ana sayfaya ilerleyin.

2. Image elementine tıklayın Image > Add Action > onClick > Navigation > Navigate aksiyonunu ekleyin.

3. Navigate aksiyonu içerisinde To Screen alanına CarouselDetail, Screen Inputs alanında Current > Id ve Open As alanıda Modal tanımlamalarını yapın.

4. Navigate içerisinde alt kısımda yer alan Width alanını 600 px, Height alanını 75 Vh olarak tanımlayın.

Preview:

Uygulama test edildiğinde, Carousel yapısı içerisinde sunulan kampanya kartı görüntülenir. Kart üzerinde üst bölümde kampanyaya ait görsel yer alırken, altında kampanya başlığı ve kısa açıklama metni düzenli bir şekilde konumlandırılmıştır.

Kullanıcı kart üzerindeki görsele tıkladığında, seçilen kampanyaya ait detayların yer aldığı bir popup ekran açılır. Bu ekranda kampanya görseli, başlık ve açıklama metni daha geniş bir alanda sunularak içeriğin daha detaylı ve okunabilir şekilde incelenmesi sağlanır.

4. Ortak Özellikler (Properties)

Carousel elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

• Görselleri optimize edin. Yüksek boyutlu görseller performansı düşürür. WebP veya sıkıştırılmış JPEG tercih edin.
• Autoplay hızını kullanıcı deneyimine uygun ayarlayın. Çok hızlı geçişler dikkat dağıtır; çok yavaş geçişler kullanıcıyı sıkabilir. (2000–4000 ms idealdir.)
• Dikey (Vertical) kullanımda içerik yüksekliğine dikkat edin. Uzun içerikler dikey kaydırmada kırpılabilir; slayt boyutlarını kontrol edin.
• Dots görünürlüğünü içerik sayısına göre karar verin. Çok fazla slayt varsa dots alanı kalabalık görünür; gizlemek daha uygun olabilir.
• Hover efektlerini kontrastlı kullanın. HoverFontColor ve HoverBgColor ile içerik vurgusunu belirginleştirin.

6. Kısıtlamalar

• Carousel içeriği veri kaynağı olmadan boş görünür. Data Source tanımlı değilse slayt oluşturulamaz.
• Autoplay mobil cihazlarda kullanıcının kaydırma hareketiyle durabilir. Mobil tarayıcı davranışlarına bağlı olarak autoplay zaman zaman duraklayabilir.
• Fade efekti tüm slayt düzenlerinde ideal olmayabilir. Çok metinli slaytlarda fade geçişi metin okunabilirliğini zorlaştırabilir.