jQuery önizləməsi ilə sadə kaydırıcı. Sadə jQuery slayderinin hazırlanması UnoSlider - Cavab verən toxunma ekranı slayderi

Adaptiv və ya istəsəniz, cavab verən veb-dizayn indi başqa bir dizayn tendensiyası deyil, o, artıq veb-saytların çox yönlülüyünü, müxtəlif istifadəçi cihazlarının ekranlarında ahəngdar vizual qavrayışı təmin edən bir növ vebsayt inkişaf standartıdır. Bu yaxınlarda, adaptiv ş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, şəbəkədə çoxlu sayda hazır həllər var və xüsusilə sevindirici odur ki, onların əksəriyyəti pulsuz giriş, açıq mənbə.

Təklif olunan alətlərin müxtəlifliyinə görə, mən ən son 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ı tərtib etdim, yəni. tamamilə pulsuz.

WOW Slayder

Böyük vizual effektlər dəsti (fırlanmalar, sürüşmələr, bulanıqlıqlar, spirallər, pərdələr və s.) hazır şablonlar. WOW Slider-in daxili səhifə yerləşdirmə ustası ilə siz asanlıqla bir neçə dəqiqə ərzində heyrətamiz slayd şoular yarada bilərsiniz. Tərtibatçının saytında rus dilində plaqinin qurulması və istifadəsi üçün bütün lazımi sənədlər, plaqinin əla canlı nümunələri var. Ayrıca yükləmək üçün də mövcuddur Wordpress plagin və Joomla üçün modul. Əminəm ki, bir çox insanlar həm yeni başlayanlar, həm də qabaqcıl veb ustaları üçün bu gözəl kaydırıcıyı 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 saytlarınızın səhifələrində heyrətamiz və canlı slayd şouları, möhtəşəm təqdimatlar və 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əzmununun çıxışı: YouTube və Vimeo-dan videolar, çevik istifadəçi parametrləri və s...

Nivo Slider

Nivo Slider - yaxşı köhnə, mövzuda hər kəsə yaxşı məlumdur, ən gözəl və istifadəsi asan şəkil slayderlərindən biridir. jQuery Nivo Slider plaginini MIT lisenziyası altında yükləmək və istifadə etmək pulsuzdur. WordPress üçün ayrıca bir plagin də var, lakin təəssüf ki, artıq ödənilib və bunun üçün 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 şəbəkədə bunun necə ediləcəyi barədə kifayət qədər məlumat var.
Funksionallığa gəlincə, bununla hər şey qaydasındadı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.

Kaydırıcının ideyası, sadə animasiya effekti ilə seçilmiş kateqoriyaya klikləməklə bir neçə kiçik elementin (şəkillərin) dəyişdirildiyi Apple məhsullarının bütün təqdimat tərzinə yaxşı məlum olan tərtibatçılardan ilhamlandı. Codrops sizin ixtiyarınıza bu slayderin yaradılması ilə bağlı ətraflı təlimatı, Html işarələməsinin tam tərtibatını, bir dəst təqdim edir. css qaydaları və icra edilə bilən jQuery plagini, həmçinin kaydırıcıdan istifadənin gözəl canlı nümunəsi.

Slider Slayder

jQuery və CSS3-də 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 cari slaydı xüsusi məzmunla dilimləməkdir. jQuery və CSS animasiyaları ilə siz 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ı. İcra baxımından olduqca sadə və parametrlərdə çevik, JQuery tərəfindən dəstəklənən, altındakı naviqasiya ilə, ekran ölçüsü aşağıya doğru dəyişdirildikdə, naviqasiya nişanlar şəklində göstərilir. Çox ətraflı sənədlər (yaradılış təlimatı) və canlı istifadə nümunələri.

3D Stack Slayder

3D müstəvisindən keçidləri olan şəkilləri göstərən kaydırıcının eksperimental versiyası. Şəkillər iki üfüqi yığına bölünür, naviqasiya oxlarının köməyi ilə hər bir sonrakı təsvirin dəyişdirilməsi və baxış vəziyyətinə keçidi həyata keçirilir. Ü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 ekran jQuery şəkil slayderi. Slayderin işi jQuery magic ilə birlikdə CSS keçidlərinə (keçid xüsusiyyəti) əsaslanır. Maksimum eni defolt olaraq 100%-ə təyin olunub, buna görə də ekran ölçüsü dəyişdikcə şəkillərin ölçüsü dəyişəcək. Dizaynda xüsusi animasiya effektləri və fırıldaqlar yoxdur, hər şey sadədir və hamar işləmə üçün itilənmişdir.

Minimal slaydlar

Adı hər şeyi deyir, yəqin ki, rast gəldiyim ən yüngül və minimalist jQuery şəkil sürgülərindən biridir (1kb plagin). ResponsiveSlides.js- Konteynerin içindəki elementlərdən istifadə edərək slayd şousu yaradan kiçik jQuery plagini. IE6 və yuxarıdan başlayaraq məşhur tərəqqi əyləci olan IE-nin bütün versiyaları da daxil olmaqla geniş çeşidli brauzerlərlə işləyir. İş etibarlılıq üçün javascript ilə birlikdə CSS3 keçidlərindən istifadə edir. Sıralanmamış siyahıdan istifadə edərək sadə işarələmə, keçidlərin və vaxt intervallarının qurulması, slaydların dəyişdirilməsinə avtomatik və əl ilə nəzarət, eyni zamanda birdən çox slayd şousuna dəstək. Budur, belə çılğın "körpə".

kamera

kamera- pulsuz jQuery vebsayt səhifələrində slayd şoularının təşkili üçün plagin, bir çox keçid effektləri, 100% cavab verən tərtibat və çox sadə parametrlərə malik yüngül sürüşmə. İstənilən istifadəçi cihazlarının (PC monitorları, planşetlər, smartfonlar və Mobil telefonlar). Quraşdırılmış videonun nümayişi imkanı. Düymələr və şəkil kiçik bloku vasitəsilə 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

Başqa bir olduqca sadə. adaptiv sürüşmə jQuery-də. Slaydlarda istənilən məzmun, videolar, şəkillər, mətn və digər elementlər ola bilər. Genişləndirilmiş Dəstək toxunma ekranları. CSS animasiya keçidlərindən istifadə. Slayd şou təqdimatının və yığcam şəkil qalereyalarının çoxlu sayda müxtəlif varyasyonları. 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ü, qurmaq və həyata keçirmək çox asandır.

Flex Slider 2

