Uyarlanabilir kaydırıcıların eklenmesi. Görüntüler için ücretsiz JQuery kaydırıcı uygulamaları Jquery tam sayfa kaydırıcı

Kaydırıcı görünümündeki galeri resimleri. Bu sonuçlandırma için materyali hazırlamaya başladığımda, net materyalin sadece iki tutarsızlığı olacağını düşündüm ve konuyu terk ettim. resim galerileri dünya kadar eski ve şimdiden talep görüyor. Merakım, eğer cilt tahrişinden gözlerimin önünde nezaketin ne olduğunu bulmak mümkün olsaydı, hiçbir sınırın olmamasıydı. Bu bağlantının sonucu pek iyi olmadı ama bence yeterli kopya olacak. Bunlar arasında uyarlanabilir galeri resimleri yani ben galeriler.
Konuşmadan önce, bir önceki başlıkta WordPress için bazı galeri eklentilerini topladım, bu yüzden WordPress üzerinde bir web siteniz varsa çok mutlu olacağınızı düşünüyorum.

1. Galeriyi Birleştir

Bezkoshtovna, uyarlanabilir fotoğraf ve video galerisi JQuery kütüphanesini temel alır. Geliştirme sırasında vurgu basitlik, vikoristanya ve uyum üzerinedir. Çok sayıda net tasarım temasına sahip olmak ve ayrıca önemli olan tasarım temalarına göre yazabilme becerisi önemlidir.

2. Küçük Resim Atlıkarıncaya Sahip Duyarlı Resim Galerisi

Duyarlı resim galerisi bir önizleme atlıkarıncasını etkinleştirme işleviyle. Ön yükleyici ekranınızın boyutuna uyum sağlar ve görüntü boyutunu geliştirir.

4. jQuery ile Tam Sayfa Resim Galerisi

Bir tane daha Tam ekran resim galerisi. "Rodzinka"nın bu özelliği, büyük bir tam ekran görüntünün ayının konumuna göre yer değiştirmesidir.
Kullanıcı fareyi hareket ettirdikçe ekranın altındaki küçük resim çubuğu otomatik olarak kayar.

5. jQuery ile Slider Galerisi

Galerileri albümlere bölmek için idealdir. Bir albüm seçtiğinizde küçük resimler gösterilecektir Görüntülemek için kaydırıcıyı kullanın.

6. Galleria

İyi tasarlanmış duyarlı resim galerisi, lütfen Flickr, Picasa, YouTube ve diğerlerinden fotoğraf ve video galerilerini gösterin. mobil cihazlar ve tam ekran modunda çalışma yeteneği. İmzaları görüntüleme yeteneği. Є ödendi

Bu, jQuery'de yazılmış uyarlanabilir bir dokunmatik kaydırıcıdır. Bu eklentinin motoru CSS3 animasyonlarını kullanır ve aynı zamanda tarayıcıların eski sürümleri için geri dönüşleri aktarır. Glide.js'nin kullanımı basit ve kolaydır.

Vikoristannya

1. jQuery'yi içerir

Eklentinin tek içeriği jQuery'dir ve öncelikle onu eklememiz gerekir:

2. Glide.js'yi bağlayın

3. HTML'yi ekleyin

Temel stiller dahildir.

Nakataemo HTML yapısı kaydırıcı.

4. Başlatma

Ayarlamalardan sonra kaydırıcıyı ayarlardan başlatıyoruz.

...yoksa kendi başımıza düzelteceğiz

Kurulum

Mevcut parametrelerin listesi:

