Çeşitli uyarlanabilir kaydırıcılar. Çeşitli uyarlanabilir kaydırıcılar Müzik bağlamalı kaydırıcı

Ayrı ayrı kullanıldığında CSS3 ve jQuery çok çeşitli yetenekler sağlar. Ama birlikte kullanılırsa... Etkileri gerçekten etkileyici hale getirebilirler. Bazen, ortak bir temaya sahip birkaç görüntünün veya fotoğrafın tek bir yerde nasıl daha iyi ve daha yaratıcı bir şekilde düzenlenebileceği sorunu ortaya çıkar. Bir seçenek olarak bir kaydırıcı oluşturabilirsiniz (özellikle çok sayıda olduğu için). Ancak bu derste CSS3 ve jQuery'yi kullanarak etkileşimli bir 3D galeri oluşturacağız. Bunu hızlı bir şekilde anlamak ve kaydırıcıyı web sitenize uygulamak için demo sürümünü indirmenizi (tüm haberlerde de mevcuttur) ve bunu örnekteki benzetmeyi kullanarak yapmanızı öneririm.

Burada gerçek bir örnek görülebilir:

İndirmek

HTML bölümü - İlginç jQuery kaydırıcısı

Sınıflı konteyner ana arka planı görüntülemek için kullanılacaktır. Ve sonra immersive_slider tanımlayıcısına sahip bloğun içine istediğiniz kadar slayt ekleyebilirsiniz. İhtiyacınız yoksa, slaytlar arasında gezinmeye yönelik düğmeler kaldırılabilir:

jQuery bölümü

Kaydırıcı örneğini görüntülerken fark etmiş olabileceğiniz gibi, farklı . Bu geçişlere ilişkin tüm ayarlar yukarıdaki fonksiyondadır. Şimdi bu ayarlara bakalım:

• animasyon— slaytların nasıl değişeceğini belirleyen bir değer. "Fade", "slayt" veya "sıçrama" değerlerini kabul eder. Ve slaytların dikey değişimini yapmak için “slideUp” veya “bounceUp” girmeniz gerekir.
• slaytSeçici— slaytlı blokları seçmek için bir seçici.
• konteyner— bu özellik, arka planı değişecek olan ana kabı tanımlar.
• cssBulanıklaştırma Bu bir deneme özelliğidir. Bulanıklaştırmayı ayarlamak istemiyorsanız bu özelliği ayarlamayın.
• sayfalandırma— navigasyonu etkinleştirir.
• otomatik başlatma— slayt gösterisinin otomatik başlatılması.

Sitenize yüksek kaliteli bir jQuery resim kaydırıcısı eklemeniz gerekiyorsa, bu makalede gerekli eklentilerin bir açıklamasını bulacaksınız. JQuery, JavaScript ile çalışmayı çok daha kolaylaştırmış olsa da web tasarım sürecini hızlandırmak için hâlâ eklentilere ihtiyacımız var.

Bu eklentilerin bazılarında değişiklik yaparak sitemizin amaçlarına çok daha uygun yeni kaydırıcılar oluşturabiliriz.

Diğer kaydırıcılar için yalnızca başlıklar, resimler ekler ve kaydırıcıyla birlikte gelen slayt geçiş efektlerini seçersiniz. Bu eklentilerin tümüne ayrıntılı belgeler eşlik etmektedir, dolayısıyla bunlara yeni efektler veya işlevler eklemek zor olmayacaktır. Deneyimli bir JQuery programcısıysanız olaya dayalı tetikleyicileri bile değiştirebilirsiniz.

İster bir eklenti ister bir komut dosyası uyguluyor olun, duyarlı tasarım gibi en son trendler web projeleri için çok önemlidir. Bu öğelerin tümü, bu eklentilerin her birini çok esnek hale getirir. 2014 yılında çıkan her şey bu listede yer alıyor.

jQuery görüntü kaydırıcıları

Jssor Duyarlı Kaydırıcı

Yakın zamanda bu güçlü jQuery kaydırıcısıyla karşılaştım ve işini çok iyi yaptığını ilk elden görebildim. Kaydırıcının açık kaynak koduyla genişletilebilecek sınırsız olanaklar içerir:

• Uyarlanabilir tasarım;
• 15'ten fazla özelleştirme seçeneği;
• 15'ten fazla görüntü değiştirme efekti;
• Resim galerisi, atlıkarınca, tam ekran boyutu desteği;
• Dikey banner döndürücü, slayt listesi;
• Video desteği.

Demo | İndirmek