FlexSlider 2 - Təkmilləşdirilmiş cavab reaksiyası, skriptin kiçildilməsi və təkrar axını/yenidən çəkilməni minimuma endirən eyniadlı slayderin yenilənmiş versiyası. Pluginə əsas sürüşdürmə çubuğu, miniatürlərlə slayd idarəetmə nəzarəti, daxili sol-sağ oxlar və düyməyə bənzər alt naviqasiya çubuğu daxildir. 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, plagin bir neçə fərqli mövzunu ehtiva edir. Populyar xidmətlərdən daxil edilmiş video və şəkillərə dəstək: Flickr, Vimeo, YouTube və başqaları. Quraşdırma və istifadə haqqında ətraflı sənədlər.

Qaragilə

Xüsusilə həssas veb dizaynı üçün yazılmış sadə, pulsuz jQuery şəkil slayderi. Blueberry eksperimentaldır jQuery plagini ohm açıq mənbə. 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. Ç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. Çevik ölçüsü sayəsində hər hansı bir konteynerə sığdırmaq çox asandır, miniatürlər şəklində bir yazıda, onların üzərinə gətirdiyiniz zaman və ya üzərinə kliklədiyiniz zaman daha böyük təsvirə və idarəetmələrə malik 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 mövzu, Hər bir çərçivə üfüqi istiqamətdə sürüşür, mərkəzdə görünür, şəkil sola, başlıq sağa gedir, miniatürlər sağ alt küncdə təkrarlanır. Hər çərçivədə baxmaq üçün 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. Hər kəsin dəstəyi müasir brauzerlər.

Sürüşdürün

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

Cavab verən Şəkil Slayderi

Vladimir Kudinov yoldaşlarından belə gözəl, uyğunlaşan bir şəkil kaydırıcısı. Möhkəm, yaxşı dizayn edilmiş alət, illüstrativ nümunələr və ətraflı təlimatlar yaratmaq, quraşdırmaq və istifadə etmək. Cavab verən dizayn, şirin yaşıl düymələr və 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 slider plagini. Slayd animasiyalar hər bir vaxt və animasiya parametrlərinə tam nəzarəti olan çoxsaylı şou dəyərlərinə malikdir. Slaydda bir neçə elementi eyni anda canlandırmaq imkanı. Siz müxtəlif animasiya üsulları, solğun slaydlar və ya müəyyən istiqamətdən keçidlər təyin edə bilərsiniz. Şəklin üzərində hərəkət edərkən açılan naviqasiya oxlarından istifadə edərək avtomatik ekran və əl ilə idarəetmə. 10 növ slayd şousu animasiya effektləri və daha çox...

Baxış olduqca geniş oldu, lakin nəzərdən keçirilən çox sayda məhsula görə kifayət qədər məlumatlı deyil. Müəyyən bir plaginin funksionallığının bütün təfərrüatlarını və ətraflı təsvirlərini birbaşa tərtibatçıların səhifələrində tapa bilərsiniz. Mən yalnız ümid edə bilərəm ki, bu, kiminsə saytlarının səhifələrində rəngli şəkil sürgüləri yaratmaq üçün ən uyğun aləti tapmağı asanlaşdırdı.

Ruslaşdırılmış şablonlarla işləməyin gözəl olacağını heç düşünmüsünüzmü? Sadəcə bir dəqiqə düşün. İngilis dilli şablonlarla işləmək üçün vaxt itirməyin. İndi tapa biləcəyiniz faktla sizi sevindirməyə tələsirik. 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.

Bütün hörmətlə, Endryu

1. Əla jQuery slayd şousu

jQuery texnologiyasından istifadə edərək əla möhtəşəm slayd şousu.

2. jQuery plaqini "Scale Carousel"

jQuery istifadə edərək böyüdülə bilən slayd şousu. Siz özünüzə ən uyğun olan slayd şousunun ölçülərini təyin edə bilərsiniz.

3. jQuery plaqini "slideJS"

Mətn təsviri ilə şəkil slayderi.

4. Plugin "JSliderNews"

5. CSS3 jQuery Slider

Naviqasiya oxlarının üzərinə gətirdiyiniz zaman növbəti slaydın dairəvi eskizi görünür.

6. Pretty jQuery “Təqdimat Cycle” Slayderi

Şəkil yükləmə göstəricisi olan jQuery slayderi. Avtomatik slayd dəyişikliyi təmin edilir.

7. jQuery Parallax Slider Plugin

3D fon effekti olan slayder. Bu kaydırıcının əsas məqamı, hər biri fərqli sürətlə sürüşən bir neçə təbəqədən ibarət olan fonun hərəkətidir. Nəticə həcmli təsirin təqlididir. Çox gözəl görünür, özünüz görə bilərsiniz. Effekt brauzerlərdə daha rəvan göstərilir, məsələn: Opera, Google Chrome.IE.

8. Təzə, yüngül jQuery slayderi "bxSlider 3.0"

"Nümunələr" bölməsindəki demo səhifəsində siz hamısına keçid tapa bilərsiniz mümkün variantlar bu plaqindən istifadə etməklə.

9. jQuery Image Slider Plugin "slideJS"

Qəşəng jQuery kaydırıcısı, şübhəsiz ki, layihənizi bəzəyəcək.

10. jQuery slayd şousu plagini "Asan Slaydlar" v1.1

Asan jQuery istifadə edərək slayd şousu plagini.

11. Plugin "jQuery Slides"

Müxtəlif dizaynlarda yüngül jQuery plagini. Avtomatik slayd dəyişikliyi təmin edilir.

12. Avtomatik slayd keçidi ilə jQuery CSS qalereyası

Ziyarətçi müəyyən vaxt ərzində irəli və ya geri oxlara basmazsa, qalereya avtomatik olaraq sürüşməyə başlayacaq.

13. jQuery Nivo Slider

Etibarlı kodu olan çox peşəkar keyfiyyətli yüngül plagin. Çox müxtəlif slayd keçid effektləri var.

14. jQuery Mobile Slider

Təzə slayder. Müxtəlif şəkil keçid effektləri ilə jQuery kaydırıcısı.

15. jQuery Slider² Plugin

Avtomatik sürüşmə dəyişdirmə ilə yüngül sürüşdürmə.

16. Təzə javascript slayderi

Avtomatik şəkil dəyişdirmə ilə sürüşdürmə.

Slaydın avtomatik dəyişdirilməsi ilə slayd şousunun tətbiqi üçün plagin. Şəkil miniatürlərindən istifadə edərək ekrana nəzarət etmək mümkündür.

NivoSlider plaginindən istifadə edərək jQuery CSS şəkil slayderi.

19. jQuery "jShowOff" Slayderi

