Ev
Parametrlər 
jquery foto kaydırıcısı. Adaptiv sürgülərin seçimi. jQuery şəkil kaydırıcısı, slideJS plagini

jquery foto kaydırıcısı. Adaptiv sürgülərin seçimi. jQuery şəkil kaydırıcısı, slideJS plagini

Müəllifdən: Veb səhifələrin sürüşmədən görünən hissəsinin ehtimal olunan "ölümü" ilə bağlı şayiələrə baxmayaraq, yaxşı bir sürüşmə ehtiyacı aradan qalxmadı. Bir saniyə üçün dürüst olaq - sürgülər əyləncəlidir. Bundan əlavə, başqa heç nə, daşınan məzmundan fərqli olaraq, istifadəçidə “vay” effektinə səbəb olmur. Bütün sürgülər bir-birini əvəz edən bir neçə slaydlar toplusudur və sürüşdürmə kodunun mümkün qədər yüngül olması son dərəcə vacibdir. Məhz belə hallarda jQuery bizə kömək edəcək.

Envato Market-dən olan 20 jQuery sürgüsünü nəzərdən keçirin və siz anlayacaqsınız ki, onlar arasında rəvan axan şəkillər blokundan daha çox olan sürgülər var.

1. RoyalSlider – jQuery istifadə edərək toxunma ekranlı şəkil qalereyası

Hal-hazırda, toxunma ekranı üçün də uyğun olan həssas sürüşdürmə əvvəlkindən daha çox şey deməkdir. RoyalSlider hər iki xüsusiyyəti özündə birləşdirir: həssaslıq və sensor ekran funksionallığı. Yaxşı seçim, çünki qalereya HTML5 və CSS3-də yazılmışdır.

Bəziləri maraqlı xüsusiyyətlər:

Özünüz veb saytı necə yaratmaq olar?

SEO optimallaşdırılması

Yüksək dərəcədə özelleştirilebilir

10-dan çox başlanğıc şablonu

CSS3 keçidləri üçün geri dönüş var

Fikrimcə, ən gözəl xüsusiyyət əsas JS faylından lazımsız şeyləri çıxarmağa və bununla da çəkisini azaltmağa imkan verən "modul skript arxitekturası" dır. RoyalSlider, JQuery-də toxunma ekranlı şəkil qalereyası, hər hansı bir tərtibatçının alət dəstinə əlavə edilməli olan möhkəm JavaScript slayderidir.

2. Slider Revolution cavab verən jQuery plagini

Sürgü ilə "inqilabi" bir şey etmək o qədər də asan deyil. Sürgülərə gəldikdə, onlara əlavə edə biləcəyiniz çoxlu xüsusiyyətlər var. Bununla belə, Slider Revolution həqiqətən yaxşı cəhddir. jQuery slayderləri arasında bu instansiya bütün mümkün tələblərinizə cavab verir.

Slayder xüsusiyyətlərinin siyahısı çox böyükdür, ona görə də yalnız ən yaxşılarını sadalayacağam:

Paralaks effekti və xüsusi animasiya

Limitsiz sayda qat və keçidləri olan slaydlar

istifadəyə hazır, dərindən fərdiləşdirilə bilən üslublar

və daha çox

Şəkil, quraşdırılmış video pleyer və linklər əlavə etmək imkanı sosial şəbəkələr Slider Revolution-ı internetdəki ən çevik və fərdiləşdirilə bilən seçimlərdən birinə çevirir.

3. LayerSlider adaptiv jQuery slider plagini

“LayerSlider adaptiv jQuery slider plagini” adı bu slayderi həqiqətən qiymətləndirə bilməz.
Slaydlar arasında 200+ 2D və 3D keçid hər kəsin başını döndərəcək.

Bir neçə diqqətəlayiq xüsusiyyət:

13 dəri və 3 menyu növü

Slayderin üstünə sabit bir şəkil yerləşdirmək imkanı

Və jQuery geri qaytarılması

Və daha çox

Əvvəlki slayderdə olduğu kimi, demək olar ki, istənilən məzmunu, hətta HTML5 rezident multimedia məzmununu da əlavə edə bilərsiniz. LayerSlider sürgüləri canlandırır və çox gözəldir.

4. jQuery Banner Rotator/Slideshow

jQuery Banner Rotator / Slideshow əsas funksionallığı qurban verməyən kifayət qədər sadə bir sürüşmədir.