PgwSlider - JQuery / Zepto'ya dayalı duyarlı kaydırıcı

Bu eklentinin tek görevi görsellerin slaytlarını göstermektir. JQuery dosyalarının boyutu yalnızca 2,5 KB olduğundan çok kompakttır, bu da onun gerçekten hızlı yüklenmesine olanak tanır:

• Uyarlanabilir düzen;
• SEO optimizasyonu;
• Farklı tarayıcılar için destek;
• Basit görüntü geçişleri;
• Arşiv boyutu yalnızca 2,5 KB'dir.

Demo | İndirmek

Jquery Dikey Haber Kaydırıcısı

Haber kaynakları için tasarlanmış, sol tarafında yayın listesi ve sağ tarafında görüntülenen bir resim içeren esnek ve kullanışlı bir JQuery kaydırıcısı:

• Uyarlanabilir tasarım;
• Haberleri değiştirmek için dikey sütun;
• Genişletilmiş başlıklar

Demo | İndirmek

Wallop Kaydırıcısı

Bu kaydırıcı jQuery içermiyor ancak oldukça kompakt olduğundan ve sayfa yükleme süresini önemli ölçüde azaltabildiğinden sunmak istiyorum. Beğendiyseniz bana bildirin:

• Uyarlanabilir düzen;
• Basit tasarım;
• Çeşitli slayt değiştirme seçenekleri;
• Minimum JavaScript kodu;
• Boyutu yalnızca 3KB'dir.

Demo | İndirmek

Düz tarz Polaroid galerisi

Esnek bir düzen ve güzel bir tasarıma sahip, masanın üzerine dağılmış belgeler tarzı bir galeri çoğunuzun ilgisini çekecektir. Tabletler ve büyük ekranlar için daha uygundur:

• Uyarlanabilir kaydırıcı;
• Düz tasarım;
• Rastgele slayt değişimi;
• Kaynak koduna tam erişim.

Demo | İndirmek

A-Kaydırıcı

Demo | İndirmek

HiSlider – HTML5, jQuery ve WordPress resim kaydırıcısı

HiSlider, harika geçişlere sahip çeşitli resim galerileri oluşturabileceğiniz yeni bir ücretsiz jQuery kaydırıcı eklentisini tanıttı:

• Uyarlanabilir kaydırıcı;
• Programlama bilgisi gerektirmez;
• Birkaç harika şablon ve görünüm;
• Güzel geçiş efektleri;
• Farklı platformlar için destek;
• WordPress, Joomla, Drupal ile uyumludur;
• Farklı içerik türlerini görüntüleme yeteneği: resimler, YouTube videoları ve Vimeo videoları;
• Esnek kurulum;
• Yararlı ek özellikler;
• Sınırsız miktarda içerik görüntülenir.

Demo |İndir

Vay Kaydırıcısı

WOW Slider, muhteşem görsel efektlere sahip, duyarlı bir jQuery görüntü kaydırıcısıdır ( domino, döndürme, bulanıklaştırma, çevirme ve flaşlama, uçma, panjur) ve profesyonel şablonlar.

WOW Slider, kodu anlamanıza veya görüntüleri düzenlemenize gerek kalmadan saniyeler içinde harika kaydırıcılar oluşturmanıza olanak tanıyan bir kurulum sihirbazıyla birlikte gelir. Eklentinin Joomla ve WordPress sürümleri de indirilebilir:

• Tamamen duyarlı;
• Tüm tarayıcıları ve her tür cihazı destekler;
• Dokunmatik cihazlar için destek;
• WordPress'e kolay kurulum;
• Yapılandırmada esneklik;
• SEO optimizasyonlu.

Demo |İndir

Nivo Slider – ücretsiz jQuery eklentisi

Nivo Slider tüm dünyada en güzel ve kullanımı kolay görüntü kaydırıcı olarak bilinir. Nivo Slider eklentisi ücretsizdir ve MIT lisansı altında yayınlanmıştır:

• JQuery 1.7 ve üstünü gerektirir;
• Güzel geçiş efektleri;
• Yapılandırması basit ve esnektir;
• Kompakt ve uyarlanabilir;
• Açık kaynak;
• Güçlü ve basit;
• Birkaç farklı şablon;
• Otomatik görüntü kırpma.

Demo |İndir

Teknik belgelere sahip basit jQuery kaydırıcısı

Fikir, Apple'ın çeşitli küçük öğelerin farklı animasyon efektleriyle uçup gidebildiği kaydırıcılarından ilham aldı. Geliştiriciler, "uçan" öğelerin farklı kategorileri temsil ettiği basit bir çevrimiçi mağaza tasarımı oluşturmak için minimum gereksinimleri dikkate alarak bu konsepti uygulamaya çalıştılar:

• Uyarlanabilir düzen;
• Minimalist tasarım;
• Çeşitli bırakma ve slayt değiştirme efektleri.

Demo |İndir

Tam boyutlu jQuery resim kaydırıcısı

Sayfa genişliğinin %100'ünü kaplayan ve mobil cihazların ekran boyutlarına uyum sağlayan çok basit bir kaydırıcı. CSS geçişleriyle çalışır ve görüntüler bağlantılarla birlikte "istiflenir". Resme bağlantı eklemek istemiyorsanız bağlantı değiştirilebilir veya kaldırılabilir.

Kaydırıcı takıldığında ekran genişliğinin %100'üne kadar genişler. Ayrıca slayt görüntülerinin boyutunu da otomatik olarak azaltabilir:

• Uyarlanabilir JQuery kaydırıcısı;
• Tam boyut;
• Minimalist tasarım.

Demo |İndir

Elastik İçerik Kaydırıcısı + öğretici

Elastik İçerik Kaydırıcısı, ana öğenin boyutlarına göre genişliği ve yüksekliği otomatik olarak ayarlar. Bu basit bir jQuery kaydırıcısıdır. Üstte bir slayt alanı ve altta bir gezinme sekmesi çubuğundan oluşur. Kaydırıcı, genişliğini ve yüksekliğini ana kabın boyutlarına göre ayarlar.

Gezinme sekmeleri küçük çapraz ekranlarda görüntülendiğinde küçük simgelere dönüşür:

• Uyarlanabilir tasarım;
• Fare tıklaması kaydırma.

Demo |İndir

Ücretsiz 3D Yığın Kaydırıcısı

Görüntüleri 3 boyutlu olarak kaydıran deneysel bir kaydırıcı. İki yığın, kağıt yığınlarına benzer; kaydırıldığında görüntüler kaydırıcının ortasında görüntülenir:

• Uyarlanabilir tasarım;
• Çevir - geçiş;
• 3 boyutlu efektler.

Demo |İndir

JQuery ve CSS3 + eğitimini temel alan Tam Ekran Slit Slider

Bu eğitimde size farklı bir yöntemle nasıl kaydırıcı oluşturulacağı gösterilecektir: amaç, sonraki veya önceki görüntüyü açtığınızda geçerli slaydı "kesmek" ve görüntülemektir. JQuery ve CSS animasyonunu kullanarak benzersiz geçiş efektleri oluşturabiliriz:

• Uyarlanabilir tasarım;
• Bölünmüş geçiş;
• Tam ekran kaydırıcı.

Demo |İndir

Unislider - çok küçük bir jQuery kaydırıcısı

Boyutu 3 KB'tan küçük olduğundan gereksiz zil ve ıslıklara gerek yok. Slaytlarınız için herhangi bir HTML kodunu kullanın, CSS ile genişletin. Unslider ile ilgili her şey GitHub'da barındırılmaktadır:

• Çeşitli tarayıcılar için destek;
• Klavye desteği;
• Yükseklik ayarı;
• Uyarlanabilir tasarım;
• Giriş desteğine dokunun.

Demo | İndirmek

Minimal Duyarlı Slaytlar

Basit ve kompakt eklenti ( boyut yalnızca 1 KB), bir kabın içindeki öğeleri kullanarak duyarlı bir kaydırıcı oluşturur. ResponsiveSLides.js, IE6 ve üzeri tüm IE sürümleri de dahil olmak üzere çok çeşitli tarayıcılarla çalışır:

• Tamamen duyarlı;
• Boyut 1 KB;
• JavaScript aracılığıyla çalıştırılabilen CSS3 geçişleri;
• Madde işaretli listeleri kullanarak basit işaretleme;
• Bir slaydın geçiş efektlerini ve görüntüleme süresini özelleştirme yeteneği;
• Birden fazla slayt gösterisi oluşturma yeteneğini destekler;
• Otomatik ve manuel kaydırma.

Demo |İndir

Kamera - ücretsiz jQuery kaydırıcısı

Kamera, birçok geçiş efektine ve duyarlı bir düzene sahip bir eklentidir. Kurulumu kolay, mobil cihazlar tarafından destekleniyor:

• Tamamen duyarlı tasarım;
• İmzalar;
• Video ekleme yeteneği;
• 33 farklı renk simgesi.

Demo |İndir

SlidesJS, duyarlı jQuery eklentisi