Məzmun fırlanma plagini. Üç istifadə halı: naviqasiya yoxdur (slayd-şou formatında avtomatik dəyişiklik ilə), düymə naviqasiyası, təsvirin miniatür naviqasiyası.

20. Shutter Effect Portfolio Plugin

Fotoqraf portfelinin dizaynı üçün təzə jQuery plaqini. Qalereya şəkillərin dəyişdirilməsinin maraqlı effektinə malikdir. Fotoşəkillər bir-birinin ardınca linza bağlamasının işinə bənzər effekt verir.

21. Yüngül javascript CSS slayderi "TinySlider 2"

ilə şəkil slayderinin həyata keçirilməsi javascript istifadə edərək və CSS.

22. Möhtəşəm sürüşdürmə "Tinycircleslider"

Qəşəng dəyirmi sürüşdürmə. Şəkillər arasında keçid dairənin ətrafında qırmızı dairə şəklində sürüşdürmə sürükləməklə həyata keçirilir. Dizaynınızda yuvarlaq elementlərdən istifadə etsəniz, saytınıza mükəmməl uyğunlaşacaq.

23. jQuery şəkil slayderi

Yüngül Slayd dəsti. Sürgü müxtəlif versiyalarda təqdim olunur: şaquli və üfüqi. Həmçinin həyata keçirilir müxtəlif növlərşəkillər arasında naviqasiya: "İrəli" və "Geri" düymələrindən istifadə edərək, siçan çarxından istifadə edərək, siçan ilə slaydın üzərinə klikləyin.

24. Slayder dəsti Miniatür Qalereyası

Slider Kit Qalereyası. Miniatürlər həm şaquli, həm də üfüqi olaraq sürüşdürülür. Şəkillər arasında keçid aşağıdakılardan istifadə etməklə həyata keçirilir: siçan təkəri, siçan ilə klik və ya miniatür üzərində sürüşdürün.

25. jQuery Slider Kit məzmun slayderi

jQuery şaquli və üfüqi məzmun kaydırıcısı.

26. jQuery Slider Kit Slideshow

Slaydın avtomatik dəyişdirilməsi ilə slayd şousu.

27. Yüngül peşəkar javascript CSS3 slayderi

Səliqəli jQuery və CSS3 slayderi 2011-ci ildə yaradılmışdır.

jQuery miniatür slayd şousu.

29. Sadə jQuery slayd şousu

Naviqasiya düymələri ilə slayd şousu.

30. Möhtəşəm jQuery Skitter Slayd Şousu

Gözəl slayd şouları yaratmaq üçün jQuery "Skitter" plagini. Plugin şəkilləri dəyişdirərkən 22 (!) növ müxtəlif animasiya effektlərini dəstəkləyir. O, iki slayd naviqasiyası variantı ilə işləyə bilər: slayd nömrələrindən istifadə və kiçik şəkillərdən istifadə. Çox yüksək keyfiyyətli tapıntı olan demoya baxdığınızdan əmin olun. İstifadə olunan texnologiyalar: CSS, HTML, jQuery, PHP.

31. Yöndəmsiz slayd şousu

Funksional slayd şousu. Slaydlar ola bilər: sadə şəkillər, başlıqları olan şəkillər, alət göstərişləri olan şəkillər, video kliplər. Naviqasiya etmək üçün klaviaturanızdakı oxlardan, slayd nömrəsi keçidlərindən və sağ/sol düymələrindən istifadə edə bilərsiniz. Slayd şou bir neçə versiyada hazırlanır: kiçik şəkillərlə və onlarsız. Bütün variantları nəzərdən keçirmək üçün demo səhifəsinin yuxarısında yerləşən Demo #1 - Demo #6 bağlantılarını izləyin.

Bir pərəstişkarı xatırladan şəkil slayderinin çox orijinal dizaynı. Animasiyalı slayd keçidi. Şəkillər arasında naviqasiya oxlardan istifadə etməklə həyata keçirilir. Üst tərəfdə yerləşən Oynat/Pause düyməsini istifadə edərək yandırıb-söndürə bilən avtomatik dəyişiklik də var.

Animasiyalı jQuery slayderi. Brauzer pəncərəsinin ölçüsü dəyişdirildikdə fon şəkilləri avtomatik olaraq ölçülür. Hər bir şəkil üçün təsviri olan bir blok açılır.

34. jQuery və CSS3-də "Flux Slider" slayderi

Yeni jQuery slayderi. Slaydları dəyişdirərkən bir neçə gözəl animasiya effektləri.

35. jQuery plaqini "jSwitch"

Animasiyalı jQuery qalereyası.

Avtomatik slayd dəyişikliyi ilə asan jQuery slayd şousu.

37. "SlideDeck 1.2.2" plaqinin yeni versiyası

Professional məzmun kaydırıcısı. Slaydın avtomatik dəyişdirilməsi, eləcə də slaydlar arasında hərəkət etmək üçün siçan təkərindən istifadə variantları var.

38. jQuery Sudo Slider

Yüngül jQuery şəkil slayderi. Çox sayda həyata keçirmə variantları var: şəkillərin üfüqi və şaquli dəyişdirilməsi, slayd nömrəsinə keçidlərlə və onsuz, təsvir başlıqları ilə və olmadan, müxtəlif şəkil dəyişdirmə effektləri. Avtomatik slayd dəyişdirmə xüsusiyyəti var. Bütün tətbiq nümunələrinə keçidləri demo səhifəsində tapa bilərsiniz.

39. jQuery CSS3 Slayd şousu

Miniatürlərlə slayd şousu avtomatik slayd keçid rejimini dəstəkləyir.

40. jQuery Flux Slider

Çoxlu şəkil dəyişdirən effektləri olan slayder.

41. Sadə jQuery slayderi

Qəşəng jQuery şəkil slayderi.

Müəllifdən: Veb səhifələrinin sürüşmədən görünən hissəsinin iddia edilən "ölümü" ilə bağlı şayiələrə baxmayaraq, yaxşı bir sürüşmə ehtiyacı heç bir yerdə yoxa çıxmadı. Bir saniyə üçün dürüst olaq - sürgülər əyləncəlidir. Bundan əlavə, hərəkət edən məzmundan fərqli olaraq başqa heç nə istifadəçidə “vay” effektinə səbəb olmur. Bütün sürgülər bir-birini əvəz edən bir neçə slayddan ibarətdir və sürüşdürmə kodunun mümkün qədər yüngül olması son dərəcə vacibdir. Burada jQuery lazımlı gəlir.

Envato Market-dən 20 jQuery slayderinə nəzər salın və siz sadəcə bir kaydırıcı blokundan daha çox olan sürgülərin olduğunu görəcəksiniz.