İmkanlar:

Alət məsləhətləri, mətn əlavələri və s.

Previews və komponentlərə baxmaq üçün müxtəlif seçimlər

Bir və ya hamısı üçün gecikmə ilə taymer

Bütün slaydlar üçün çoxsaylı keçidlər və ya hər biri üçün ayrı-ayrılıqda müxtəlif keçidlər

jQuery Banner Rotator / Slideshow, digər JQuery sürgüləri ilə müqayisədə yalnız əsas imkanlara malikdir, lakin bu barədə unutmamalısınız.

5. All In One Slider – Cavab verən jQuery slider plagini

İnternetdə görünən istənilən kaydırıcının özünəməxsus baxışı var və öz sahəsində istənilən problemi həll edir. Amma bu deyil. All In One Slider "hər şey daxil" adlandırıla bilər.

Düşünürəm ki, əksər veb tərtibatçıları və dizaynerlərinin sübut edilmiş həlli var, lakin onlar həmişə yeni bir şey axtarırlar. Və bu "yeni bir şey" daxildir:

Banner rotatoru

Önizləmə ilə banner

Pleylist ilə banner

Məzmun Slayderi

Karusel

Bütün sürgü növləri jQuery sürgülərinin ehtiyac duyduğu funksiyaların hamısını olmasa da, əksəriyyətini dəstəkləyir. All In One Slider sizin hər şey daxil olacaqmı?

6. UnoSlider – Adaptiv toxunma ekranı slayderi

Slayderiniz cavab vermirsə və toxunma ekranlarını dəstəkləmirsə, deməli sizdə səhv sürüşdürmə var. UnoSlider düzgündür.

Bu slayder günəşdə sadəlik və zəngin funksiyalar dəsti arasında yerini tapdı. Funksiyalar:

Mövzu dəstəyi

12 hazır mövzu

40 keçid

IE6+ dəstəyi

Dizayn və üsluba diqqət yetirən bütün xüsusiyyətlər UnoSlider-i mövzular əlavə etmək imkanı ilə əla məzmun sürüşdürməsinə çevirir.

7. Master Slider - jQuery toxunma ekranı slayderi

"Hamısını idarə etmək üçün bir jQuery slayderi" axtarırsınız? Master Slider-i sınayın – JQuery toxunma ekranının altındakı sürüşdürmə müxtəlif ölçülərdə ekran...

Yaxşı dizayna gəldikdə, bu nümunə ən yaxşılarından biridir:

25-dən çox şablon

Aparat sürətləndirilmiş keçidlər

Toxunma və sürüşdürmə dəstəyi

Və daha çox

İnteraktiv keçidlər, animasiyalı təbəqələr və qaynar nöqtələr mütləq diqqətinizi çəkəcək. Master Slider sənət əsəridir.

8. TouchCarousel - jQuery məzmun sürüşdürmə cihazı və slayder

TouchCarousel pulsuz dəstək və yeniləmələr təklif edir. Bununla belə, bu yüngül jQuery karusel sürgüsünün bütün xüsusiyyətləri deyil.

Əgər adda "toxunma" sözü varsa, sürüşdürmənin tam uyğunlaşdığını və toxunuşları dəstəklədiyini təxmin edə bilərsiniz. Digər xüsusiyyətlər:

SEO optimallaşdırılması

Ağıllı avtomatik oynatma

Avadanlıq sürətləndirilməsi ilə CSS3 keçidləri

Fərdiləşdirilə bilən UI və Photoshop üçün 4 dəri

TouchCarousel, slaydların bənzərsiz fiziki sürüşməsinə görə, hisslərin tamamilə yeni səviyyəsini gətirir. mobil cihazlar Oh.

9. Advanced Slider - jQuery XML slayderi

jQuery slayderlərindən təkcə vebsaytlarda istifadə oluna bilməz. Onlar veb proqramlarında da faydalı ola bilər. Advanced Slider bunu etməyə imkan verir.

HTML və ya XML işarələməsi ilə bu təkmil slayder qalıcı təəssürat yaradır:

Animasiya təbəqələri və ağıllı video

100+ keçid və 150+ fərdi xüsusiyyət

15 sürüşmə dərisi, 7 sürüşdürmə çubuğu dərisi və daxili işıq qutusu dəstəyi

Klaviatura naviqasiyası, toxunma dəstəyi və tam fərdiləşdirmə