Parametre	Zamovchuvannyam'ın önemi	Tip	Tanım
otomatik oynatma	4000	int/bool	Otomatik kaydırma (devre dışı için yanlış)
havada duraklama	doğru	bool	Fareyi kaydırıcının üzerine getirdiğinizde otomatik kaydırmayı azaltın
animasyonZaman	500	int	!!! Bu seçenek, tarayıcının css3'ü desteklememesi nedeniyle çalışır. CSS3 tarayıcı tarafından desteklendiğinden, Danimarka parametresi.css dosyasını değiştirmeniz gerekiyor!!!
oklar	doğru	bool/dize	Okları göster/ekle/ekle. Kaydırıcı kapsayıcısındaki okları görüntülemek için True. Alım için yanlış. Özel HTML kodu eklemek için sınıfa bir ad da girebilirsiniz (örneğin: ".sınıf-adı")
oklarSarmalayıcıSınıfı	kaydırıcı oklar	sicim	Oklarla konteynere atanan sınıf
okAna Sınıf	kaydırıcı ok	sicim	Tüm oklar için ana sınıf
okSağSınıf	kaydırıcı-ok-sağ	sicim	Sağ ok için sınıf
okSolSınıf	kaydırıcı ok - sol	sicim	Sol ok için sınıf
okSağMetin	Sonraki	sicim	Sağ ok için metin
okSolMetin	önceki	sicim	Sol ok için metin
navigasyon	doğru	bool/dize	Slayt gezinmesini göster/ekle/ekle. Görüntü için doğrudur. Alım için yanlış
navigasyon merkezi	doğru	bool	Yüzde yüz navigasyon
navClass	kaydırıcı-gezinme	sicim	Gezinme kapsayıcısı sınıfı
navItemClass	kaydırıcı-nav__item	sicim	Gezinme öğesi için sınıf
navCurrentItemClass	kaydırıcı-nav__item--geçerli	sicim	Gezinme akış öğesi için sınıf
tuş takımı	doğru	bool	Sol/sağ tuşlara basarken slaytı kaydırın
dokunma mesafesi	60	int/bool	Nokta (dokunma) için teşvik. Uygulanabilirlik açısından yanlış.
beforeInit	işlev()()	işlev	Eklenti başlatılmadan önce çalışacak bir geri arama
AfterInit	işlev()()	işlev	Eklenti başlatıldıktan sonra başlatılacak geri arama
geçişten önce	işlev()()	işlev	Kaydırıcıyı kaydırmadan önce başlatılacak geri arama
geçiş sonrası	işlev()()	işlev	Kaydırıcıyı kaydırdıktan sonra başlatılacak geri arama

API'si

Vikoristan API'si için değişime glide yazın.

Var glide = $(".slider").glide().data("api_glide");

API yöntemleri artık kullanımınıza sunulmuştur.

Glide.jump(3, console.log("Vay be!"));

• .current() - Geçerli taraf numarasını döndürür
• .play() - Otomatik kaydırmayı başlatır
• .pause() - Zupinity otomatik kaydırma
• .next(callback) - Kaydırıcıyı ileri doğru hareket ettirin
• .prev(callback) - Kaydırıcıyı geri taşı
• .jump(mesafe, geri arama) - Önceki slayta atla
• .nav(target) - Şarkı öğesine gezinme ekleyin (örneğin: "body", ".class", "#id")
• .arrows(target) - Okları tek bir öğeye ekleyin (örneğin: "body", ".class", "#id")

1. Harika jQuery slayt gösterisi

Velike Slayt gösterisi çalışmıyor Wikipedia jQuery teknolojileriyle.

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

jQuery kullanarak ölçeklendirilmiş slayt gösterileri. Slayt gösterisinin boyutlarını kendinize en uygun şekilde ayarlayabilirsiniz.

3. jQuery eklentisi "slideJS"

Metin açıklamalı kaydırıcı ekranı.

4. Eklenti "JSliderNews"

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

İmlecinizi gezinme oklarının üzerine getirdiğinizde sonraki slaydın dairesel küçük resmi görünür.

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

Görüntü kullanılabilirliği göstergesine sahip jQuery kaydırıcısı. Slaytların otomatik değişimi aktarıldı.

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

Arka planda hacimsel efektli kaydırıcı. Bu kaydırıcının çubuğu, her biri değişen akışkanlıkla dönen birkaç toptan oluşan bir arka plan üzerine yerleştirilmiştir. Sonuç, hacimsel bir etkinin taklididir. O kadar güzel görünüyor ki, kendiniz de içine girebilirsiniz. Efekt Opera gibi tarayıcılarda daha düzgün görünür, Google Chrome, yani.

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

Demo sayfasında "örnekler" bölümünde her şeyle ilgili talimatları bulabilirsiniz. Olası seçenekler Bu eklentinin Vikoristan'ı.

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

Projenizi gerçekten aydınlatabilecek şık bir jQuery kaydırıcısı.

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

Üzgünüm jquery wiki slayt gösterileri oluşturmak için eklenti.

11. “jQuery Slidey” eklentisi