1. RoyalSlider - jQuery ilə Sensorlu Şəkil Qalereyası

İndi toxunma ekranına 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: uyğunlaşma və sensor ekranlarla işləmək. Yaxşı seçimdir, çü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 fərdiləşdirmə qabiliyyəti

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 söndürməyə və bununla da çəki azaltmağa imkan verən "modul skript arxitekturası" dır. RoyalSlider, jQuery toxunma ekranı şəkil qalereyası, hər hansı bir tərtibatçının alət dəsti üçün zəruri olan möhkəm JavaScript slayderidir.

2. Slider Revolution Responsive jQuery Plugin

Sürgü ilə "inqilabi" bir şey etmək 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 sürgüləri arasında bu misal bütün mümkün tələblərinizə cavab verir.

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

Paralaks effekti və xüsusi animasiya

Limitsiz təbəqələr və keçidləri olan slaydlar

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

və daha çox

Şəkil, daxili 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 Responsive jQuery slider plagini

"LayerSlider Responsive jQuery Slider Plugin" başlığı bu kaydırıcıyı həqiqətən düzgün hesab etmir.
200+ 2D və 3D slayd keçidləri 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əzmun əlavə edilə bilər, hətta HTML5 rezident multimedia məzmunu da. LayerSlider sürgüləri canlandırır və həm də çox gözəldir.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow əsas funksionallıqdan heç birini qurban verməyən olduqca sadə bir sürüşmədir.

İmkanlar:

alət ipuçları, mətn əlavələri və s.

Preview 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 var əsas imkanlar amma bunu unutma.

5. All In One Slider - Responsive jQuery Slider Plugin

İ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ə banneri

Pleylist banneri

Məzmun Slayderi

Karusel

Bütün sürgü növləri jQuery sürgülərinin tələb etdiyi 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 - Cavab verən toxunma ekranı slayderi

Slayderiniz cavab vermirsə və toxunma ekranlarını dəstəkləmirsə, onda siz səhv sürüşdürmüsünüz. UnoSlider düzgündür.

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

Mövzuya dəstək

12 əvvəlcədən hazırlanmış 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 qabiliyyəti 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 - müxtəlif ekran ölçüləri üçün jQuery toxunma ekranı slayderini sınayın...

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ərlə diqqəti cəlb edir. Bununla belə, bu, 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, siz slayderin tam cavabdeh olduğunu və toxunmanı dəstəklədiyini təxmin edə bilərsiniz. Digər xüsusiyyətlər:

SEO optimallaşdırılması

Ağıllı avtomatik oynatma

CSS3 hardware sürətləndirilmiş keçidlər

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

TouchCarousel, unikal fiziki sürüşmə qabiliyyətinə görə, mobil cihazlarda tamamilə yeni bir təcrübə səviyyəsidir.

9. Advanced Slider - jQuery XML Slider

jQuery slayderləri yalnız veb saytlardan daha çox üçün istifadə edilə bilər. 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ə yerli 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 Advanced Slider - jQuery XML Slider API-dir ki, bu da kaydırıcıyı veb tətbiqiniz üçün mükəmməl 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 demoya baxmaq istəyinizə səbəb olacaq jQuery sürgülərindən biri. Siz sadəcə olaraq bu "kiçiltmə 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, idarəçilik hissi və təsvirə real toxunuş əlavə edir. Slayder xüsusiyyətləri:

CSS3 qat keçidləri

Qatlar üçün animasiya sonu seçimi

Sabit Genişlik, Tam Ekran və Tam Genişlik Seçimləri

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

Əksər slayderlər mümkün qədər çox effekt toplamağa çalışır və jQuery Slider Böyütmə/Kiçikləşdirmə Effekti Tam Cavab 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 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-yə malikdir.

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

Öz əlinizlə veb saytlar yaratmaq üçün bu gün hansı texnologiyalara və biliklərə ehtiyac var? İntensiv öyrənin!

Şəkillər, HTML işarələmələri, YouTube və Vimeo videoları ilə siz həmçinin:

SEO optimallaşdırılması

9 karusel üslubu

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

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

jQuery Carousel Evolution bir çox istifadəsi olan sadə karuseldir.

12 Seksual Slayder

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

İlk baxışdan, sürgü çox təsir edici deyil, lakin yaxşı konfiqurasiya olunarsa, dizaynınıza mükəmməl uyğunlaşacaqdır. İmkanlar:

Slaydları avtomatik oynatın

Şəkil başlıqları

Davamlı slayd oxutma

6 keçid effekti

Sexy Slider tam gücünü açmağınızı və potensialını üzə çıxarmağınızı gözləyir.

13. Lightbox ilə jQuery Image & Content Scroller

Bütün bu mobil uyğun dizaynlar və sensor ekran dəstəyi ilə, unutmayan jQuery slayderini görmək çox xoşdur stolüstü kompüterlər.

jQuery Image & Content Scroller w/ Lightbox digər şeylər arasında klaviatura daxiletməsini və siçan çarxını 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. İsteğe bağlı olaraq, jQuery Image & Content Scroller w/ Lightbox-da siz slayderin özünü işə sala bilməzsiniz, lakin işıq qutusunu ayrıca işə salın.

14. Translucent - Responsive Banner Rotator / Slider

Əksər jQuery sürgülərinin öz dizaynı var. Onu ö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. Diqqətiniz Translucent ilə təmsil olunur.

Slayderdə çoxlu ön ayarlar var. Sadəcə soruşmaq lazım ola bilər müəyyən parametrlər və hamısı. İmkanlar:

6 müxtəlif üslublar

4 keçid effekti

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

Fərdiləşdirilə bilən düymələr və etiketlər

Digərləri kimi, bu slayder də toxunma ilə işləyir, cavab verir və hardware sürətləndirir. Translucent, məzmunun özünü ön plana çıxaran minimal dizaynlı bir sürüşmədir.

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

Slaydlarla tam ekranlı sayt yaratmaq istəyirsiniz? Sonra FSS lazımdır.

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

AJAX dəstəyi

Sürüşdürmə zolağı

Dərin əlaqə texnologiyasına dəstək

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 - Cavab verən toxunma ekranı slayderi

İşi yaxşı yerinə yetirən üsluba yönəlmiş jQuery slayderinin başqa bir nümunəsi. Zozo Accordion üslubları dəyişdirmək qabiliyyətinə malik yaxşı akkordeon sürgüsünü axtaran hər kəs üçün zəruridir.

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 üçün dəstək

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

Və daha çox

Zozo Accordion pulsuz dəstək və daimi yeniləmələr, həmçinin jQuery akkordeonunda görmək istədiyiniz bütün funksiyalar.