Və daha çox

Bununla belə, ən çox ən yaxşı xüsusiyyət Bu Qabaqcıl Slayder jQuery XML Slider API-dir və kaydırıcıyı veb tətbiqiniz üçün ideal seçim edir.

10. jQuery Slider Böyütmə/Uzaklaşdırma Effekti Tam Cavab verir

Xüsusiyyətləri haqqında oxumağa başlamazdan əvvəl sizi demoya baxmağa vadar edəcək jQuery sürgülərindən biri. Siz sadəcə bu “böyütmə/kiçilt effekti”nin nə demək olduğunu başa düşmək istəyirsiniz.

Böyütmə effekti kifayət qədər zəifdir, lakin sürüşdürmənin qalan hissəsi statik olduğu halda o, görüntüyə nəzarət hissi və real toxunma əlavə edir. Slayderin xüsusi xüsusiyyətləri:

CSS3 qat keçidləri

Qatlar üçün animasiya sonu seçimi

Sabit en, tam ekran və tam genişlik seçimləri

HTML və CSS formatı ilə animasiya mətni

Əksər slayderlər mümkün qədər çox effekti birləşdirməyə çalışır, lakin jQuery Slider Zoom In/Uut Effect Fully Responsive yalnız Ken Burns effektinə malikdir, lakin o, yaxşı həyata keçirilir.

11. jQuery Carousel Evolution

Yuxarıda qeyd olunan Advanced Slider - jQuery XML Slider kimi, jQuery Carousel Evolution-ın da funksionallığı artırmaq və ya kaydırıcıyı başqa bir layihəyə inteqrasiya etmək üçün istifadə edilə bilən öz API-si var.

Özünüz veb saytı necə yaratmaq olar?

Öz əlinizlə veb saytlar yaratmaq üçün bu gün hansı texnologiyalara və biliklərə ehtiyac var? İntensivdə tapın!

Şəkillərlə, HTML işarəsi, YouTube və Vimeo videolarını da alacaqsınız:

SEO optimallaşdırılması

9 karusel üslubu

Kölgə və əks etdirmə effektləri

Şəkil ölçüsü həm ön, həm də arxada tənzimlənə bilər

jQuery Carousel Evolution çox istifadə halları olan sadə karuseldir.

12. Seksual Slider

Sexy Slider artıq əvvəlki kimi seksual deyil. Bununla belə, yaşına görə bu kaydırıcı etibarlıdır.

Slayder ilk baxışdan çox təsir edici görünmür, lakin onu yaxşı fərdiləşdirsəniz, dizaynınıza mükəmməl uyğunlaşacaq. İmkanlar:

Slaydları avtomatik oynat

Şəkil başlıqları

Davamlı slayd oxutma

6 keçid effekti

Sexy Slider tam gücünü və potensialını açmaq üçün sizi gözləyir.

13. Lightbox ilə jQuery Image & Content Scroller

Bütün bu mobil hazır dizaynlar və dəstək ilə toxunma ekranları unutmayan jQuery slayderini görmək xoşdur stolüstü kompüterlər.

jQuery Image & Content Scroller w/ Lightbox klaviatura daxiletmə və siçan çarxını, eləcə də digər funksiyaları dəstəkləyir:

Üfüqi və şaquli oriyentasiya

Slayderin daxilində və ya xaricində mətn başlıqları

Bir anda görünən müəyyən sayda slayd təyin etmək imkanı

Daxili şəkillər, Flash, iframe, Ajax və daxili məzmun

Slayderdə həmçinin daxili işıq qutusu var. İstəyirsinizsə, jQuery Image & Content Scroller w/ Lightbox-da siz slayderin özünü işə sala bilməzsiniz, ancaq işıq qutusunu ayrıca işə salın.

14. Şəffaf – Uyğunlaşan banner rotatoru/slayderi

Əksər jQuery sürgülərinin öz dizaynı var. Bunu özünüz üçün fərdiləşdirə bilərsiniz, lakin bəzən sadəcə hər şeyin kaydırıcının içərisində olmasını istəyirsiniz. Translucent-i sizə təqdim edirik.

Slayderdə çoxlu ön ayarlar var. Sadəcə müəyyən parametrləri təyin etməli ola bilərsiniz və bu da budur. İmkanlar:

6 fərqli üslub

4 keçid effekti

2 sürüşdürmə keçidi

