FonPageBuilder Karusel Slayt Bileşeni Son Güncelleme: 04-07-2026
Karusel Slayt Bileşeni Nedir?
Karusel Slayt Bileşeni ile sayfalarınıza Bootstrap Carousel'i temel alan bir slayt gösterisi ekleyebilirsiniz.
Karusel Slayt Bileşeni Slayt Gösterisi bileşenine göre daha sade ve daha basit özellikler içermektedir. Bootstrap Carousel slaydı hakkında detaylı bilgi için Bootstrap Carousel Dokümantasyonunu inceleyebilirsiniz.
Karusel Slayt Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.
Genel Ayarlar
- Bileşen Adı: Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.
- Karusel Slayt - Ögeler: Ekle düğmesine tıklayarak birden fazla Slayt ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi; düzenleyebilir, sıralayabilir ve silebililirsiniz. Slayt ögesi düzenleme penceresinde yer alan alanların detaylı kullanım dokümantasyonu aşağıdadır.
- Öge İçerik Ayarları: Slayt ögesinin içerik ayarlarını buradan ayarlayabilirsiniz.
- Slayt Görseli: Sitenizdeki aktif her bir dil için slayt görselini seçin.
- Slayt Mobil Görseli: Sitenizdeki aktif her bir dil için slayt görselininin mobil versiyonunu seçin. Karusel Slaydı yüksekliği slayt görselinin yüksekliğine göre otomatik olarak ayarlandığından mobil cihazlarda daha görünür bir resim göstermek için farklı boyuttaki görseli seçebilirsiniz.
- Slayt İçeriğini Göster: Karusel slaydında görselle birlikte metin içerikleri de (Başlık ve açıklama gibi) göstermek istiyorsanız bu seçeneği etkinleştirin.
- Slayt Başlığı: Sitenizdeki aktif her bir dil için slayt başlığını girin. Bu seçenek Slayt İçeriğini Göster seçeneği aktifleştirilmişse gösterilir.
- Slayt Başlığı Renk: Slayt başlığı için metin rengini seçin.
- Slayt Açıklaması: Sitenizdeki aktif her bir dil için slayt açıklamasını girin. Bu seçenek Slayt İçeriğini Göster seçeneği aktifleştirilmişse gösterilir.
- Slayt Açıklaması Renk: Slayt açıklaması için metin rengini seçin. Bu seçenek Slayt İçeriğini Göster seçeneği aktifleştirilmişse gösterilir.
- İçerik Arkaplan Rengi: Slayt başlığı ve açıklamasının daha okunabilir olması amacıyla bu içeriğin yer aldığı bloğa arkaplan rengi uygulamak isterseniz buradan seçebilirsiniz. Bu seçenek Slayt İçeriğini Göster seçeneği aktifleştirilmişse gösterilir.
- Slayt İçerik Metin Hizalama: Slayt içerik metin bloğunun responsive olarak her bir ekran boyutu için nasıl hizalanacağını seçin.
- Sol: İçerik bloğu sola hizalanır.
- Orta: İçerik bloğu ortalanır.
- Sağ: İçerik bloğu sağa hizalanır.
- Öge Düğme Ayarları: Slayt ögesindeki düğme stili ayarlarını buradan ayarlayabilirsiniz.
- Link: Sitenizdeki aktif her bir dil için düğmeye tıklandığında kullanıcıların yönlendirilmesini istediğiniz url adresini girin.
- Link Hedefi: Slayt ögesindeki düğmeye tıklanıldığında düğme link hedefinin yeni pencerede mi yoksa aynı pencerede mi açılacağını seçin.
- Düğme Metni: Sitenizdeki aktif her bir dil için Düğme Metni olarak gösterilmesini istediğiniz metni girin.
- Düğme Tipi: Slayt ögesi içerisinde gösterilecek düğme tipini seçin.
- Düğme Stili: Slayt ögesi içerisinde gösterilecek düğme stilini seçin.
- Düğme Şekli: Slayt ögesi içerisinde gösterilecek düğme şeklini seçin.
- Düğme Boyutu: Slayt ögesi içerisinde gösterilecek düğme boyutunu seçin.
- Simge Göster: Slayt ögesi içerisinde gösterilecek olan düğme içerisinde simge göstermek istiyorsanız bu seçeneği etkinleştirin.
- Simge: Düğme simgesi olarak kullanmak istediğiniz FontAwesome simgesini seçin.
- Simge Konumu: Düğme simgesinin düğme metninden önce mi sonra mı gösterileceğini belirtin.
DÜĞME STİLİ YAPILANDIRMA İPUÇLARI:
Eklediğiniz düğme için düğme düzenleme penceresindeki form alanlarının detaylı dokümantasyonu için lütfen Düğme (Button) Bileşeni dokümantasyonuna gözatın.
Bileşen Seçenekleri
- Slayt İçeriğini Dikey Ortala: Slayt içerik metinlerini (başlık ve açıklama) dikey olarak ortalamak istiyorsanız bu seçeneği etkinleştirin. Seçenek etkinleştirilmezse içerik metinleri dikey olarak slaydın alt kısmına yakın gösterilecektir.
- Slayt Yüksekliği: Slayt Gösterisinin yüksekliğini belirtin.
- Pencere Yüksekliği: Slayt gösterisinin yüksekliği otomatik olarak tarayıcı penceresi yüksekliğine eşitlenir.
- Özel Yükseklik: Slayt gösterisi yüksekliğini piksel (px) cinsinden özel olarak belirtebilsiniz.
- Özel Yükseklik: Responsive olarak her bir ekran çözünürlüğü için slayt gösterisinin yüksekliğini ayarlayın. Bu alan, "Slayt Yüksekliği" olarak Özel Yükseklik seçeneği seçildiğinde gösterilir.
- Animasyon Stili: Slayt Gösterisi bileşeni, slayt geçişleri için önceden tanımlanmış 8 animasyon türüyle birlikte gelir. İstediğiniz slide animasyonunu seçebilirsiniz.
- Yatay Kaydır (Slide)
- Dikey Kaydır (Stack)
- Otomatik Oynatma: Slayt Gösterisinin otomatik olarak başlatılıp başlatılmayacağını belirtin.
- Gecikme: Slayt Gösterisinin bir sonraki slayda ne kadar süre sonra geçeceğini belirtin.
- Dokunarak Kaydırma Devredışı: Slayt Gösterisinin (Touch Swipe) dokunarak kaydırma özelliğini devre dışı bırakmak istiyorsanız bu seçeneği etkinleştirin.
- Sayfalandırma: Slayt Gösterisinde kaç adet slayt olduğunu gösteren "Dairesel Sayfalandırma" ögelerinin gösterilip gösterilmeyeceğini seçin. Bkz. Görsel - 2 Nolu Öge:
- Sayfalandırmada Küçük Resim Göster: Sayfalandırma öğelerinde slayt görselinin küçük bir önizlemesini göstermek istiyorsanız bu seçeneği etkinleştirin. Bu alan, Sayfalandırma seçeneği etkinleştirildiğinde gösterilir.
- Yönlendirme Kontrolleri: Slayt Gösterisinde "Önceki" ve "Sonraki" ok işaretlerinin gösterilip gösterilmeyeceğini seçin. Bkz. Görsel - 1 Nolu Ögeler:
Bileşen Stil Ayarları
- Sınıf: Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:
light-grey-rounded-box - Dahili Stil: Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde
@widgetIdibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Slayt Gösterisi Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile.fon-slideshow-widgetcss sınıfı altından inceleyebilirsiniz.@widgetId .light-grey-rounded-box{ background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 5px; }
Bileşen Penceresi Kayıt Düğmeleri
- Sayfayı Kaydet: Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
- Kaydet & Düzenle: Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.