17.jQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin daha çox oxşardır sadə animasiya, kaydırıcıda deyil. Eyni zamanda bir slaydı göstərmək əvəzinə, bu nümunə növbəti slaydı keçməzdən əvvəl ərazidə boş yer qalmayana qədər ekranı tədricən slaydlarla doldurur.

CSS3 animasiyası Animate.css daxilində işləyir, yüngüldür, çox qatlıdır və mobil dostudur. Çoxsaylı xüsusiyyətlər:

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

18. Accordionza - jQuery Plugin

Bundan asan jQuery slayderi yoxdur. İşləmək üçün yalnız 3Kb sürgü tələb olunur və bu, Accordionza-nı ən yüngül akkordeon tipli sürüşdürmə edir.

Üç ü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, bu da 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ə bir şəkil kaydırıcısı kimi deyil, həm də menyu elementinin naviqasiyası ilə tam ekranlı birtərəfli kaydırıcı kimi istifadə edilə bilər. Bununla siz bir səhifədən ibarət əla veb sayt yarada bilərsiniz.

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

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

CSS3 hardware sürətləndirilmiş keçidlər

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

Limitsiz slaydlar, başlıq qatları və 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 Plugin

Parallax Slider jQuery Responsive OneByOne Slider Plugin kimi işləyir və hər bir təbəqəni eyni 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.

Dəst müxtəlif tipli 4 sürgü ilə gəlir, hamısı paralaks effektinə malikdir. Digər jQuery sürgüləri kimi o da var:

Tam özelleştirilebilirlik

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

Animasiya edilmiş təbəqələr sadəcə mətn və ya şəkillər deyil. Siz həmçinin YouTube, Vimeo və HTML5 videoları əlavə edə bilərsiniz. Parallax Slider - başqa biri yaxşı nümunə bütün cihazlarda dəstəklənən Flash-ın özündən daha yaxşı Flash effektlərini necə simulyasiya edə bilərsiniz.

Nəticə

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

Bu siyahıdakı sürgülərdən heç birini bəyənmirsinizsə, siz həmişə Envato-da jQuery Code Tutorial-dan keçə və tamamilə yeni və unikal bir şey hazırlaya bilərsiniz.

Və ya seçmək üçün Envato Marketdəki digər sürgülərə baxın. Sevimli jQuery slayderiniz hansıdır və niyə?

Saytınıza yüksək keyfiyyətli jQuery şəkil slayderini əlavə etmək lazımdırsa, bu məqalədə siz lazımi plaginlərin təsvirini tapa bilərsiniz. jQuery JavaScript ilə işləməyi xeyli asanlaşdırsa da, veb dizayn prosesini sürətləndirmək üçün hələ də plaginlərə ehtiyacımız var.

Biz bu plaginlərdən bəzilərində dəyişiklik edə və saytımızın ehtiyaclarına daha çox uyğun gələn yeni sürgülər yarada bilərik.

Digər sürgülər üçün sadəcə başlıqlar, şəkillər əlavə edin və sürüşdürmə ilə birlikdə gələn slayd keçid effektlərini seçin. Bu plaginlərin hamısı ətraflı sənədlərlə gəlir, ona görə də onlara yeni effektlər və ya funksiyalar əlavə etmək asandır. Əgər təcrübəli jQuery proqramçısısınızsa, hətta hadisəyə əsaslanan tetikleyicileri də dəyişə bilərsiniz.

kimi son tendensiyalar adaptiv dizayn, plagin və ya skript tətbiq etməyinizdən asılı olmayaraq veb layihələri üçün çox vacibdir. Bütün bu elementlər bu plaginlərin hər birini çox çevik edir. 2014-cü ildə çıxan hər şey bu siyahıya daxildir.

jQuery Şəkil Sürgüləri

Jssor Responsive Slider

Bu yaxınlarda bu funksional jQuery slayderi ilə rastlaşdım və onun işi çox yaxşı yerinə yetirdiyini özüm görə bildim. Slayderin açıq mənbə kodu ilə genişləndirilə bilən sonsuz imkanları ehtiva edir:

  • Adaptiv dizayn;
  • 15-dən çox fərdiləşdirmə variantları;
  • 15-dən çox şəkil dəyişdirən effektlər;
  • Şəkil qalereyası, karusellər, tam ekran ölçüsü dəstəyi;
  • Şaquli banner rotatoru, slayd siyahısı;
  • Video dəstəyi.

Demo | Yüklə

PgwSlider - jQuery / Zepto əsaslı cavab verən slayder

Bu plaqinin yeganə məqsədi şəkil slaydlarını göstərməkdir. Bu, çox yığcamdır, çünki jQuery faylları cəmi 2,5 KB-dır, bu da onu yükləməyi həqiqətən sürətli edir:

  • Responsive layout;
  • SEO optimallaşdırılması;
  • Müxtəlif brauzerlər üçün dəstək;
  • Sadə görüntü keçidləri;
  • Arxivin ölçüsü cəmi 2,5 KB-dır.

Demo | Yüklə

jQuery Şaquli Xəbər Kaydırıcısı

Sol tərəfdə nəşrlərin siyahısı və sağda təsvir ekranı olan xəbər resursları üçün nəzərdə tutulmuş çevik və faydalı jQuery slayderi:

  • Adaptiv dizayn;
  • Şaquli sütun keçid xəbərləri;
  • Genişləndirilmiş başlıqlar.

Demo | Yüklə

Wallop Slayderi

Bu slayderdə jQuery yoxdur, lakin mən onu təqdim etmək istərdim, çünki o, çox yığcamdır və səhifənin yüklənmə vaxtını əhəmiyyətli dərəcədə azaltmağa imkan verir. Bəyəndiyiniz təqdirdə mənə bildirin:

  • Responsive layout;
  • Sadə dizayn;
  • Slaydları dəyişdirmək üçün müxtəlif variantlar;
  • Minimum JavaScript kodu;
  • Ölçü cəmi 3Kb-dir.

Demo | Yüklə

Düz stil Polaroid qalereyası

Elastik tərtibatı və gözəl dizaynı ilə stolun üzərinə səpələnmiş sənədlər üslubunda olan qalereya çoxlarınızı maraqlandırmalıdır. Planşetlər və böyük ekranlar üçün daha uyğundur:

  • Cavab verən kaydırıcı;
  • Düz dizayn;
  • Slaydın təsadüfi dəyişdirilməsi;
  • Mənbə koduna tam giriş.

Demo | Yüklə

A-Slayd

Demo | Yüklə