Fərdiləşdirilə bilən düymələr və başlıqlar

Digərləri kimi, bu sürüşdürmə toxunuşa həssasdır, cavab verir və malikdir hardware sürətləndirilməsi. Translucent, məzmunun özünü ön plana çıxaran minimal dizaynlı sürüşmədir.

15. FSS – Tam Ekran Sürüşən Vebsayt Plugin

Slaydlardan ibarət tam ekranlı vebsayt yaratmaq istəyirsiniz? Sonra FSS lazımdır.

Əslində, bu JQuery slayderindən istifadə edərək tam ekranlı slayder veb saytı yaratmaq olduqca asandır. İmkanlar:

AJAX dəstəyi

Sürüşdürmə çubuğu

Dərin əlaqə texnologiyası dəstəyi

2 fərqli keçid effekti

Klaviatura dəstəyinə və 11 səhifəlik bələdçiyə də diqqət yetirməyə dəyər. Bununla belə, əsl təəssürat FSS-nin çəkisidir, cəmi 5Kb.

16. Zozo Accordion – Adaptiv toxunma ekranı slayderi

Stylingə diqqət yetirən və yaxşı iş görən jQuery slayderinin başqa bir nümunəsi. Zozo Accordion üslubu dəyişmək qabiliyyətinə malik yaxşı akkordeon sürüşdürənləri axtaranlar üçün mütləq olmalıdır.

Bu CSS3 animasiya gözəlliyi də kifayət qədər geniş xüsusiyyətlərə malikdir:

Üfüqi və şaquli akkordeon

Semantik HTML5 və SEO optimallaşdırılması

Toxunma, klaviatura və WAI-ARIA dəstəyi

10-dan çox dəri və 6 tərtibat

Və daha çox

Zozo Accordion pulsuz dəstəyə və daimi yeniləmələrə, həmçinin jQuery akkordeonunda istədiyiniz bütün funksiyalara malikdir.

17. jQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin kaydırıcıdan daha çox sadə animasiyaya bənzəyir. Slaydları bir-bir göstərmək əvəzinə, bu nümunə növbəti slaydlara keçməzdən əvvəl ərazidə boş yer qalmayana qədər ekranı slaydlarla bir addımda doldurur.

CSS3 animasiyası Animate.css altında işləyir, yüngüldür, bir neçə təbəqədən ibarətdir və mobil cihazlara uyğundur. Çoxsaylı xüsusiyyətlər:

Bir sürüklə və burax naviqasiya seçimi də var. jQuery Responsive OneByOne Slider Plugin Twitter Bootstrap Carousel ilə təchiz edilmişdir.

18. Accordionza - jQuery plaqini

Bundan asan jQuery slayderi yoxdur. İşləmək üçün yalnız 3Kb sürgü yükləməlisiniz ki, bu da Accordionza-nı ən yüngül akkordeon slayderinə çevirir.

Üç üslub variantını bəyənmirsinizsə, HTML və CSS-i özünüz düzəldə bilərsiniz. İmkanlar:

Klaviatura naviqasiyası

Effektləri və düymələri fərdiləşdirmək asandır

Proqressiv təkmilləşdirmə texnikası - JavaScript olmadan işləyir

Unutmayın ki, Accordionza qarışıq məzmunun bir çox variantını göstərə bilər və onu son dərəcə çevik edir.

19. mightySlider – Cavab verən çoxməqsədli slayder

MightySlider həqiqətən güclü sürgüdür. O, yalnız sadə şəkil slayderi kimi deyil, həm də menyu elementinin naviqasiyası ilə tam ekranlı bir istiqamətli sürüşdürmə vasitəsi kimi istifadə edilə bilər. Onun köməyi ilə siz gözəl bir səhifəlik veb sayt yarada bilərsiniz.

Başlıq altında bir çox variant tapa bilərsiniz:

Klaviatura, siçan və toxunma dəstəyi

Avadanlıq sürətləndirilməsi ilə CSS3 keçidləri

Etibarlı işarələmə və SEO optimallaşdırmasını təmizləyin

Limitsiz sayda slaydlar, başlıqlar üçün təbəqələr və onlar üçün effektlər

API çox güclü və inkişaf etdirici dostudur, bu da açılır müxtəlif yollarla onun istifadəsi. MightySlider təmiz və yaxşı şərh edilmiş koda malik əla, mütərəqqi jQuery slayderidir.