Çeşitli uygulamalar için hafif jQuery eklentisi. Slaytların otomatik değişimi aktarıldı.

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

“İleri” veya “Geri” oklarına basmadığınız sürece galeri otomatik olarak kaydırılacaktır.

13. jQuery kaydırıcısı "Nivo Kaydırıcısı"

Geçerli koda sahip, çok profesyonel, anlaşılır ve hafif bir eklenti. Slayt değiştirmenin birçok farklı efekti aktarılmıştır.

14. jQuery kaydırıcısı "MobilySlider"

Taze kaydırıcı. Çeşitli efektlere sahip jQuery kaydırıcısı, görüntüyü değiştirin.

15. jQuery Eklentisi “Slider²”

Otomatik slayt değiştirme özelliğine sahip hafif kaydırıcı.

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

Görüntülenecek kaydırıcıyı otomatik olarak değiştirin.

Otomatik slayt değişimiyle slayt gösterileri uygulamak için eklenti. Ek küçük resimlerin görüntülenmesini kontrol edebilirsiniz.

jQuery CSS kaydırıcısı NivoSlider eklentisinden resim.

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

Birlikte döndürmek için eklenti. Üç gezinme seçeneği: gezinme olmadan (slayt gösterisi formatında otomatik değişiklikle), düğme görünümünde gezinme, resim küçük resim görünümünde gezinme.

20. Eklenti "Deklanşör Efekti Portföyü"

Bir fotoğrafçının portföyünü tasarlamak için yeni jQuery eklentisi. Galeri, görüntüyü değiştirmenin basit bir etkisini uyguladı. Fotoğraflar, mercek deklanşörüne benzer bir efektle birer birer değişir.

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

Görüntü kaydırıcısının uygulanmasında javascript ve CSS kullanılır.

22. Dil kaydırıcısı “Tinycircleslider”

Şık yuvarlak kaydırıcı. Görüntüler arasındaki geçiş, kalp kazığı gibi görünen bir dairenin kazık boyunca sürüklenmesiyle yapılıyor. Tasarımda yuvarlak öğeler kullanırsanız web sitenize mükemmel uyum sağlar.

23. jQuery kullanarak resim kaydırıcı

Hafif kaydırıcı "Kaydırıcı Kiti". Farklı Vikonanni'ler için kaydırıcıyı görüntüleyin: dikey ve yatay. Resimler arasında farklı gezinme türleri de vardır: "İleri" ve "Geri" düğmelerini kullanmak, fare tekerleğini kullanmak ve slayta tıklamak.

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 çalışır. Fare tekerleğini kullanarak, fareye basarak veya imleci küçük resmin üzerine getirerek görüntüler arasında geçiş yapabilirsiniz.

25. "Kaydırıcı Kiti" yerine jQuery kaydırıcısı

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, jQuery ve CSS3'ü temel alan zarif bir kaydırıcı.

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

29. jQuery slayt gösterilerini kolaylaştırın

Gezinme düğmeleriyle slayt gösterisi.

30. Neumovirn slayt gösterisi jQuery “Skitter”

Süslü bir slayt gösterisi oluşturmak için jQuery eklentisi "Skitter". Eklenti, görüntüleri değiştirirken 22 (!) türde çeşitli animasyon efektlerini destekler. Slaytlar arasında gezinmek için iki seçeneği kullanabilirsiniz: ek slayt numaraları kullanma ve ek küçük resimler kullanma. Gösteriye hayret etmek çok kolay, bu çok açık bir keşif. İncelenecek teknolojiler: CSS, HTML, jQuery, PHP.

31. Slayt gösterisi "Garip"

Fonksiyonel slayt gösterisi. Slaytlar şu şekilde görünebilir: basit resimler, altyazılı resimler, ipuçları içeren resimler, videolar. Gezinmek için slayt numaralarındaki okları ve klavyedeki sağ/sol el tuşlarını kullanabilirsiniz. Slayt gösterisi çeşitli seçeneklerle sunulur: küçük resimli ve küçük resimsiz. Tüm seçenekleri incelemek için Demo #1 - Demo #6'ya gidin ve bunu demo sayfasında canavarın kullanımına sunacağız.