HiSlider - HTML5, jQuery və WordPress şəkil slayderi

HiSlider yeni pulsuz jQuery slider plaginini təqdim etdi və onun köməyi ilə fantastik keçidlərlə müxtəlif şəkil qalereyaları yarada bilərsiniz:

  • Cavab verən kaydırıcı;
  • Proqramlaşdırma biliyi tələb olunmur;
  • Bir neçə heyrətamiz şablon və dəri;
  • Gözəl keçid effektləri;
  • Müxtəlif platformalar üçün dəstək;
  • WordPress, Joomla, Drupal ilə uyğundur;
  • Müxtəlif növ məzmunu göstərmək imkanı: şəkillər, youtube videosu və Vimeo videosu;
  • Çevik qəbulu;
  • Faydalı əlavə funksiyalar;
  • Göstərilən məzmunun limitsiz miqdarı.

Demo | Yüklə

vay slayder

WOW Slider cavab verən jQuery kaydırıcısı heyrətamiz vizual effektləri olan şəkillər ( domino, fırlatmaq, bulanıqlaşdırmaq, çevirmək və flaş etmək, uçmaq, pərdələr) və peşəkar şablonlar.

WOW Slider, kodu anlamaq və şəkilləri redaktə etmədən saniyələr ərzində fantastik sürgülər yaratmağa imkan verən quraşdırma sehrbazı ilə gəlir. Joomla və WordPress üçün plaqinin versiyaları da yükləmək üçün mövcuddur:

  • Tam cavabdehlik;
  • Bütün brauzerlər və bütün növ cihazlar üçün dəstək;
  • Toxunma cihazları üçün dəstək;
  • WordPress-də asan quraşdırma;
  • Fərdiləşdirmədə çeviklik;
  • SEO optimallaşdırılmışdır.

Demo | Yüklə

Nivo Slider - pulsuz jQuery plagini

Nivo Slider bütün dünyada ən gözəl və istifadəsi asan şəkil slayderi kimi tanınır. Nivo Slider plagini pulsuzdur və MIT lisenziyası altında buraxılır:

  • jQuery 1.7 və yuxarı tələb edir;
  • Gözəl keçid effektləri;
  • Sadə və quraşdırmaq üçün çevik;
  • Kompakt və uyğunlaşma;
  • Açıq mənbə;
  • Güclü və sadə;
  • Bir neçə fərqli şablon;
  • Şəkillərin avtomatik kəsilməsi.

Demo | Yüklə

Texniki sənədləri olan sadə jQuery slayderi

İdeya müxtəlif animasiya effektləri ilə bir neçə kiçik elementin uça bildiyi Apple-ın sürgülərindən ilhamlanıb. Tərtibatçılar, minimum tələbləri nəzərə alaraq, "uçan" elementlərin müxtəlif kateqoriyaları təmsil etdiyi onlayn mağazanın sadə dizaynını yaratmaq üçün bu konsepsiyanı həyata keçirməyə çalışdılar:

  • Responsive layout;
  • Minimalist dizayn;
  • Müxtəlif buraxılış və slayd keçid effektləri.

Demo | Yüklə

Tam ölçülü jQuery şəkil slayderi

Səhifənin eninin 100% -ni tutan və mobil cihazların ekran ölçülərinə uyğunlaşan çox sadə kaydırıcı. O, CSS keçidləri ilə işləyir və şəkillər lövbərlərlə "yığınlaşır". Şəkilə keçid etmək istəmirsinizsə, lövbər dəyişdirilə və ya çıxarıla bilər.

Quraşdırıldıqda, sürüşdürmə ekran eninin 100%-nə qədər genişlənir. Həmçinin o, avtomatik olaraq slayd şəkillərinin ölçüsünü azalda bilər:

  • Cavab verən jQuery slayderi
  • tam ölçü;
  • Minimalist dizayn.

Demo | Yüklə

Elastik Məzmun Slider + müavinət

Elastik Məzmun Slayderi əsas elementin ölçülərinə əsasən eni və hündürlüyü avtomatik olaraq tənzimləyir. Bu sadə jQuery slayderidir. O, yuxarıdakı sürüşmə sahəsindən və aşağıda naviqasiya nişanı çubuğundan ibarətdir. Slayder onun enini və hündürlüyünü ana konteynerinin ölçüsünə uyğun olaraq tənzimləyir.

Diaqonal olaraq kiçik ekranlarda baxdıqda, naviqasiya nişanları kiçik nişanlara çevrilir:

  • Adaptiv dizayn;
  • Siçan ilə sürüşdürmə.

Demo | Yüklə

Pulsuz 3D Stack Slider

3D-də şəkillər arasında sürüşdürən eksperimental sürüşdürmə. İki yığın kağız yığınlarına bənzəyir, onlardan sürüşmə zamanı kaydırıcının mərkəzində şəkillər göstərilir:

  • Adaptiv dizayn;
  • Flip - keçid;
  • 3D effektləri.

Demo | Yüklə

Tam ekran Slit Slider jQuery və CSS3 + manual əsasında

Təlimatda siz bükülmə ilə kaydırıcıyı necə yaratmağı öyrənəcəksiniz: ideya cari slaydı növbəti və ya əvvəlki şəkli açdığınız zaman olduğu kimi “kəsmək” və göstərməkdir. jQuery və CSS animasiyasından istifadə edərək unikal keçid effektləri yarada bilərik:

  • Adaptiv dizayn;
  • Ayrılmış keçid;
  • Tam ekran slayderi.

Demo | Yüklə

Unislider - çox kiçik jQuery slayderi

Lazımsız zənglər və fitlər və işarələmə yoxdur, ölçüsü 3KB-dən azdır. Slaydlarınız üçün istənilən HTML kodundan istifadə edin, onu CSS ilə genişləndirin. Unslider ilə əlaqəli hər şey GitHub-da yerləşdirilir:

  • Müxtəlif brauzerlər üçün dəstək;
  • Klaviatura dəstəyi;
  • Hündürlüyün tənzimlənməsi;
  • Adaptiv dizayn;
  • Toxunma girişi üçün dəstək.

Demo | Yüklə

Minimal cavab verən slaydlar

Sadə və yığcam plagin ( ölçüsü cəmi 1 Kb) konteyner daxilindəki elementlərdən istifadə edərək cavab verən sürüşmə yaradan. ResponsiveSLides.js IE6 və yuxarıdan olan IE-nin bütün versiyaları daxil olmaqla çoxlu sayda brauzerlə işləyir:

  • Tam cavabdehlik;
  • Ölçü 1 KB;
  • JavaScript vasitəsilə işə salına bilən CSS3 keçidləri;
  • Markerli siyahıdan istifadə edərək sadə işarələmə;
  • Keçid effektlərini və bir slaydın baxılma müddətini fərdiləşdirmək imkanı;
  • Çoxlu slayd şouları yaratmaq qabiliyyətini dəstəkləyir;
  • Avtomatik və əl ilə sürüşdürmə.