20. Parallax Slider - Responsive jQuery plagini

Parallax Slider jQuery Responsive OneByOne Slider Plugin kimi işləyir və hər bir təbəqəni bir slaydda ayrıca canlandırmağa imkan verir. Paralaks animasiyası əlavə edərək bütün slaydları və ya hətta yalnız birini canlandıra bilərsiniz.

4 sürgü daxildir müxtəlif növlər, hamısı paralaks effekti ilə. Digər jQuery sürgüləri kimi, o da var:

Tamamilə özelleştirilebilir

Toxunma dəstəyi

Tam cavab verən, limitsiz təbəqələr

Avtomatik oynatma, dövrələmə, hündürlük və enin tənzimlənməsi və taymer

Animasiyalı təbəqələr təkcə mətn və ya şəkillərdən ibarət deyil. Siz həmçinin YouTube, Vimeo və HTML5 videoları əlavə edə bilərsiniz. Parallax Slider, bütün cihazlarda dəstəklənən Flash effektlərini Flashın özündən daha yaxşı simulyasiya edə biləcəyinizin başqa bir yaxşı nümunəsidir.

Nəticə

jQuery slayderlərinin sadəcə olaraq bir şəkli digəri ilə əvəz edən bir şeydən böyük yaradıcı alətlər dəstinə çevrildiyini görmək maraqlıdır. İndi 3D, paralaks sürgüləri, tam səhifə sürgüləri, adaptiv sürgülər və həm stolüstü kompüterlərdə, həm də smartfonlarda baxıla bilənlər var.

Sürgülərdən heç birini bəyənmədinizsə bu siyahı, siz həmişə Envato-da jQuery Code Tutorial-ı götürə və tamamilə yeni və unikal bir şey inkişaf etdirə bilərsiniz.

Və ya Envato Market-də digər sürgülərə baxın - seçmək üçün çox şey var. Sevimli jQuery slayderiniz hansıdır və niyə?

Uyğunlaşan və ya istəsəniz, cavab verən veb-dizayn indi başqa bir dizayn tendensiyası deyil, o, artıq veb-saytların inkişafı üçün müəyyən standartdır, vebsaytların çox yönlülüyünü və müxtəlif istifadəçi cihazlarının ekranlarında harmonik vizual qavrayışı təmin edir. Bu yaxınlarda, cavab verən bir şablon hazırlayarkən, ümumi dizayn tərzini pozmadan müəyyən sürgüləri və şəkil qalereyalarını inteqrasiya etməkdə müxtəlif çətinliklərlə üzləşməli oldum. İndi hər şey daha sadədir, İnternetdə çoxlu sayda hazır həllər var və xüsusilə sevindirici odur ki, onların əksəriyyəti sərbəst mövcuddur, açıqdır. mənbə kodu.

Təklif olunan alətlərin müxtəlifliyinə görə, mən bu yaxınlarda ortaya çıxan və heç bir məhdudiyyət olmadan paylanan, cavab verən jQuery şəkil sürgülərinin ən diqqətəlayiq inkişaflarının qısa icmalını tərtib etdim, yəni. tamamilə pulsuz.

WOW Slayder

Əla vizual effektlər dəsti (fırlanma, sürüşmə, bulanıqlıq, spirallər, jalüzlər və s...) və çoxlu hazır şablonlara malik olan cavab verən jQuery şəkil slayderi. WOW Slider-in daxili səhifə daxiletmə sehrbazı ilə siz asanlıqla və çətinlik çəkmədən dəqiqələr ərzində heyrətamiz slayd şouları yarada bilərsiniz. Tərtibatçının veb saytında rus dilində plaqinin qurulması və istifadəsi üçün bütün lazımi sənədlər, həmçinin plaqinin necə işlədiyinə dair əla canlı nümunələr var. Yükləmək üçün ayrıca Wordpress plagini və Joomla üçün modul da mövcuddur. Əminəm ki, çoxları bu gözəl kaydırıcıyı, həm yeni başlayanlar, həm də təcrübəli veb ustaları bəyənəcəklər.

HiSlider