SlidesJS, dokunmatik cihazları ve CSS3 geçişlerini destekleyen, JQuery (1.7.1 ve üzeri) için duyarlı bir eklentidir. Bununla denemeler yapın, SlidesJS'yi projenize nasıl ekleyeceğinizi anlamanıza yardımcı olacak birkaç hazır örneği deneyin:

• Uyarlanabilir tasarım;
• CSS3 geçişleri;
• Dokunmatik cihazlar için destek;
• Kurulumu kolay.

Demo | İndirmek

BX JQuery Kaydırıcısı

Bu ücretsiz, duyarlı bir jQuery kaydırıcısıdır:

• Tamamen duyarlı - her cihaza uyum sağlar;
• Yatay, dikey slayt değişimi;
• Slaytlar resimler, videolar veya HTML içeriği içerebilir;
• Dokunmatik cihazlar için genişletilmiş destek;
• Slayt Animasyonu için CSS Geçişlerini Kullanma ( donanım ivmesi);
• Geri arama API'si ve tamamen genel yöntemler;
• Küçük dosya boyutu;
• Uygulaması kolaydır.

Demo |İndir

FlexSlider2

En iyi duyarlı kaydırıcı. Yeni sürüm, hızı ve kompaktlığı artırmak için geliştirildi.

Demo | İndirmek

Galleria - JavaScript tabanlı duyarlı fotoğraf galerisi

Galleria, yüksek kaliteli resim galerileri oluşturmak için milyonlarca web sitesinde kullanılıyor. Çalışmalarıyla ilgili olumlu eleştirilerin sayısı alışılmışın dışında:

• Tamamen bedava;
• Tam ekran görüntüleme modu;
• %100 uyarlanabilir;
• Hiçbir programlama deneyimi gerekmez;
• iPhone, iPad ve diğer dokunmatik cihazlar için destek;
• Flickr, Vimeo, YouTube ve daha fazlası;
• Çeşitli konular.

Demo | İndirmek

Blueberry - basit, duyarlı bir jQuery resim kaydırıcısı

Sizlere duyarlı web tasarımı için özel olarak yazılmış bir jQuery resim kaydırıcısını sunuyorum. Blueberry, duyarlı şablonlarla çalışmak üzere özel olarak yazılmış, deneysel bir açık kaynaklı resim kaydırma eklentisidir.

1. Mükemmel jQuery Slayt Gösterisi

JQuery teknolojilerini kullanan büyük, muhteşem bir slayt gösterisi.

2. jQuery eklentisi “Ölçek Atlıkarınca”

JQuery kullanarak ölçeklenebilir slayt gösterisi. Size en uygun slayt gösterisi boyutlarını ayarlayabilirsiniz.

3. jQuery eklentisi “slideJS”

Metin açıklamasını içeren resim kaydırıcısı.

4. Eklenti “JSliderNews”

5. CSS3 jQuery kaydırıcısı

Gezinme oklarının üzerine geldiğinizde sonraki slaydın dairesel küçük resmi görünür.

6. Güzel jQuery “Sunum Döngüsü” kaydırıcısı

Resim yükleme göstergesine sahip jQuery kaydırıcısı. Otomatik slayt değişimi sağlanmaktadır.

7. jQuery eklentisi “Paralaks Kaydırıcısı”

Hacimsel arka plan efektli kaydırıcı. Bu kaydırıcının öne çıkan özelliği, her biri farklı hızda kayan birkaç katmandan oluşan arka planın hareketidir. Sonuç hacimsel etkinin bir taklididir. Çok güzel görünüyor, kendiniz görebilirsiniz. Efekt Opera, Google Chrome, IE gibi tarayıcılarda daha sorunsuz görüntülenir.

8. Taze, hafif jQuery kaydırıcısı “bxSlider 3.0”

Demo sayfasında "örnekler" bölümünde bu eklentinin olası tüm kullanımlarına bağlantılar bulabilirsiniz.

9. jQuery resim kaydırıcısı, “slideJS” eklentisi

Şık bir jQuery kaydırıcısı kesinlikle projenizi dekore edebilir.

10. jQuery slayt gösterisi eklentisi “Kolay Slaytlar” v1.1

Slayt gösterileri oluşturmak için kullanımı kolay bir jQuery eklentisi.

11. jQuery Slidey eklentisi

Çeşitli versiyonlarda hafif jQuery eklentisi. Otomatik slayt değişimi sağlanmaktadır.

12. Otomatik slayt değiştirme özelliğine sahip jQuery CSS galerisi