Demo | Yüklə

Kamera - pulsuz jQuery slayderi

Kamera bir çox keçid effektləri, adaptiv tərtibatı olan bir plagindir. Quraşdırmaq asandır, mobil cihazlar tərəfindən dəstəklənir:

  • Tam cavab verən dizayn;
  • imzalar;
  • Video əlavə etmək imkanı;
  • 33 müxtəlif rəngli nişanlar.

Demo | Yüklə

SlidesJS, Cavab verən jQuery Plugin

SlidesJS toxunma cihazları və CSS3 keçidlərini dəstəkləyən jQuery (1.7.1 və yuxarı) üçün cavab verən plagindir. Bununla sınaqdan keçirin, SlidesJS-i layihənizə necə əlavə edəcəyinizi anlamağa kömək edəcək bir neçə hazır nümunəni sınayın:

  • Adaptiv dizayn;
  • CSS3 keçidləri;
  • Toxunma cihazları üçün dəstək;
  • Quraşdırmaq asandır.

Demo | Yüklə

BX JQuery Slider

Bu pulsuz cavab verən jQuery slayderidir:

  • Tam cavabdehlik - istənilən cihaza uyğunlaşır;
  • Üfüqi, şaquli sürüşmə dəyişikliyi;
  • Slaydlarda şəkillər, videolar və ya HTML məzmunu ola bilər;
  • Toxunma cihazları üçün genişləndirilmiş dəstək;
  • Slayd animasiyası üçün CSS keçidlərindən istifadə ( hardware sürətləndirilməsi);
  • Geri çağırış API-ləri və tam ictimai üsullar
  • Kiçik fayl ölçüsü;
  • Tətbiq etmək asandır.

Demo | Yüklə

Flex Slider 2

Ən yaxşı cavab verən slayder. Yeni versiya işin sürətini, yığcamlığını artırmaq məqsədi ilə yekunlaşdırıldı.

Demo | Yüklə

Galleria - Cavab verən JavaScript Foto Qalereyası

Galleria yüksək keyfiyyətli şəkil qalereyaları yaratmaq üçün milyonlarla veb sayt tərəfindən istifadə olunur. Onun işi haqqında müsbət rəylərin sayı sadəcə olaraq artır:

  • Tamamilə pulsuz;
  • Tam ekran görüntü rejimi;
  • 100% uyğunlaşma;
  • Proqramlaşdırma təcrübəsi tələb olunmur;
  • iPhone, iPad və digər toxunma cihazları üçün dəstək;
  • Flickr, Vimeo, YouTube və daha çox;
  • Bir neçə mövzu.

Demo | Yüklə

Blueberry - Sadə Responsive jQuery Image Slider

Mən sizə cavab verən veb dizayn üçün xüsusi olaraq yazılmış jQuery şəkil slayderini təqdim edirəm. Blueberry, cavab verən şablonlarla işləmək üçün xüsusi olaraq yazılmış eksperimental açıq mənbəli şəkil sürüşdürmə plaginidir.

Hal-hazırda, bir karusel slayderi sadəcə bir iş saytında, portfel veb saytında və ya hər hansı digər resursda olması lazım olan bir funksionallıqdır. Tam ekran şəkil sürgüləri ilə yanaşı, üfüqi karusel sürgüləri istənilən veb dizayna yaxşı uyğun gəlir.

Bəzən kaydırıcının sayt səhifəsinin üçdə birini tutması lazımdır. Burada karusel slayderi keçid effektləri və cavab verən layoutlarla istifadə olunur. E-ticarət saytları bir neçə fotoşəkili ayrı-ayrı yazılarda və ya səhifələrdə nümayiş etdirmək üçün karusel kaydırıcısından istifadə edir. Slayder kodu ehtiyaclarınıza uyğun olaraq istifadə etmək və dəyişdirmək üçün pulsuzdur.

HTML5 və CSS3 ilə birlikdə jQuery istifadə edərək, unikal effektlərlə səhifələrinizi daha maraqlı edə və ziyarətçilərin diqqətini saytın müəyyən sahəsinə çəkə bilərsiniz.

Slick - müasir karusel kaydırıcı plagini

Slick pulsuz jQuery plaginidir, onun tərtibatçıları onların həllinin bütün sürüşmə ehtiyaclarınızı ödəyəcəyini iddia edirlər. Cavab verən sürüşdürmə - karusel mobil qurğular üçün "kafel" rejimində, masaüstü versiya üçün isə "drag and drop" rejimində işləyə bilər.

"Solğun" keçid effektini ehtiva edir, maraqlı fürsət"mərkəzdə rejim", avtomatik sürüşmə ilə şəkillərin tənbəl yüklənməsi. Yenilənmiş funksionallığa slaydlar və slayd filtri əlavə etmək daxildir. Plugini tələblərinizə uyğun tənzimləmək üçün hər şey.

Demo rejimi | Yüklə

Owl Carousel 2.0 - toxunma cihazları üçün jQuery plagini

Bu plagin həm yeni başlayanlar, həm də təcrübəli tərtibatçılar üçün uyğun olan çoxlu xüsusiyyətlərə malikdir. Bu, karusel sürgüsünün yenilənmiş versiyasıdır. Onun sələfi də eyni adda idi.

Slayderdə ümumi funksionallığı yaxşılaşdırmaq üçün bəzi daxili plaginlər var. Animasiya, video oynatma, sürüşdürmə avtomatik oynatma, tənbəl yükləmə, avtomatik hündürlük tənzimlənməsi Owl Carousel 2.0-ın əsas xüsusiyyətləridir.

Mobil cihazlarda plaqinin daha rahat istifadəsi üçün sürüklə və burax dəstəyi daxil edilmişdir.
Plugin hətta mobil cihazların kiçik ekranlarında böyük şəkilləri göstərmək üçün mükəmməldir.

Nümunələr | Yüklə

jQuery Silver Track Plugin

Kifayət qədər kiçik, lakin zəngin bir jQuery plagini, kiçik bir nüvəyə sahib olan və çoxlu sayt resurslarını istehlak etməyən bir karusel kaydırıcısını səhifəyə yerləşdirməyə imkan verir. Plugin animasiya ilə şaquli və üfüqi kaydırıcıları göstərmək və qalereyadan şəkillər dəstlərini yaratmaq üçün istifadə edilə bilər.