HiSlider - HTML5, Jquery slayder və şəkil qalereyası, populyar sistemləri - WordPress, Joomla, Drupal ilə işləyən saytlarda şəxsi istifadə üçün tamamilə pulsuz plagin. Bu sadə, lakin kifayət qədər funksional alətin köməyi ilə siz asanlıqla gözəl və canlı slayd şouları, möhtəşəm təqdimatlar və vebsaytlarınızın səhifələrində yeni mesajların elanları yarada bilərsiniz. Slayder üçün bir neçə hazır şablon və dərilər, heyrətamiz məzmun keçidi (dəyişdirmə) effektləri, müxtəlif multimedia məzmunlarının çıxışı: YouTube və Vimeo-dan videolar, çevik istifadəçi parametrləri və s...

Nivo Slider

Nivo Slider yaxşı köhnədir, hər kəsə yaxşı məlumdur, ən gözəl və istifadəsi asan şəkil sürgülərindən biridir. JQuery Nivo Slider plaginini yükləmək və istifadə etmək pulsuzdur və MIT lisenziyası ilə lisenziyalaşdırılır. WordPress üçün ayrıca bir plagin də var, lakin təəssüf ki, artıq ödənişlidir və bir lisenziya üçün 29 dollar ödəməli olacaqsınız. WP mövzu faylları ilə bir az sehr etmək və Nivo Slider plagininin pulsuz jQuery versiyasını bloqunuza əlavə etmək daha yaxşıdır, çünki İnternetdə bunu necə etmək barədə çoxlu məlumat var.
Funksionallığa gəldikdə, bununla hər şey yaxşıdır. O, jQuery v1.7+ kitabxanasından, gözəl keçid effektlərindən, sadə və çox çevik parametrlərdən, adaptiv tərtibatdan, təsvirin avtomatik kəsilməsindən və s. istifadə edir.

Slayderin ideyası, sadə animasiya effekti ilə seçilmiş kateqoriyaya klikləməklə bir neçə kiçik obyektin (şəkillərin) dəyişdiyi Apple məhsullarının təqdimat tərzi ilə məşhur olan tərtibatçılardan ilhamlanıb. Codrops sizin ixtiyarınızda bu kaydırıcıyı necə yaratmaq barədə ətraflı təlimatı, Html işarələməsinin tam tərtibatını, CSS qaydaları toplusunu və icra edilə bilən jQuery plaginini, həmçinin kaydırıcıdan istifadənin gözəl canlı nümunəsini təqdim edir.

Slit Slayder

JQuery və CSS3 istifadə edərək tam ekran şəkil slayderi + plaqinin veb səhifələrə inteqrasiyası üzrə ətraflı təlimat. İdeya, növbəti və ya əvvəlki məzmuna keçərkən açıq cari slaydı xüsusi məzmunla dilimləməkdir. JQuery istifadə edərək və CSS Animasiyalar slaydlar arasında unikal keçidlər yarada bilərsiniz. Cavab verən sürüşdürmə düzümü onun ekranlar arasında eyni dərəcədə yaxşı görünməsini təmin edir müxtəlif növlər istifadəçi cihazları.

Elastik Məzmun Kaydırıcısı

Yerləşdiyi ana konteynerin ölçüsündən asılı olaraq eni və hündürlüyü avtomatik tənzimləyən məzmun sürüşdürmə cihazı. Tətbiq etmək olduqca sadədir və parametrlərdə çevikdir, kaydırıcı JQuery-də işləyir, ekranın ölçüsünü aşağıya doğru dəyişdirdiyiniz zaman naviqasiya nişanlar şəklində göstərilir. Çox ətraflı sənədlər (yaratma təlimatı) və canlı istifadə nümunələri.

3D Stack Slayder

3D müstəvisindən keçidlərlə şəkilləri nümayiş etdirən sürüşdürmənin eksperimental versiyası. Şəkillər iki üfüqi yığına bölünür, naviqasiya oxlarından istifadə edərək hər bir sonrakı təsviri baxış vəziyyətinə dəyişdirir. Ümumiyyətlə, xüsusi bir şey yoxdur, ancaq ideyanın özü və icra texnikası olduqca maraqlıdır.

Çox sadə, 100% cavab verən və tam ekranlı jQuery şəkil slayderi. Slayderin işi jQuery sehri ilə birlikdə CSS keçidlərinə (keçid xüsusiyyəti) əsaslanır. Maksimum genişlik dəyəri standart olaraq 100% olaraq təyin edilmişdir, buna görə də şəkillərin ölçüsü ekran ölçüsündə dəyişikliklərdən asılı olaraq dəyişəcəkdir. Dizaynda xüsusi animasiya effektləri və ya fırıldaqlar yoxdur, hər şey sadədir və problemsiz işləmək üçün nəzərdə tutulmuşdur.