Ziyaretçi belirli bir süre içerisinde “İleri” veya “Geri” oklarına tıklamazsa galeri otomatik olarak ilerlemeye başlayacaktır.

13. jQuery kaydırıcısı “Nivo Kaydırıcısı”

Geçerli koda sahip, çok profesyonel, yüksek kaliteli, hafif eklenti. Birçok farklı slayt geçiş efekti mevcuttur.

14. jQuery kaydırıcısı “MobilySlider”

Taze kaydırıcı. Çeşitli görüntü değiştirme efektlerine sahip jQuery kaydırıcısı.

15. jQuery Eklentisi “Slider²”

Otomatik slayt değiştiricili hafif kaydırıcı.

16. Yeni javascript kaydırıcısı

Otomatik görüntü değiştirmeli kaydırıcı.

Otomatik slayt değiştirmeyle slayt gösterileri uygulamak için eklenti. Görüntü küçük resimlerini kullanarak ekranı kontrol etmek mümkündür.

NivoSlider eklentisini kullanan jQuery CSS resim kaydırıcısı.

19. jQuery kaydırıcısı “jShowOff”

İçerik rotasyonu için eklenti. Üç kullanım seçeneği: gezinme olmadan (slayt gösterisi formatında otomatik değişiklikle), düğmeler biçiminde gezinmeyle, küçük resim biçiminde gezinmeyle.

20. “Deklanşör Efekti Portföyü” eklentisi

Bir fotoğrafçının portföyünü tasarlamak için yeni jQuery eklentisi. Galerinin görüntüleri değiştirme konusunda ilginç bir etkisi var. Fotoğraflar, objektif deklanşörünün çalışmasına benzer bir efektle birbirini takip eder.

21. Hafif javascript CSS kaydırıcısı “TinySlider 2”

Javascript ve CSS kullanarak bir resim kaydırıcısının uygulanması.

22. Harika kaydırıcı “Tinycircleslider”

Şık yuvarlak kaydırıcı. Görüntüler arasındaki geçiş, kaydırıcının çevre etrafında kırmızı bir daire şeklinde sürüklenmesiyle gerçekleştirilir. Tasarımınızda yuvarlak öğeler kullanırsanız web sitenize mükemmel uyum sağlayacaktır.

23. jQuery ile resim kaydırıcısı

Hafif kaydırıcı “Kaydırıcı Kiti”. Kaydırıcı farklı tasarımlarda mevcuttur: dikey ve yatay. Resimler arasında çeşitli gezinme türleri de uygulanmaktadır: "İleri" ve "Geri" düğmelerini kullanmak, fare tekerleğini kullanmak, slayttaki fare tıklamasını kullanmak.

24. Minyatür galeri “Kaydırıcı Kiti”

Galeri "Kaydırıcı Kiti". Küçük resimlerin kaydırılması hem dikey hem de yatay olarak gerçekleştirilir. Görüntüler arasındaki geçiş aşağıdakiler kullanılarak gerçekleştirilir: fare tekerleği, fare tıklaması veya imlecin küçük resmin üzerine getirilmesi.

25. jQuery içerik kaydırıcısı “Kaydırıcı Kiti”

JQuery kullanarak dikey ve yatay içerik kaydırıcısı.

26. jQuery slayt gösterisi “Kaydırıcı Kiti”

Otomatik slayt değiştirmeli slayt gösterisi.

27. Hafif profesyonel javascript CSS3 kaydırıcısı

2011'de oluşturulan zarif bir jQuery ve CSS3 kaydırıcısı.

Küçük resimlerle jQuery slayt gösterisi.

29. Basit jQuery slayt gösterisi

Gezinme düğmeleriyle slayt gösterisi.

30. Harika jQuery “Skitter” Slayt Gösterisi

Çarpıcı slayt gösterileri oluşturmak için jQuery Skitter eklentisi. Eklenti, görüntüleri değiştirirken 22 (!) tür farklı animasyon efektini destekler. İki slayt gezinme seçeneğiyle çalışabilir: Slayt numaralarını kullanma ve küçük resimleri kullanma. Çok kaliteli bir buluş olan demoyu mutlaka izleyin. Kullanılan teknolojiler: CSS, HTML, jQuery, PHP.

31. Slayt gösterisi “Garip”

Fonksiyonel slayt gösterisi. Slaytlar şunlar olabilir: basit resimler, altyazılı resimler, araç ipuçlarını içeren resimler, videolar. Gezinmek için klavyenizdeki okları, slayt numarası bağlantılarını ve sol/sağ tuşlarını kullanabilirsiniz. Slayt gösterisinin çeşitli versiyonları vardır: küçük resimli ve küçük resimsiz. Tüm seçenekleri görüntülemek için demo sayfasının üst kısmında bulunan Demo #1 - Demo #6 bağlantılarını takip edin.