Kaydırıcının görüntüsü tahmin edebileceğiniz gibi oldukça özgün bir tasarıma sahip. Slayt değiştirme animasyonu yapıldı. Okları kullanarak resimler arasında gezinebilirsiniz. Ayrıca Oynat/Duraklat düğmesini kullanarak düğmeye basabileceğiniz ve sesi açabileceğiniz bir otomatik değişiklik de bulunmaktadır.

Animasyonlu jQuery kaydırıcısı. Arka plan resimleri tarayıcı penceresinin boyutunu değiştirirken otomatik olarak ölçeklenir. Dış görünüm görüntüleri için açıklama içeren bir blok görüntülenir.

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

Yeni jQuery kaydırıcısı. Slaytları değiştirirken bir dizi harika animasyonlu efekt.

35. jQuery eklentisi “jSwitch”

Animasyonlu jQuery galerisi.

Otomatik slayt değişimi ile jQuery'de daha kolay slayt gösterisi.

37. "SlideDeck 1.2.2" eklentisinin yeni sürümü

Profesyonel içerik kaydırıcısı. Slaytı otomatik olarak değiştirme seçeneklerinin yanı sıra slaytlar arasında hareket etmek 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ı. Çok sayıda uygulama seçeneği vardır: resmin yatay ve dikey değişimi, slayt numarasındaki talimatlarla ve talimatsız, altyazılı ve altyazısız, resim değişikliğinin farklı etkileri. Ä işlevi otomatik değişim slaytlar. Uygulamaya yönelik uygulama talimatlarını demo sayfasında bulabilirsiniz.

39. jQuery CSS3 slayt gösterisi

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

40. jQuery Akı Kaydırıcısı

Şeffaf efektlere sahip bir kaydırıcı görüntüleyin.

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

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

Bir saat hareketsiz kalmak ve bununla birlikte ilerlemek. İnternete rastladı. Nasıl değiştireceğinizi zaten öğrenebilirsiniz dış görünüm siteler, özellikle de büyük popülerlikleri nedeniyle duyarlı tasarım. Ve bağlantıda birçok yenisi ortaya çıktı uyarlanabilir jquery kaydırıcılar, galeriler, karuseller veya benzeri eklentiler.
1. Duyarlı Yatay Gönderiler Kaydırıcısı

Uyarlanabilir yatay karusel detaylı talimatlar Kurulumdan. Vikonana'nın sade bir tarzı var ama siz kendinize göre şekillendirebilirsiniz.

2. Glide.js'deki kaydırıcı

Bu kaydırıcı her site için uygundur. Açık kaynak kodlu Glide.js burada inceleniyor. Kaydırıcı renkleri kolayca değiştirilebilir.

3. Eğik İçerik Slayt Gösterisi

İçerikli uyarlanabilir kaydırıcı. Bu kaydırıcının ana özelliği, 3 boyutlu efektin yanı sıra rastgele sırada görünen çeşitli animasyonlardır.

4. Wikoristanny HTML5 tuvalli kaydırıcı

Etkileşimli parçalara sahip çok güzel ve ilgi çekici bir kaydırıcı. HTML5 tuvaline yardım için Vikonany,

5. "Görüntüyü değiştir" kaydırıcısı

Geçiş efektli kaydırıcı (bir nesneden diğerine yumuşak dönüşüm). Portfolyoya benzeyen bir web geliştiricisinin veya web stüdyosunun portföyü için hangi kaydırıcı en uygunudur?

6. Daire kaydırıcısı

Görünümdeki kaydırıcı, görüntüyü çevirme etkisine sahiptir.

7. Arka planlı kaydırıcı

Karıştır ve eşleştir arka planına sahip uyarlanabilir kaydırıcı.

8. Uyarlanabilir moda kaydırıcısı

Site için basit, hafif ve uyarlanabilir kaydırıcı.

9. Dilim Kutusu - jQuery 3D görüntü kaydırıcısı(GÜNCELLEMELER)

Slicebox kaydırıcısının sürümü düzeltmeler ve yeni özelliklerle güncellendi.

10.Ücretsiz Animasyonlu Duyarlı Görüntü Izgarası

Fotoğrafları yeniden düzenlemenize, çeşitli animasyonlar ve zamanlamalar seçmenize olanak tanıyan esnek bir görüntü ızgarası oluşturmak için JQuery eklentisi. Bu, sitede bir arka plan veya dekoratif unsur olarak görülebilir, böylece yeni görsellerin seçici görünümünü ve geçişlerini ayarlayabiliriz. Wiki eklentisinin birçok çeşidi vardır.