Nümunələr | Yüklə

AnoSlide - Ultra yığcam cavab verən jQuery slayderi

Ultra yığcam jQuery slayderi adi sürgüdən daha çox funksionallığa malik karuseldir. O daxildir önizləmə başlıqlara əsaslanan karusel və slayderdə çoxlu şəkilləri göstərən tək şəkil.

Nümunələr | Yüklə

Owl Carousel - jquery slider - karusel

Bayquş karuseli toxunma ekranları və dəstəyi olan bir sürüşdürmədir sürükləmə texnologiyası və drop , asanlıqla HTML koduna daxil edilir. Plugin, xüsusi hazırlanmış işarələmə olmadan gözəl karusellər yaratmağa imkan verən ən yaxşı sürgülərdən biridir.

Nümunələr | Yüklə

3D qalereya - karusel

CSS üslublarına və bəzi Javascript kodlarına əsaslanan 3D keçidlərdən istifadə edir.

Nümunələr | Yüklə

TweenMax.js və jQuery istifadə edərək 3D karusel

Möhtəşəm 3D karusel. Deyəsən, bu hələ beta versiyasıdır, çünki indi onunla bağlı bir neçə problem tapdım. Öz sürgülərinizi sınamaq və yaratmaqla maraqlanırsınızsa, bu karusel çox kömək edəcəkdir.

Nümunələr | Yüklə

Bootstrap istifadə edərək karusel

Yeni veb saytınız üçün tam uyğun açılış texnologiyasından istifadə edən cavab verən karusel kaydırıcısı.

Nümunələr | Yüklə

Bootstrap əsaslı kaydırıcı - Moving Box karuseli

Portfel və biznes saytlarında ən çox axtarılan. Bənzər bir sürüşmə növü - karusel tez-tez istənilən növ saytlarda tapılır.

Nümunələr | Yüklə

Kiçik Circleslider

Bu kiçik ölçülü slayder istənilən ekran qətnaməsi olan cihazlarda işləməyə hazırdır. Sürgü həm dairəvi, həm də karusel rejimində işləyə bilər. Kiçik dairə bu tip digər sürgülərə alternativ olaraq təqdim olunur. Quraşdırılmış dəstəyə malikdir əməliyyat sistemləri IOS və Android.

Dairəvi rejimdə kaydırıcı olduqca maraqlı görünür. Sürüklə və buraxma metodu və avtomatik sürüşdürmə sistemi üçün dəstək yaxşı həyata keçirilir.

Nümunələr | Yüklə

Düyməcik məzmunu slayderi

Güclü, adaptiv, karusel tipli sürüşmə müasir sayt üçün mükəmməldir. İstənilən cihazda düzgün işləyir. Üfüqi və şaquli rejimləri var. Onun ölçüsü cəmi 1 KB-a endirilib. Ultra kompakt plug-in əla hamar keçidlərə malikdir.

Nümunələr | Yüklə

vay slayder karusel

Veb saytınız üçün orijinal slayder yaratmağınıza kömək edə biləcək 50-dən çox effekt ehtiva edir.

Nümunələr | Yüklə

Cavab verən jQuery məzmun kaydırıcısı bxSlider

Slayderin necə uyğunlaşdığını görmək üçün brauzer pəncərəsinin ölçüsünü dəyişdirin. Bxslider 50-dən çox fərdiləşdirmə variantları ilə gəlir və müxtəlif keçid effektləri ilə xüsusiyyətlərini nümayiş etdirir.

Nümunələr | Yüklə

jCarousel

jCarousel şəkil görünüşlərinizi təşkil etməyə kömək edəcək jQuery plaginidir. Siz misalda göstərilən çərçivədən asanlıqla fərdi şəkil karuselləri yarada biləcəksiniz. Slayder cavab verir və mobil platformalar üçün optimallaşdırılıb.

Nümunələr | Yüklə

ScrollBox - jQuery Plugin

Scrollbox kaydırıcıyı - karusel və ya mətn axını xətti yaratmaq üçün kompakt plagindir. Əsas xüsusiyyətlər arasında siçan üzərinə hərəkət edərkən fasilə ilə şaquli və üfüqi sürüşmə effekti daxildir.

Nümunələr | Yüklə

dbpasCarousel

Sadə bir karusel kaydırıcısı. Sürətli bir plaginə ehtiyacınız varsa, bu 100% uyğundur. Slayderin işləməsi üçün lazım olan yalnız əsas xüsusiyyətlərlə gəlir.

Nümunələr | Yüklə

Flexisel: Cavab verən JQuery Carousel Slider Plugin

Flexisel yaradıcıları köhnə məktəb jCarousel plaginindən ilham alaraq onun bir nüsxəsini hazırlayıb. düzgün iş mobil və planşet cihazlarda sürüşdürmə.

Mobil cihazlarda işləyərkən Flexisel-in cavab verən tərtibatı brauzer pəncərəsinin ölçüsü yönümlü tərtibatından fərqlənir. Flexisel həm aşağı, həm də yüksək təsvir ölçüsündə ekranlarda işləmək üçün mükəmməl uyğunlaşdırılmışdır.

Nümunələr | Yüklə

Elastislide - Cavab verən Karusel Kaydırıcısı

Elastislide cihazın ekran ölçüsünə mükəmməl uyğunlaşır. Müəyyən bir qətnamədə nümayiş etdirmək üçün minimum şəkillər sayını təyin edə bilərsiniz. Şaquli sürüşdürmə effekti ilə birlikdə sabit sarğıdan istifadə edərək şəkil qalereyaları ilə karusel sürüşdürmə çubuğu kimi yaxşı işləyir.

Nümunə | Yüklə

Flex Slider 2

Woothemes-dən pulsuz proqram slayderi. Haqlı olaraq ən yaxşı cavab verən sürgülərdən biri hesab olunur. Plugin bir neçə şablondan ibarətdir və həm təcrübəsiz istifadəçilər, həm də mütəxəssislər üçün faydalı olacaq.

Nümunə | Yüklə

Möhtəşəm Karusel

Amazing Carousel cavab verən jQuery şəkil slayderidir. WordPress, Drupal və Joomla kimi bir çox məzmun idarəetmə sistemlərini dəstəkləyir. O, həmçinin heç bir uyğunluq problemi olmadan Android və IOS və əməliyyat sistemlərinin masaüstü versiyalarını dəstəkləyir. Quraşdırılmış heyrətamiz karusel şablonları kaydırıcıyı şaquli, üfüqi və dairəvi rejimlərdə istifadə etməyə imkan verir.

Nümunələr | Yüklə