Görüntü kaydırıcısı için bir fanı andıran çok özgün bir tasarım. Animasyonlu slayt geçişi. Görüntüler arasında gezinme oklar kullanılarak gerçekleştirilir. Ayrıca üst kısımda bulunan Oynat/Duraklat düğmesi kullanılarak açılıp kapatılabilen bir otomatik kaydırma da bulunmaktadır.

Animasyonlu jQuery kaydırıcısı. Arka plan resimleri, tarayıcı penceresi yeniden boyutlandırıldığında otomatik olarak ölçeklenir. Her görüntü için açıklama içeren bir blok görünür.

34. jQuery ve CSS3 kullanan “Flux Slider” kaydırıcısı

Yeni jQuery kaydırıcısı. Slaytları değiştirirken birçok harika animasyon efekti.

35. jQuery eklentisi “jSwitch”

Animasyonlu jQuery galerisi.

Otomatik slayt değiştirme özelliğine sahip kolay bir jQuery slayt gösterisi.

37. “SlideDeck 1.2.2” eklentisinin yeni versiyonu

Profesyonel içerik kaydırıcısı. Otomatik slayt değiştirme seçeneklerinin yanı sıra slaytlar arasında geçiş yapmak için fare tekerleğini kullanma seçeneği de vardır.

38. jQuery kaydırıcısı “Sudo Kaydırıcısı”

JQuery kullanan hafif görüntü kaydırıcısı. Pek çok uygulama seçeneği vardır: görsellerin yatay ve dikey olarak değiştirilmesi, slayt numarasına bağlantılarla veya bağlantısız, görsel altyazılı ve altyazısız, çeşitli görsel değiştirme efektleri. Otomatik slayt değiştirme işlevi vardır. Tüm uygulama örneklerine bağlantılar demo sayfasında bulunabilir.

39. jQuery CSS3 slayt gösterisi

Küçük resimler içeren slayt gösterisi, otomatik slayt değiştirme modunu destekler.

40. jQuery kaydırıcısı “Akı Kaydırıcısı”

Birçok görüntü değiştirme efektine sahip kaydırıcı.

41. Basit jQuery kaydırıcısı

JQuery kullanarak şık görüntü kaydırıcısı.

Temdo Slider, web siteniz için güzel kaydırıcılar oluşturmaya yönelik güçlü ve kullanımı kolay bir araçtır. Kaydırıcının ana özellikleri:

• Her slayt için arka plan olarak herhangi bir resmi veya videoyu seçebilirsiniz.
• Ek yer paylaşımı resmi
• Kaydırma animasyonu
• Slaytları değiştirirken animasyon

Güzel bir "klasik" kaydırıcı (arka plan, en fazla iki ek grafik katmanı, bir başlık, alt başlık, metin ve her slaytta en fazla iki düğme) oluşturmanız gerekiyorsa, Temdo Slider'ı kullanmanız önerilir. tam ekran kaydırıcılara ve arka plan videolarına ihtiyacınız var.

Kaydırıcı Oluşturma

Yeni bir kaydırıcı oluşturmak için WordPress Kontrol Panelinin sol menüsünde kaydırıcı > Yeni bir slayt ekleyin:

Slayt türü

Temel slayt ayarı arka plan türüdür (resim veya video). Bu parametrenin seçimine bağlı olarak slayt ayarları arayüzü değişir: bir ayar grubu yerine bir video seçildiğinde Statik arka plan bir grup beliriyor Animasyonlu arka plan.

Slayt arka planı

Slaydınız için bir arka plan resmi seçin. Arka plan resminin ekranın tüm genişliğini dolduracak şekilde uzatılacağını (en boy oranı korunurken) unutmayın. Bu nedenle Full HD (1920 x 1080 piksel) görsellerin kullanılması tavsiye edilir. Kaydırıcının yüksekliği ekranın tamamını kaplamamasını istiyorsanız kaydırıcı ayarlarından yüksekliği ayarlamanız gerekir.

Yer paylaşımlı resim

Ana arka plan görüntüsünün üzerine şeffaf veya yarı şeffaf arka planlı ek bir görsel yerleştirmek için bu seçeneği kullanın. Üst üste bindirilen görüntü, slaydın tüm yüzeyi boyunca bir doku olarak çoğaltılacaktır.