Minimal slaydlar

Ad özü üçün danışır, bu, bəlkə də rast gəldiyim ən yüngül və minimalistik jQuery şəkil sürgülərindən biridir (1kb plagin). ResponsiveSlides.js konteyner daxilindəki elementlərdən istifadə edərək slayd şousu yaradan kiçik jQuery plaginidir. IE-nin bütün versiyaları daxil olmaqla, geniş çeşidli brauzerlərlə işləyir - IE6 və daha yüksək versiyalardan irəliləyişdə məşhur əyləc. İş etibarlılıq üçün javascript ilə birlikdə CSS3 keçidlərindən istifadə edir. Sıralanmamış siyahıdan istifadə edərək sadə tərtibat, keçidlərin və vaxt intervallarının fərdiləşdirilməsi, avtomatik və əl ilə nəzarət slaydların dəyişdirilməsi, eyni zamanda bir neçə slayd şousuna dəstək. Budur, belə bir oynaq "körpə".

Kamera

Kamera veb-sayt səhifələrində slayd şoularının təşkili üçün pulsuz JQuery plaginidir, bir çox keçid effektləri olan yüngül sürüşdürmə cihazı, 100% cavab verən tərtibat və çox sadə parametrlər. İstənilən istifadəçi cihazlarının (PC monitorları, planşetlər, smartfonlar və s.) ekranlarına mükəmməl uyğun gəlir mobil telefonlar). Daxil edilmiş videonu nümayiş etdirmək imkanı. Düymələrdən və şəkil kiçik blokundan istifadə edərək avtomatik slaydın dəyişdirilməsi və əl ilə idarə edilməsi. Kompakt dizaynda demək olar ki, tam şəkillər qalereyası.

bxSlider jQuery

jQuery-də başqa kifayət qədər sadə cavab verən kaydırıcı. Slaydlarınıza istənilən məzmun, video, şəkillər, mətn və digər elementlər yerləşdirə bilərsiniz. Sensor ekranlar üçün genişləndirilmiş dəstək. CSS keçid animasiyalarından istifadə. Çox sayda müxtəlif slayd şouları və kompakt şəkil qalereyaları. Avtomatik və əl ilə idarəetmə. Düymələrdən istifadə edərək və miniatürləri seçməklə slaydları dəyişin. Kiçik mənbə fayl ölçüsü, konfiqurasiya etmək və həyata keçirmək çox asandır.

FlexSlider 2

FlexSlider 2 Yenilənmiş versiya təkmilləşdirilmiş cavab sürəti, skriptin minimuma endirilməsi və yenidən axın/yenidən çəkilmənin minimuma endirilməsi ilə eyni adlı sürüşdürmə. Plugin əsas kaydırıcıyı, miniatürlərlə slayd nəzarətini, daxili sol-sağ oxları və düymələr şəklində alt naviqasiya çubuğunu ehtiva edir. Videonu slaydlarda göstərmək imkanı (vimeo), çevik parametrlər (keçidlər, dizayn, vaxt intervalı), tam adaptiv tərtibat.

Qalereya

Yüksək keyfiyyətli şəkil qalereyaları və sürgülər yaratmaq üçün tanınmış və kifayət qədər populyar cavab verən jQuery plagini. Slayder interfeysi idarəetmə paneli sayəsində vizual olaraq tanış video pleyerə bənzəyir; plaqinə bir neçə fərqli dizayn mövzusu daxildir. Populyar xidmətlərdən daxil edilmiş video və şəkillərə dəstək: Flickr, Vimeo, YouTube və s. Quraşdırma və istifadə haqqında ətraflı sənədlər.

Blueberry

Xüsusilə həssas veb dizaynı üçün yazılmış sadə, pulsuz JQuery şəkil slayderi. Blueberry eksperimental açıq mənbəli jQuery plaginidir. Minimalist dizayn, heç bir effekt yoxdur, yalnız müəyyən müddətdən sonra bir-birini əvəz edən rəvan açılan şəkillər. Hər şey çox sadədir, quraşdırın, qoşulun və gedin...

jQuery popeye 2.1