11.Flex kaydırıcı

Web siteniz için evrensel, ücretsiz bir eklenti. Bu eklenti birçok kaydırıcı ve atlıkarınca seçeneğinde mevcuttur.

12. Fotoğraf çerçevesi

Fotorama- bu evrensel eklenti. Çok fazla özelleştirme var, her şey hızlı ve kolay çalışıyor ve slaytları ekranın tamamında görüntüleyebilirsiniz. Kaydırıcı, küçük resimlerle veya küçük resimler olmadan, dairesel kaydırmayla veya bunlar olmadan ve çok daha fazlası ile sabit boyutta veya uyarlanabilir bir boyutta yapılandırılabilir.

Not:Kaydırıcıyı birkaç kez yerleştirdim ve bunun en iyilerden biri olduğuna saygı duyuyorum

13. Küçük resimlerle birlikte ücretsiz ve uyarlanabilir 3D kaydırıcı galerisi.

Deneysel galeri kaydırıcısı 3DPanel Düzeni ağ ile merkezi etkiler animasyonlar.

14. CSS3 Kaydırıcısı

Ek css3 yardımı için uyarlanabilir Wiconia kaydırıcısı Sorunsuz bir şekilde ortaya çıkan içerik ve ışık animasyonu.

15. WOW Kaydırıcısı

Vay Kaydırıcısı- Bu kaydırıcı gelişmiş görsel efektlerle görüntülenir.

17. Elastik

Tam uyarlanabilirliğe ve slayt küçük resimlerine sahip elastik kaydırıcı.

18. Yarık

Bu, CSS3 animasyonunu kullanan tam ekran uyarlanabilir bir kaydırıcıdır. Viconano kaydırıcısının iki seçeneği vardır. Animasyon benzersiz ve güzel olacak şekilde tasarlandı.

19. Uyarlanabilir fotoğraf galerisi artı

Benzersiz görsellere sahip basit, ücretsiz bir galeri kaydırıcısı.

20. WordPress için Duyarlı Kaydırıcı

WP için uyarlanabilir kaydırıcı.

21. Paralaks İçerik Kaydırıcısı

Paralaks efektli kaydırıcı ve ek CSS3 kullanılarak dış görünüm öğesinin kontrolü.

22. Müzik bağlantısı içeren kaydırıcı

Gizli içerikten kaydırıcı çıkış kodu JPlayer. Bu kaydırıcı müzikli bir sunumu öngörür.

23. jmpress.js'den kaydırıcı

Uyarlanabilir kaydırıcı jmpress.js'yi temel alır ve slaytlara 3B efektler uygulamanıza olanak tanır.

24. Hızlı Vurgulu Slayt Gösterisi

Slayt gösterisi İsveçli mırıltılar slaytlar. İmlecin üzerine geldiğinizde slaytlar yanıp söner.

25. CSS3 ile Görüntü Akordeon

Ek css3 kullanılarak akordeon görüntüsü.

26. Bir Dokunuşla Optimize Edilmiş Galeri Eklentisi

Bu, dokunmatik cihazlar için optimize edilmiş uyarlanabilir bir galeridir.

27. 3D Galeri

3D Duvar Galerisi- için yaratıldı Safari tarayıcısı 3 boyutlu bir efekt görünecektir. Başka bir tarayıcı kullanırsanız işlevsellik iyi olacaktır ancak 3D efekti görünmeyecektir.

28. Sayfalandırmadan kaydırıcı

Ek JQuery UI kaydırıcısının arkasında yan numaralandırmaya sahip uyarlanabilir kaydırıcı. Buradaki fikir, basit navigasyon konseptinden yararlanmaktır. Tüm görüntüleri geri sarmak veya slaytları yeniden karıştırmak mümkündür.

29.jQuery ile Görüntü Montajı

Görüntüyü ekranın genişliğine sığacak şekilde otomatik olarak genişletin. Web sitesinde bir portföy geliştirmek gerçekten harika.

30. 3D Galeri

CSS3 ve jQuery kullanan basit 3 boyutlu daire kaydırıcısı.

31. Tam ekran modu css3 ve jQuery'de 3D efektli

Kaydırıcı, ön geçişi görüntülemek için tam ekran görüntülemeye olanak tanır.