Arka Plan Animasyonu

Arka plan resmini canlandırmak istiyorsanız bu seçeneği etkinleştirin. Etkinleştirildiğinde aşağıdaki animasyon türleri kullanılabilir hale gelir:

• Merkeze göre büyütme (varsayılan)
• Sol üst köşeye göre büyütme
• Sağ üst köşeye göre büyütme
• Sol alt köşeye göre büyütme
• Sağ alt köşeye göre büyütme

Arka plan videosu

Temdo kaydırıcısı webm, mp4 ve ogg video formatlarını destekler.

Bir videoyu arka plan olarak kullanmak için öncelikle onu sitenizin medya kitaplığına yüklemelisiniz. Bunu yapmak için WordPress Kontrol Panelinin sol panelinde Medya dosyaları > Yeni ekle. Videonun indirilmesi bittiğinde adresini panoya kopyalayın ve slaydı düzenlemeye geri dönün. Video dosyasının yolunu panodan slayt ayarlarının uygun bölümüne yapıştırın. Mümkün olduğunca çok sayıda modern tarayıcıyı desteklemek için videoyu her üç formatta da kullanmanız önerilir.

Slayt özellikleri

Bu bölüm slaydın temel parametrelerini ayarlar:

• Başlık Tasarımı: Koyu bir arka planla uyumlu açık renkli bir tasarım veya başlığı açık renkli bir arka planla kontrast oluşturmak için koyu renkli bir tasarım seçebilirsiniz.
• Gezinme Rengi: Kaydırıcının altındaki sol-sağ oklar ve gezinme noktaları için bir renk seçin
• Bir bölüme kaydırma: tıklandığında sayfayı belirtilen konuma kaydıracak bir ok gösterir. Bağlantı için bir ad girin; örneğin '#contact'
• Başlığı gösterme: Başlığın bu slaytta görüntülenmesini istemiyorsanız bu seçeneği etkinleştirin.
• Başlık gölgesini gösterme: Bu slayt için başlık gölgesini kapatın.
• Grafik Animasyonu: Slayt grafiğiniz için iki animasyon efektinden birini seçin
• İçerik Animasyonu: Başlığınızı, altyazınızı, metninizi ve düğmelerinizi canlandırmanın iki yolundan birini seçin

Slayt içeriği stilini ayarlama

Slayt metni içerik stili ayarları (başlık, alt başlık ve metin) ilgili ayar gruplarında belirlenir:

• Slayt başlığı
• Slayt altyazısı
• Slayt metni

Bu grupların her birinde, her öğe için yazı tipini, rengi, boyutu ve diğer stil parametrelerini ayarlayabilirsiniz.

Grafikler ve SVG grafikleri

Buradan ek bir grafik öğesinin () yanı sıra SVG formatında vektör grafiklerini de indirebilirsiniz. Bu öğelerin her biri için, öğeye tıkladığınızda açılacak bir bağlantı ayarlayabilirsiniz.

Slayttaki düğmeler

Bu bölümde bir veya iki düğme için parametreleri ayarlayabilirsiniz:

• Düğme metni
• Bağlantı
• Vurgulu animasyon
• Simge

Kaydırırken animasyonu kaydırın

Bu bölümde, slayt içeriğinin tamamını veya tek tek slayt öğelerini kaydırırken animasyonu açıp kapatabilirsiniz. İstenirse (ve becerikliyseniz), CSS stillerini kullanarak animasyona ince ayar yapabilirsiniz.

Slayt kaydetme

Bir slaydı kaydetmeden önce, Kaydırıcılar bölümündeki uygun kutuları işaretleyerek onu bir veya daha fazla kaydırıcıya ekleyin. Henüz kaydırıcınız yoksa bağlantıya tıklayın + Yeni bir kaydırıcı ekle:

Lütfen söyle bana, kaygan kaydırıcıyı kullanarak arka plan resmi kaydırıcısı yapmak mümkün mü?
Google yardımcı olmuyor (Belgeler, resimlerin bir div bloğuna yerleştirilmesi gerektiğini söylüyor. Peki ya arka plan resimleri?

@charset utf-8; html,gövde,div,yayılım,uygulama,nesne,iframe,h1,h2,h3,h4,h5,h6,p,blok alıntı,ön,a, kısaltma,kısaltma,adres,büyük,alıntı,kod,del,dfn, em,font,img,ins,kbd,q,s,samp,küçük, vuruş,güçlü,alt,destek,tt,var,b,u,i,merkez,dl,dt,dd,ol,ul,li, alan kümesi,form,etiket, açıklama,tablo,başlık,tbody,tfoot,thead,tr,th,td(arka plan: hiçbiri tekrar kaydırma 0 0 şeffaf; kenarlık: 0 yok; yazı tipi boyutu: %100; taslak: 0 yok; dikey hizalama: taban çizgisi; kenar boşluğu: 0; dolgu: 0;) tablo (kenarlık daraltma: daralt; kenarlık aralığı: 0;) adres, makale, kenar, tuval, ayrıntılar, şekil başlığı, şekil, alt bilgi, başlık, hgroup, nav, bölüm, özet(ekran: blok;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; ) a, a:hover, düğme, düğme:hover, .anime ( -moz-transition:tümü 200ms doğrusal; -ms-transition:tümü 200ms doğrusal; -o-transition:tümü 200ms doğrusal; -webkit- geçiş:tümü 200ms doğrusal; geçiş:tümü 200ms doğrusal; imleç: işaretçi; ) .F_COL_C-START_I-CENTER ( ekran: esnek; esnek akış: sütun şimdirap; yasla-içerik: esnek-başlangıç; hizalama öğeleri: merkez; ) .F_ROW_C-START_I-CENTER ( görüntü: esnek; esnek akış: satır şimdi rap; yaslama içeriği: esnek başlangıç; hizalama öğeleri: merkez; ) .F_ROW_C-S-B_I-F-S ( görüntü: esnek; esnek akış : satır şimdi rap; yaslama içeriği: aradaki boşluk; hizalama öğeleri: esnek başlangıç; ) .F_ROW_C-START_I-STRETCH ( görüntü: esnek; esnek akış: satır şimdi rap; yaslama içeriği: esnek başlangıç; hizalama öğeleri : streç; ) gövde ( arka plan rengi: #fff; renk: #413d4b; yazı tipi ailesi:"Roboto", sans-serif; yazı tipi boyutu: 0,87vmax; satır yüksekliği: 1,37vmax; ) .wrap ( genişlik: 58,75vw; kenar boşluğu: 0 otomatik; konum: göreceli; ) başlık ( genişlik: %100; yükseklik: 100vh; arka plan görüntüsü: doğrusal-gradyan(45 derece, rgba(9, 5, 47, 0,85) %0, rgba( 49, 29, 94, .85)), url(../img/bg_header.jpg); arka plan tekrarı: tekrar yok; arka plan boyutu: kapak; arka plan konumu: orta; taşma: gizli; ) #top_header ( display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; border-top: 3.2vh; ) #logo svg( height: 3vw; ) #top_header nav ul ( display: esnek; esnek akış: satır şimdi raporu; ) nav li( liste stili: yok; metin dönüşümü: büyük harf; renk: #fff; yazı tipi ailesi: "Roboto Siyah", sans-serif; sol kenar boşluğu: 1,25vw; ) nav a( metin dekorasyonu: yok ; font-weight: kalın; color: #fff; ) a:hover ( color: #00e0d0; ) #header_content ( border-top: 24.4vh; ) #header_content h2( font-family: "Playfair Display", serif; color : #fff; font-size: 2vw; text-align: center; ) hr ( border: none; width: 3. 12vw; yükseklik: 1 piksel; arka plan rengi: #00e0d0; renk: #00e0d0; üst kenar boşluğu: 3,8vh; ) #header_content p ( genişlik: 48,6vw; renk: #fff; satır yüksekliği: 3,5vh; metin hizalama: orta; kenar boşluğu: 4,17vh; ) .btn ( dolgu: 0,8vw 1,5vw; yazı tipi ailesi: "Hammersmith One", sans-serif; yazı tipi boyutu: 1vw; renk: #00e0d0; metin dönüşümü: büyük harf; kenarlık: 1px katı #00e0d0; arka plan rengi: şeffaf; kenarlık yarıçapı: 2 piksel; kenar boşluğu: 7,3 vh; ) .btn:hover ( renk: #fff; kenarlık: 1px katı #fff; ) #dot_nav( genişlik: 3,43vw; görüntüleme: esnek; esnek akış: satır şimdi rap; yaslama içeriği: aradaki boşluk; hizala- öğeler: esnek başlangıç; kenar boşluğu üst: 18,9vh; ) .circle_nav ( genişlik: 0,62vw; yükseklik: 0,62vw; kenarlık: 2px katı #bab9bc; arka plan rengi: şeffaf; kenarlık yarıçapı: 0,62vw; ) .circle_nav :hover ( kenarlık: 2 piksel katı #00e0d0; arka plan rengi: #00e0d0; )