Resimlerinizi Sergilemek İçin En İyi 18 Ücretsiz jQuery Resim ve Galeri Kaydırıcısı 2021
Yayınlanan: 2021-09-13Geliştiriciler ve tasarımcılar, sürekli olarak, video ve fotoğraf gibi görsel içeriği, Kullanıcı Deneyimi ve web sitesi yükleme hızından ödün vermeden web sitesi tasarımlarına entegre etmenin mümkün olan en iyi yollarını arıyorlar. Söylemeye gerek yok, bu entegrasyonları harici eklentiler ve JavaScript kitaplıklarının yardımı olmadan yapmak zorlu bir süreç. Son yıllarda gördüğümüz en umut verici çözüm, jQuery resim ve galeri kaydırıcıları aracılığıyla olmuştur. Bu araçlar, görsel içeriğin kompakt ve verimli yollarla yönetilmesine yardımcı olur. PHP, Ajax ve JavaScript gibi teknolojilerin biraz yardımıyla, herhangi bir geliştiricinin ve tasarımcının öngörülen web sitesi hedeflerine sorunsuz bir şekilde ulaşmasına yardımcı olacak temiz ve akıcı görsel içerik widget'ları oluşturmak için bu jQuery eklentilerinden tam olarak yararlanabiliriz.
Google Arama, jQuery görsel içerik eklentilerini kullanmak isteyen geliştiriciler için de biraz endişe kaynağı olmuştur. Bunun nedeni, en son arama standartlarıyla tam uyumlu olması ve ilk etapta görsel içeriğin dizine eklenmesi için belirli bir eklenti türü gerektirmesidir. Bu nedenle, doğru eklentiyi ararken, esneklik ve özelleştirme seçenekleri, hafif kod temeli ve içerik etkileşiminin düzgünlüğü, tüm cihaz ve tarayıcı türleri için duyarlı bir entegrasyon ve en iyi ve en dinamik olanı yansıtan genel bir tasarım kalitesi gibi özellikleri aramak çok önemlidir. Kullanıcı Arayüzü öğeleri mevcuttur.
Aralarından seçim yapabileceğiniz yüzlerce harika eklentiyle, modern web tasarım standartlarını kullanan, tarayıcılar arası ve cihazlar arası uyumlu olan, arkalarında önemli bir topluluğa sahip olan ve ayrıca harika belgeler ve destek seçenekleri sunan birkaçını seçtik. bu kaydırıcıları ve galeri eklentilerini mümkün olan en uygun şekilde entegre etmenize yardımcı olduğu için. Aşağıdaki kaydırıcıların/slayt gösterilerinin çoğu, WordPress kurulumlarınızla da tamamen uyumludur. Ayrıca bu entegrasyon için ayrı eklentiler sağlarlar. Bu listeye eklenecek daha fazla jQuery kaydırıcısı için önerilere açığız. Önerilerinizi yorumlarda heyecanla bekliyor olacağız!
kaydırıcı
Ayrıca Swiper, slayt düzeni olarak modern bir esnek kutu düzeni kullanır. Bu, birçok sorunu çözer ve boyut hesaplamalarında zaman kazandırır. Bu düzen, aynı zamanda, saf CSS kullanarak Slaytlar ızgarasını yapılandırmanıza da olanak tanır. Swiper ayrıca kendi sayfalandırmanızı, gezinme düğmelerinizi, paralaks efektlerini ve daha fazlasını oluşturmanız için çok zengin API ile birlikte gelir.
Sunum Slayt Gösterisi
Sunum widget'ları ve uygulamaları, genellikle bireysel uygulamalar olarak yerel programlama dilleri kullanılarak oluşturulur. Ancak bu sefer, Presentation Slideshow eklentisi jQuery'den tam anlamıyla yararlanıyor ve bize yerel bir uygulama gibi hissettirecek hassas bir eklenti getiriyor. Geleneksel sunumlar gezinme için klavye işlevlerini kullansa da, bu özel kitaplık tam etkileşim ölçeği için hem klavye hem de fare etkileşimini kullanır. Bunun için kod tabanı oldukça basittir. Bu nedenle, stil çok fazla sorun olmayacak. CodyHouse adına Claudia Romano tarafından yayınlandı.
Basit jQuery Kaydırıcısı
Bu kaydırıcıyı basit yapan şey biraz JavaScript, biraz HTML5 ve biraz CSS3. John Urbank, CodePen'de basit bir jQuery kaydırıcı fikrini paylaşıyor. Yani, geliştiricilerin ve tasarımcıların keşfetmek, optimize etmek ve genel kullanım için ön uç kreasyonlarını paylaşmaları için bir web sitesidir. Varsayılan demo yalnızca bir metin kaydırıcı seçeneği gösterir. Ancak, birkaç değişiklikle herkes fotoğraf ve video gibi görsel içeriği ekleyebilir.
Kamera
Artık ücretsiz bir jQuery resim galerisi kaydırıcısı olan Kamera'nın keyfini çıkarabilir ve tüm içeriğinizi son kullanıcıya şaşırtıcı bir şekilde sunabilirsiniz. Aracı her türlü web sitesi, portföy, blog için kullanabilirsiniz, adını siz koyun, Kamera yönetir. Camera, Diapo slayt gösterisine dayanan, tonlarca iyileştirme içeren ve onu daha da iyi hale getiren açık kaynaklı bir projedir. Kaydırıcı, daha yeni web tarayıcılarıyla sorunsuz bir şekilde çalışıp çalışsa da, yazar, ne kadar akıcı olduğunu görmek için bazı eski sürümlerde de test etti. Ayrıca, Camera'yı mobil cihazlarda tam olarak çalışır hale getirmek için ek eklentilere ihtiyacınız var (bu günümüzde ve çağda çok önemlidir).
Neyse ki, kurulum, seçenekler ve geri aramalar için Kamera'nın resmi sayfasında tam belgelere sahipsiniz. Çarpıcı bir kaydırıcı ile projenizi parlatın ve daha fazla ziyaretçinin dikkatini çekin.
Sıra.js
İşleri her zaman bir adım daha ileri götürebilir ve projenizi etkili bir kaydırıcıyla süsleyebilirsiniz. Neyse ki, sıfırdan bir şeyler inşa etmenize gerek yok. Burada sahip olduğumuz jQuery tabanlı tüm farklı resim galerisi kaydırıcılarının kullanımı tamamen ücretsiz olduğundan, bir kuruş bile harcamanıza gerek yok. Evet, buna Sequence.js dahildir. Ancak aracı, sunumlar, afişler ve daha fazlası gibi her türlü başka amaç için de kullanabilirsiniz. Kısacası adım tabanlı bir uygulama arıyorsanız Sequence.js tam size göre.
Sequence.js, tüm popüler cihazlarda ve web tarayıcılarında çalışan tamamen esnek ve genişletilebilirdir. Ayrıca dokunmatik ve yumuşak geçişleri de destekler. Kullanıma hazır temalar ve otuzdan fazla seçenek ve olasılık sayesinde Sequence.js'yi ihtiyaçlarınıza göre kolaylıkla uyarlayabilirsiniz.
jQuery Resim Galerisi
Bir galeri veya bir slayt gösterisi, Amazing Slider'ın jQuery Image Gallery bölümü ile her ikisi de mümkündür. Araç, uygulamanıza çok daha basit bir şekilde bir kaydırıcı aktarmanıza yardımcı olacak harika özelliklerle doludur. Her şeyden önce, tüm ağır kaldırma işlemlerini kendiniz yapmanız gerekmez. Üstelik farklı stiller arasından seçim yapabilir ve kendinize daha fazla zaman kazandırabilirsiniz. Kaydırıcınızda video içeriğine yer vermek istiyorsanız, jQuery Image Gallery'nin bunu da desteklediğini unutmayın.
Bir milyondan fazla indirme ile, hile yapacak çözümün bu olduğunu biliyorsunuz. Buna ek olarak, daha fazla seçenek istediğinizi hissettiğinizde, pro sürüm ile her zaman bir sonraki seviyeye geçebilirsiniz. Yine de, ücretsiz alternatifi istediğiniz kadar kullanmaya devam edebilirsiniz (hem Windows hem de Mac kullanıcıları için çalışır).
Hareketli SVG Görüntü Kaydırıcısı
CodyHouse ekibi, modern ve duyarlı jQuery eklentileri söz konusu olduğunda oyunlarının zirvesindedir. Onların bir başka yaratımı, SVG geçiş efektlerinin amplifikasyonu ile geleneksel bir görüntü kaydırma yaklaşımını kullanan bir animasyonlu SVG görüntü kaydırıcısını içerir. Çarpıcı jQuery kaydırıcıları oluşturun ve görüntüleri birinden diğerine geçirmek için üç farklı SVG efekti arasından seçim yapın. Bunu çalıştırmakta sorun yaşıyorsanız, CodyHouse'daki yorum bölümü, bir cevap aramaya başlamak için harika bir yerdir.
Hareketli SVG Kahraman Kaydırıcısı
CodyHouse, modern web teknolojisinden en iyi şekilde yararlanmak için gerçekten çok çalışıyor. Bu adamların listemizde zaten üçüncü sözü, güzel kaydırıcı efektleri oluşturmak için animasyon kullanan, SVG için optimize edilmiş başka bir çarpıcı jQuery kaydırıcısına bakıyoruz. Bu, web sayfaları veya yalnızca içerik için tam sayfa kaydırıcı seçeneklerine ihtiyaç duyan uygulamalar ve web sitesi projeleri için harika çalışır. Kurulumun ardından, web yöneticisi farklı sayfa öğeleri belirleyebilir ve bunları ön sayfaya bağlayabilir. Ardından, kullanıcı, kayan bir web sayfası efektinin amplifikasyonu yoluyla öğelere kolayca göz atabilir.
Yakınlaştırma Kaydırıcısı
Zoom Slider, animasyonlu kaydırma özellikleri aracılığıyla modern web tasarımına ve öğe manipülasyonuna yönelik tamamen yeni bir yaklaşımdır. Yakınlaştırma Kaydırıcısının ana özelliği, slaytlar arasında gezinme ve aynı zamanda daha özlü ayrıntılar elde etmek için onları yakınlaştırma yeteneğidir. Her yakınlaştırma, daha fazla ayrıntı göstermek için kullanabileceğiniz yeni ve modern bir web sayfası getirir. Yakınlaştırma simgesine tıkladığınızda, yakınlaştırma alanı ve sayfa ölçeklenir. Bu, izleyicinin öğeye yaklaştığı yanılsamasını yaratır. Ayrıca, tüm sayfa kapsandığında, bazı ayrıntılar ortaya çıkar. Dynamic.js ve CSS3 geçişlerinin kullanımı, Zoom Slider'ın bu kadar duyarlı ve güzel konumlandırılmış olmasını sağlar.
Duyarlı Katmanlı Kaydırıcı
Yaratıcı alanda büyük bir proje üzerinde mi çalışıyorsunuz? İçeriği kaydırarak bir sonraki seviyeye taşıyabilecek bir kaydırıcıya kesinlikle ihtiyacınız olacak. Ve, Duyarlı Katmanlı Kaydırıcının bu istek için bir numaralı çözümünüz olduğuna tamamen inanıyoruz. Sadece modern değil, tamamen JavaScript'e dayanıyor. Geçişler ve stil seçenekleriyle çalışmak için CSS ile oynamanıza bile gerek yok; hepsi ana JavaScript dosyasında önceden paketlenmiştir. Keşfetmek için iyi eğlenceler!
Ambilight ile Bootstrap Carousel
Bootstrap şimdiye kadar jQuery kaydırıcı listemizde sıkça kullanılan bir isim olmadı, ancak Adobe WordPress çalışanları, kaydırıcı deneyimini daha kişisel, belirli bir kişiliğe daha çekici ve/veya daha kişisel hale getirmek için Ambilight efekti kullanan benzersiz bir kaydırıcı eklentisi sunarak bu engeli aşıyor veya kalabalık. Kaydırıcı tamamen duyarlıdır ve belirtilen kaydırıcı öğeleri arasında geçiş yapmak için değiştirilebilir, otomatik bir zamanlayıcı kullanır.
Kahraman Kaydırıcısı
Listemizdeki CodyHouse'un son eklentisi, basit Hero Slider adıyla gider. Bu eklenti, içeriğimizi ekranın altında veya üstünde çok fazla yer kaplamadan, mümkün olduğunca organize bir şekilde sergilemek istediğimiz anlayışı üzerine inşa edilmiştir. Bu kullanıma hazır kaydırıcı, görüntü ve video arka planları gibi özelliklerle birlikte gelir. Ayrıca metni çeşitli şekillerde hizalama yeteneği ile birlikte gelir. Basit gezinme simgelerini kullanmak yerine, genel kaydırıcı etkileşimini artıran düğmeler kullanır. Düğmeler, kullanıcıların bir sonraki içerik parçasını daha iyi anlamalarına yardımcı olmak için metin ekleme seçeneği sunar. Bu da onları kaydırıcıyı tamamen çevirmeye teşvik eder. Tüm tarayıcılar ve cihazlar için optimize edilmiştir.
Süper Basit Kaydırıcı
Süper Basit Kaydırıcı tek bir şey düşünülerek oluşturulmuştur: basitlik. Birçok kaydırıcı, özellikler ve genişletilebilir seçeneklerle dolu gibi görünse de, Süper Basit Kaydırıcı yalnızca tek bir şeye odaklanır. Bu, kullanıcılarına ekstra yağ olmadan kayan içeriği görüntüleme yeteneği vermektir. Artan etkileşim oranı için her içerik parçasına başlık ekleme özelliğiyle görsel içeriğinizi sergileyin.
Jssor
Jssor, muhtemelen bu listedeki en eski ve en zengin jQuery kaydırıcı kitaplığıdır. Altyazılar arasından seçim yapabileceğiniz yaklaşık 400 slayt efektiyle Jssor, akla gelebilecek her olası durum için duyarlı ve mobil için optimize edilmiş slaytlar oluşturmayı kolaylaştırır. İçerik kaydırma ve görüntü kaydırma için kullanabilirsiniz. Büyük ölçekli projeler için hem jQuery hem de jQuery olmayan sürümleri mevcuttur. Belgelerin sağladığı 30'dan fazla benzersiz demo örneğinin yardımıyla Jssor'u gerçek dünyada kullanabilirsiniz. Kullanıcılarına, ilerledikçe zamandan ve üretkenlikten tasarruf etme fırsatı verir.
bxSlider
Steven Wanderski'nin kaydırıcı projesi, 3.000'den fazla yıldız ve diğer geliştiricilerin çeşitli çatalları ile GitHub'daki en tanınmış kaydırıcı projelerinden biridir. bxSlider, favori cihazlarınıza ve tarayıcılarınıza doğal olarak uyum sağlar. Görsel içerikten slaytlar oluşturmanıza olanak tanır. Kendi HTML5 içeriğinizi kullanarak dinamik slaytlar da oluşturabilirsiniz. Mobil cihazlar için, maksimum etkileşim ve kullanılabilirlik için modern bir dokunma ve kaydırma özelliği desteği vardır. Slider animasyonları CSS3 geçiş modülleri kullanılarak yapılır. Kaydırıcının sayfalarınızla etkileşim kurma şekli üzerinde tam kontrole sahip olmanızı sağlayan bir API vardır. Yapılandırma ve optimizasyon için de birçok seçenek!
FlexSlider 2
WooThemes, WordPress topluluğunda bir ev adıdır ve FlexSlider, WooThemes'in ana ürünü WooCommerce kadar ivme kazanıyor. FlexSlider, geliştiricilerin projelerine ve uygulamalarına entegre etmelerini kolaylaştırmak için basit ve anlamsal bir biçimlendirme yaklaşımı kullanır. Donanım hızlandırma, sorunsuz kaydırma ve dokunma efektleri sağlar, belgelerde tonlarca destek bilgisi vardır ve ayrı bir eklenti aracılığıyla WordPress blogunuzda FlexSlider kullanmayı kolayca seçebilirsiniz. Bundan daha modern bir jQuery galeri kaydırıcısı bulamazsınız; buna kefil olabiliriz.
hareketlilik
Flickity, modern geliştiriciler için dokunma dostu, tamamen duyarlı, tıklanabilir bir web ve mobil galeridir. Tam ölçekli slayt gösterileri ve galeriler oluşturmak için uygun olan Flickity'nin modern tasarım seçenekleri, geliştiricilerin daha fazlası için geri gelmesini sağlıyor. Bu kitaplık içinde HTML5 ve CSS3'ün tam kullanımı.
Premium jQuery Slider ve Galeri Eklentileri
En belirgin ve başarılı ücretsiz jQuery kaydırıcısını ve galeri eklentilerini keşfettikten sonra, biraz daha büyük silahlara geçmenin zamanı geldi: premium eklentiler. Seçimimiz, çalışmalarını Codecanyon'da yayınlayan harika geliştiricilerin en iyi premium kaydırıcılarını içerecek. Aşağıdaki eklentiler, şimdiye kadar sunduğumuz diğer eklentilerden mutlaka daha iyi değildir. Bununla birlikte, daha destek odaklı bir yaklaşım vaat ediyorlar (ki bu en çekici faktör olabilir). Toplamda, bu eklentiler birkaç kez satın alındı ve indirildi. Her birini mümkün olan en iyi şekilde tanıtmaya çalışacağız, ancak nihai kararı size bırakacağız.
Teta Atlıkarınca 3D
3D, web'deki görsel küre içinde bir şeydir, ancak olmasını istediğimiz kadar yaygın değildir. Bu listedeki ilk 3D destekli galeri kaydırıcı eklentimiz Theta Carousel'dir. Theta Caoursel içindeki duyarlı entegrasyon, herhangi bir cihaz ekranı boyutu için otomatik ölçeklendirme özelliklerine izin verir. Gerçekten esnektir ve eklentinin nasıl aktığı, göründüğü, hissettiği ve kullanıcıyla nasıl etkileşime girdiğinden sorumlu olmanızı sağlar. Yerleşik yapılandırma paneli, eklentinin neler yapabileceğini anlamayı kolaylaştırır ve eklentiyi gerçekten kendi beğeninize göre yapılandırmayı çok daha kolay hale getirir. Önceden tanımlanmış nesne taşıma parametreleri arasından seçim yapabilir veya kendinizinkini belirleyebilirsiniz.