Lightbox elementləri ilə çox yığcam jQuery şəkil slayderi. təşəkkürlər çevik ölçülər, çox asanlıqla istənilən konteynerə, miniatürlər şəklində tək bir girişə quraşdırılır, siçan kursorunu üzərinə gətirdiyiniz zaman və ya üzərinə kliklədiyiniz zaman böyüdülmüş şəkil və idarəetmə elementləri olan layt qutusu işə salınır. Məhsulları və ya xəbər elanlarını təqdim etmək üçün yan panellərdə belə bir sürüşmə yerləşdirmək rahatdır. Böyük miqdarda məlumatı olan saytlar üçün əla həlldir.

Ardıcıllıq

Qabaqcıl CSS3 keçidləri ilə pulsuz cavab verən kaydırıcı. Minimalist üslub, 3 dizayn mövzusu, Hər bir çərçivə üfüqi şəkildə sürüşür, mərkəzdə görünür, şəkil sola, imza sağa gedir, miniatürlər sağ alt küncdə təkrarlanır. Hər çərçivədə baxılacaq məhsul görünüşlərinin səhifələnməsi. Nəzarətlərə geri və irəli düymələr də daxildir. Bütün müasir brauzerlər tərəfindən dəstəklənir.

Sürüşdürün

Həm funksionallıq, həm də parametrlər baxımından çox sadə bir şəkil kaydırıcısı, parametrlər arasında slaydların dəyişdirilməsi sürətində dəyişiklik, əl rejiminin aktivləşdirilməsi (idarəetmə düymələri aktivləşdirilir), davamlı slayd şousu var. Bu kaydırıcının mövcud olmaq hüququ var və o, məni yalnız mövcud olduğu üçün cəlb etdi, bu inkişafda xüsusilə maraqlı bir şey tapmadım, bəlkə də onu yaxşı axtarmadım)))

Cavab verən Şəkil Slayderi

Vladimir Kudinov, yoldaşlar, belə gözəl, adaptiv şəkil sürüşdürmə. Möhkəm, yaxşı dizayn edilmiş alət, aydın nümunələr və ətraflı təlimatlar yaradılması, quraşdırılması və istifadəsi üzrə. Adaptiv dizayn, gözəl düymələr və yaşıl oxlar, hər şey olduqca gözəl və sakitdir, təzyiq olmadan.

FractionSlider

Şəkillər və mətn slaydları üçün paralaks effektli pulsuz JQuery kaydırıcı plagini. Slayd animasiyaları hər bir vaxt və animasiya parametrində tam nəzarəti olan çoxsaylı ekran dəyərlərinə malikdir. Slaydda bir neçə elementi eyni anda canlandırmaq imkanı. Siz müxtəlif animasiya üsullarını, slaydların solmasını və ya müəyyən istiqamətdən keçidləri təyin edə bilərsiniz. Şəklin üzərinə gətirdiyiniz zaman açılan naviqasiya oxlarından istifadə edərək avtomatik ekran və əl ilə idarəetmə. 10 növ slayd animasiya effektləri və daha çox...

Baxış olduqca geniş oldu, lakin buna görə kifayət qədər məlumatlandırıcı deyil böyük miqdar sözügedən məhsullar. Bütün təfərrüatlar və ətraflı təsvirlər funksionallıq bu və ya digər plagin haqqında birbaşa tərtibatçıların səhifələrində tapa bilərsiniz. Mən yalnız ümid edə bilərəm ki, kiminsə vebsaytlarının səhifələrində rəngli şəkil sürgüləri yaratmaq üçün çox lazımlı aləti tapmağı asanlaşdırmışam.

Rusdilli şablonlarla işləməyin gözəl olacağını heç düşünmüsünüzmü? Sadəcə bir dəqiqə bu barədə düşünün. İngilis dilli şablonlarla işləmək üçün vaxt itirməyin. Sizi məmnun etməyə tələsirik ki, indi onu TemplateMonster bazarında tapa bilərsiniz. Onların hər biri üçün mətn əl ilə yazılmışdır. Və əlbəttə ki, bütün hazır həllərin istifadəsi inanılmaz dərəcədə asandır.

Hörmətlə, Andrey

İrəli və geri düymələri əlavə etməliyik.

Bunu etmək üçün əvvəllər yazılmış kodu əlavə etməlisiniz.

Yeni slayder üçün HTML kodu

Bütün kaydırıcının quruluşu eyni qalacaq. İşarələmə düymələri kimi xidmət edəcək iki konteyner əlavə olunacaq.

>

Siz də bəyənə bilərsiniz