Adaptīvo slīdņu izvēle. Interesants slīdnis jQuery jQuery spraudnī “Mēroga karuselis”

1. Lieliska jQuery slaidrāde

Liela, iespaidīga slaidrāde, izmantojot jQuery tehnoloģijas.

2. jQuery spraudnis “Mēroga karuselis”

Mērogojama slaidrāde, izmantojot jQuery. Varat iestatīt sev piemērotākos slaidrādes izmērus.

3. jQuery spraudnis “slideJS”

Attēla slīdnis ar teksta aprakstu.

4. Spraudnis “JSliderNews”

5. CSS3 jQuery slīdnis

Novietojot kursoru virs navigācijas bultiņām, tiek parādīts nākamā slaida apļveida sīktēls.

6. Jauks jQuery “Prezentācijas cikla” slīdnis

jQuery slīdnis ar attēla ielādes indikatoru. Tiek nodrošināta automātiska slaidu maiņa.

7. jQuery spraudnis “Parallax Slider”

Slīdnis ar tilpuma fona efektu. Šī slīdņa galvenā iezīme ir fona kustība, kas sastāv no vairākiem slāņiem, no kuriem katrs ritinās ar atšķirīgu ātrumu. Rezultāts ir tilpuma efekta imitācija. Izskatās ļoti skaisti, par to var pārliecināties paši. Efekts tiek parādīts vienmērīgāk pārlūkprogrammās, piemēram, Opera, Google Chrome, IE.

8. Svaigs, viegls jQuery slīdnis “bxSlider 3.0”

Demonstrācijas lapas sadaļā “piemēri” varat atrast saites uz visiem iespējamie varianti izmantojot šo spraudni.

9. jQuery attēla slīdnis, spraudnis “slideJS”.

Stilīgs jQuery slīdnis noteikti var izrotāt jūsu projektu.

10. jQuery slaidrādes spraudnis “Easy Slides” v1.1

Viegli lietojams jQuery spraudnis slaidrādes izveidei.

11. jQuery Slidy spraudnis

Viegli jQuery spraudnis dažādos dizainos. Tiek nodrošināta automātiska slaidu maiņa.

12. jQuery CSS galerija ar automātisku slaidu maiņu

Ja apmeklētājs noteiktā laikā nenoklikšķina uz bultiņām “Uz priekšu” vai “Atpakaļ”, galerija sāks ritināt automātiski.

13. jQuery slīdnis “Nivo Slider”

Ļoti profesionāls, augstas kvalitātes, viegls spraudnis ar derīgu kodu. Ir pieejami daudzi dažādi slaidu pārejas efekti.

14. jQuery slīdnis “MobilySlider”

Svaigs slīdnis. jQuery slīdnis ar dažādiem attēlu maiņas efektiem.

15. jQuery spraudnis “Slider²”

Viegls slīdnis ar automātisku slīdņu mainītāju.

16. Svaigs javascript slīdnis

Slīdnis ar automātisku attēla maiņu.

Spraudnis slaidrādes ieviešanai ar automātisku slaidu maiņu. Displeju var vadīt, izmantojot attēlu sīktēlus.

jQuery CSS attēla slīdni, izmantojot NivoSlider spraudni.

19. jQuery slīdnis “jShowOff”

Spraudnis satura rotācijai. Trīs lietošanas iespējas: bez navigācijas (ar automātisku maiņu slaidrādes formātā), ar navigāciju pogu veidā, ar navigāciju attēlu sīktēlu veidā.

20. Spraudnis “Shutter Effect Portfolio”.

Jauns jQuery spraudnis fotogrāfa portfeļa veidošanai. Galerijai ir interesants attēlu maiņas efekts. Fotogrāfijas seko viena otrai ar efektu, kas līdzīgs objektīva slēdža darbībai.

21. Viegls javascript CSS slīdnis “TinySlider 2”

Attēla slīdņa ieviešana, izmantojot javascript un CSS.

22. Lielisks slīdnis “Tinycircleslider”

Stilīgs apaļš slīdnis. Pāreja starp attēliem tiek veikta, velkot slīdni sarkana apļa veidā ap apkārtmēru. Tas lieliski iederēsies jūsu vietnē, ja savā dizainā izmantosiet apaļus elementus.

23. Attēlu slīdnis ar jQuery

Viegls slīdnis “Slīdņu komplekts”. Slīdnis ir pieejams dažādos dizainos: vertikālā un horizontālā. Tiek īstenoti arī dažādi navigācijas veidi starp attēliem: izmantojot pogas “Uz priekšu” un “Atpakaļ”, izmantojot peles ritenīti, izmantojot peles klikšķi uz slaida.

24. Galerija ar miniatūrām “Slīdņu komplekts”

Galerija "Slīdņu komplekts". Sīktēlu ritināšana tiek veikta gan vertikāli, gan horizontāli. Pāreja starp attēliem tiek veikta, izmantojot: peles ritenīti, peles klikšķi vai virzot kursoru virs sīktēla.

25. jQuery satura slīdnis “Slīdņu komplekts”

Vertikālais un horizontālais satura slīdnis, izmantojot jQuery.

26. jQuery slaidrāde “Slīdņu komplekts”

Slīdrāde ar automātisku slaidu maiņu.

27. Viegls profesionālais javascript CSS3 slīdnis

2011. gadā izveidots glīts jQuery un CSS3 slīdnis.

jQuery slaidrāde ar sīktēliem.

29. Vienkārša jQuery slaidrāde

Slaidrāde ar navigācijas pogām.

30. Lieliska jQuery “Skitter” slaidrāde

jQuery Skitter spraudnis, lai izveidotu satriecošus slaidrādes. Spraudnis atbalsta 22 (!) dažādu animācijas efektu veidus, mainot attēlus. Var strādāt ar divām slaidu navigācijas opcijām: izmantojot slaidu numurus un izmantojot sīktēlus. Noteikti noskatieties demonstrāciju, ļoti augstas kvalitātes atradums. Izmantotās tehnoloģijas: CSS, HTML, jQuery, PHP.

31. Slaidrāde “Neērtā”

Funkcionāla slaidrāde. Slaidi var būt šādi: vienkārši attēli, attēli ar parakstiem, attēli ar rīka padomiem, videoklipi. Lai pārvietotos, varat izmantot bultiņas, slaidu numuru saites un tastatūras kreiso/labo taustiņu. Slaidrādei ir vairākas versijas: ar un bez sīktēliem. Lai skatītu visas opcijas, sekojiet saitēm Demo #1 - Demo #6, kas atrodas demonstrācijas lapas augšpusē.

Ļoti oriģināls attēla slīdņa dizains, kas atgādina ventilatoru. Animēta slaidu pāreja. Navigācija starp attēliem tiek veikta, izmantojot bultiņas. Ir arī automātiska pārslēgšana, ko var ieslēgt un izslēgt, izmantojot pogu Atskaņot/Pauze, kas atrodas augšpusē.

Animēts jQuery slīdnis. Fona attēli automātiski mērogojas, mainot pārlūkprogrammas loga izmērus. Katram attēlam tiek parādīts bloks ar aprakstu.

34. “Flux Slider” slīdnis, izmantojot jQuery un CSS3

Jauns jQuery slīdnis. Vairāki lieliski animēti efekti, mainot slaidus.

35. jQuery spraudnis “jSwitch”

Animēta jQuery galerija.

Viegla jQuery slaidrāde ar automātisku slaidu maiņu.

37. Jaunā spraudņa “SlideDeck 1.2.2” versija

Profesionāls satura slīdnis. Ir iespējas ar automātisku slaidu maiņu, kā arī iespēja izmantot peles ritenīti, lai pārvietotos starp slaidiem.

38. jQuery slīdnis “Sudo Slider”

Viegls attēla slīdnis, izmantojot jQuery. Ir daudz ieviešanas iespēju: attēlu horizontāla un vertikāla maiņa, ar un bez saitēm uz slaida numuru, ar un bez attēlu parakstiem, dažādi attēlu maiņas efekti. Ir funkcija automātiska maiņa slaidi. Saites uz visiem ieviešanas piemēriem var atrast demonstrācijas lapā.

39. jQuery CSS3 slaidrāde

Slīdrāde ar sīktēliem atbalsta automātisku slaidu maiņas režīmu.

40. jQuery slīdnis “Flux Slider”

Slīdnis ar daudziem attēlu maiņas efektiem.

41. Vienkāršs jQuery slīdnis

Stilīgs attēla slīdnis, izmantojot jQuery.

Temdo Slider ir jaudīgs un viegli lietojams rīks skaistu slīdņu izveidei jūsu vietnei. Galvenās slīdņa funkcijas:

• Katram slaidam par fonu varat izvēlēties jebkuru attēlu vai videoklipu.
• Papildu pārklājuma attēls
• Ritināšanas animācija
• Animācija mainot slaidus

Ja nepieciešams izveidot skaistu "klasisko" slīdni (fons, ne vairāk kā divi papildu grafiskie slāņi, virsraksts, apakšvirsraksts, teksts un ne vairāk kā divas pogas katrā slaidā), ieteicams izmantot Temdo Slider, it īpaši, ja nepieciešams pilnekrāna slīdņus un fona video.

Slīdņa izveide

Lai izveidotu jaunu slīdni, WordPress informācijas paneļa kreisajā izvēlnē atlasiet Slīdnis > Pievienojiet jaunu slaidu:

Slaida veids

Slaida pamatiestatījums ir fona veids (attēls vai video). Atkarībā no šī parametra izvēles mainās slaidu iestatījumu saskarne: izvēloties videoklipu, nevis iestatījumu grupu Statisks fons parādās grupa Animēts fons.

Slaida fons

Izvēlieties fona attēlu savam slaidam. Ņemiet vērā, ka fona attēls tiks izstiepts, lai aizpildītu visu ekrāna platumu (saglabājot malu attiecību). Tāpēc ieteicams izmantot attēlus Pilna izšķirtspēja HD (1920 x 1080 pikseļi). Ja vēlaties, lai slīdnis neaizņemtu visu ekrānu augstumā, slīdņa iestatījumos ir jāiestata augstums.

Pārklājuma attēls

Izmantojiet šo opciju, lai pārklātu papildu attēlu ar caurspīdīgu vai daļēji caurspīdīgu fonu virs galvenā fona attēla. Pārklātais attēls tiks replicēts visā slaida virsmā kā tekstūra.

Fona animācija

Iespējojiet šo opciju, ja vēlaties animēt fona attēlu. Kad tas ir iespējots, kļūst pieejami šādi animācijas veidi:

• Palielinājums attiecībā pret centru (noklusējums)
• Palielinājums attiecībā pret augšējo kreiso stūri
• Palielinājums attiecībā pret augšējo labo stūri
• Palielinājums attiecībā pret apakšējo kreiso stūri
• Palielinājums attiecībā pret apakšējo labo stūri

Fona video

Temdo slīdnis atbalsta webm, mp4 un ogg video formātus.

Lai izmantotu videoklipu kā fonu, vispirms tas ir jāaugšupielādē savas vietnes multivides bibliotēkā. Lai to izdarītu, WordPress informācijas paneļa kreisajā panelī atlasiet Multivides faili > Pievienot jaunu. Kad videoklipa lejupielāde ir pabeigta, kopējiet tā URL starpliktuvē un atgriezieties pie slaida rediģēšanas. Ielīmējiet ceļu uz video failu no starpliktuves attiecīgajā slaidu iestatījumu sadaļā. Kad vien iespējams, ieteicams izmantot video visos trīs formātos, lai atbalstītu pēc iespējas vairāk modernu pārlūkprogrammu.

Slaidu īpašības

Šajā sadaļā ir iestatīti slaida pamatparametri:

• Galvenes dizains: varat izvēlēties gaišu dizainu, lai to pievienotu tumšam fonam, vai tumšu dizainu, lai galveni kontrastētu uz gaiša fona.
• Navigācijas krāsa: izvēlieties krāsu kreiso un labo bultiņām un navigācijas punktiem slīdņa apakšā.
• Ritināšana līdz sadaļai: parādiet bultiņu, uz kuras noklikšķinot, lapa tiks ritināta līdz norādītajai vietai. Ievadiet enkura nosaukumu, piemēram, "#contact"
• Nerādīt virsrakstu: iespējojiet šo opciju, ja nevēlaties, lai virsraksts tiktu rādīts šajā slaidā.
• Nerādīt virsraksta ēnu: izslēdziet šī slaida virsraksta ēnu.
• Grafiskā animācija: izvēlieties kādu no diviem animācijas efektiem slaidu grafikai
• Satura animācija: izvēlieties vienu no diviem veidiem, kā animēt nosaukumu, apakšvirsrakstu, tekstu un pogas

Slaida satura stila iestatīšana

Slaida teksta satura stila iestatījumi (nosaukums, apakšvirsraksts un teksts) ir iestatīti attiecīgajās iestatījumu grupās:

• Slaida nosaukums
• Slaida subtitri
• Slaida teksts

Katrā no šīm grupām katram elementam varat iestatīt fontu, krāsu, izmēru un citus stila parametrus.

Grafika un SVG grafika

Šeit jūs varat ielādēt papildu grafisko elementu (), kā arī vektorgrafika SVG formātā. Katram no šiem elementiem varat iestatīt saiti, kas tiks atvērta, noklikšķinot uz elementa.

Pogas uz slaida

Šajā sadaļā varat iestatīt parametrus vienai vai divām pogām:

• Pogas teksts
• Saite
• Kursora animācija
• Ikona

Slaidu animācija ritināšanas laikā

Šajā sadaļā varat ieslēgt un izslēgt animāciju, ritinot visu slaida saturu vai atsevišķi elementi slaids. Ja vēlaties (un varat), varat ražot precīza regulēšana animācijas, izmantojot CSS stilus.

Slaida saglabāšana

Pirms slaida saglabāšanas pievienojiet to vienam vai vairākiem slīdņiem, atzīmējot atbilstošās izvēles rūtiņas sadaļā Slīdņi. Ja jums vēl nav neviena slīdņa, noklikšķiniet uz saites + Pievienojiet jaunu slīdni:

Ja savai vietnei ir jāpievieno augstas kvalitātes jQuery attēla slīdnis, tad šajā rakstā atradīsit nepieciešamo spraudņu aprakstu. Lai gan JQuery ir ievērojami atvieglojis darbu ar JavaScript, mums joprojām ir nepieciešami spraudņi, lai paātrinātu tīmekļa izstrādes procesu.

Mēs varam veikt izmaiņas dažos no šiem spraudņiem un izveidot jaunus slīdņus, kas ir daudz piemērotāki mūsu vietnes mērķiem.

Citiem slīdņiem vienkārši pievienojiet nosaukumus, attēlus un atlasiet slaidu pārejas efektus, kas tiek piegādāti kopā ar slīdni. Visiem šiem spraudņiem ir detalizēta dokumentācija, tāpēc jaunu efektu vai funkciju pievienošana tiem nav grūta. Ja esat pieredzējis JQuery programmētājs, varat pat mainīt uz notikumiem balstītus aktivizētājus.

Jaunākās tendences, piemēram, adaptīvais dizains, ir ļoti svarīgas tīmekļa projektos neatkarīgi no tā, vai ieviešat spraudni vai skriptu. Visi šie elementi padara katru no šiem spraudņiem ļoti elastīgu. Viss, kas iznāca 2014. gadā, ir iekļauts šajā sarakstā.

jQuery attēlu slīdņi

Jssor atsaucīgais slīdnis

Es nesen saskāros ar šo jaudīgo JQuery slīdni un varēju redzēt, ka tas ļoti labi veic savu darbu. Tajā ir neierobežotas iespējas, kuras var paplašināt, izmantojot slīdņa atvērtā pirmkoda kodu:

• Adaptīvs dizains;
• Vairāk nekā 15 pielāgošanas iespējas;
• Vairāk nekā 15 attēlu maiņas efekti;
• Attēlu galerija, karuselis, pilnekrāna izmēra atbalsts;
• Vertikālais banera rotators, slaidu saraksts;
• Video atbalsts.

Demo | Lejupielādēt

PgwSlider — atsaucīgs slīdnis, kura pamatā ir JQuery/Zepto

Vienīgais šī spraudņa uzdevums ir parādīt attēlu slaidus. Tas ir ļoti kompakts, jo JQuery faili ir tikai 2,5 KB lieli, kas ļauj to ļoti ātri ielādēt:

• Adaptīvs izkārtojums;
• SEO optimizācija;
• Atbalsts dažādām pārlūkprogrammām;
• Vienkāršas attēlu pārejas;
• Arhīva izmērs ir tikai 2,5 KB.

Demo | Lejupielādēt

Jquery vertikālo ziņu slīdnis

Elastīgs un noderīgs JQuery slīdnis, kas paredzēts ziņu resursiem ar publikāciju sarakstu kreisajā pusē un attēlu labajā pusē:

• Adaptīvs dizains;
• Vertikālā kolonna ziņu pārslēgšanai;
• Izvērstas galvenes.

Demo | Lejupielādēt

Wallop Slider

Šis slīdnis nesatur jQuery, taču es vēlētos to prezentēt, jo tas ir ļoti kompakts un var ievērojami samazināt lapas ielādes laiku. Paziņojiet man, ja jums tas patīk:

• Adaptīvs izkārtojums;
• Vienkāršs dizains;
• Dažādas slaidu maiņas iespējas;
• minimāls JavaScript kods;
• Izmērs ir tikai 3KB.

Demo | Lejupielādēt

Plakana stila Polaroid galerija

Dokumentu izkaisītai uz rakstāmgalda stila galerijai ar elastīgu izkārtojumu un skaistu dizainu vajadzētu interesēt daudzus no jums. Vairāk piemērots planšetdatoriem un lieliem displejiem:

• Adaptīvs slīdnis;
• Plakans dizains;
• Nejauša slaidu maiņa;
• Pilna piekļuve pirmkodam.

Demo | Lejupielādēt

A-slīdnis

Demo | Lejupielādēt

HiSlider – HTML5, jQuery un WordPress attēlu slīdnis

HiSlider ir ieviesis jaunu bezmaksas jQuery slīdņa spraudni, ar kuru varat izveidot dažādas attēlu galerijas ar fantastiskām pārejām:

• Adaptīvs slīdnis;
• neprasa programmēšanas zināšanas;
• Vairākas pārsteidzošas veidnes un ādas;
• Skaisti pārejas efekti;
• Atbalsts dažādām platformām;
• Savietojams ar WordPress, Joomla, Drupal;
• Spēja parādīt saturu dažādi veidi: attēli, YouTube video un Vimeo video;
• Elastīga iestatīšana;
• Noderīgas papildu funkcijas;
• Neierobežots rādītā satura daudzums.

Demo |Lejupielādēt

Oho, slīdnis

WOW Slider ir atsaucīgs jQuery attēlu slīdnis ar pārsteidzošiem vizuāliem efektiem ( domino, pagriezt, aizmiglot, apgriezt un mirgot, izlidot, žalūzijas) un profesionālas veidnes.

WOW Slider ir aprīkots ar instalēšanas vedni, kas ļauj dažu sekunžu laikā izveidot fantastiskus slīdņus, neizprotot kodu vai rediģējot attēlus. Lejupielādei ir pieejamas arī Joomla un WordPress spraudņa versijas:

• Pilnībā atsaucīgs;
• Atbalsta visas pārlūkprogrammas un visu veidu ierīces;
• Skārienierīču atbalsts;
• Vienkārša instalēšana uz WordPress;
• Elastība konfigurācijā;
• SEO optimizēts.

Demo |Lejupielādēt

Nivo Slider — bezmaksas jQuery spraudnis

Nivo Slider ir pazīstams visā pasaulē kā skaistākais un vienkāršākais attēlu slīdnis. Nivo Slider spraudnis ir bezmaksas un izdots saskaņā ar MIT licenci:

• Nepieciešama JQuery 1.7 un jaunāka versija;
• Skaisti pārejas efekti;
• Vienkārši un elastīgi konfigurējams;
• Kompakts un pielāgojams;
• Atvērts avots;
• Spēcīgs un vienkāršs;
• Vairākas dažādas veidnes;
• Automātiska attēlu apgriešana.

Demo |Lejupielādēt

Vienkāršs jQuery slīdnis ar tehnisko dokumentāciju

Ideju iedvesmojuši Apple slīdņi, kuros vairāki mazi elementi var izlidot ar dažādiem animācijas efektiem. Izstrādātāji mēģināja īstenot šo koncepciju, ņemot vērā minimālās prasības izveidot vienkāršu interneta veikala dizainu, kurā “lidojošie” elementi pārstāv dažādas kategorijas:

• Adaptīvs izkārtojums;
• minimālistisks dizains;
• Dažādi pamešanas un slaidu maiņas efekti.

Demo |Lejupielādēt

Pilna izmēra jQuery attēla slīdnis

Ļoti vienkāršs slīdnis, kas aizņem 100% no lapas platuma un pielāgojas ekrāna izmēriem mobilajām ierīcēm. Tas darbojas ar CSS pārejām, un attēli tiek “sakrauti” kopā ar enkuriem. Enkuru var nomainīt vai noņemt, ja nevēlaties pievienot attēlam saiti.

Kad tas ir instalēts, slīdnis tiek paplašināts līdz 100% no ekrāna platuma. Tas var arī automātiski samazināt slaidu attēlu lielumu:

• Adaptīvs JQuery slīdnis;
• Pilna izmēra;
• Minimālistisks dizains.

Demo |Lejupielādēt

Elastīgais satura slīdnis + apmācība

Elastīgais satura slīdnis automātiski pielāgo platumu un augstumu, pamatojoties uz galvenā elementa izmēriem. Šis ir vienkāršs jQuery slīdnis. Tas sastāv no slaidu apgabala augšpusē un navigācijas cilnes joslas apakšā. Slīdnis pielāgo tā platumu un augstumu atbilstoši vecākkonteinera izmēriem.

Skatoties uz maziem diagonāliem ekrāniem, navigācijas cilnes kļūst par mazām ikonām:

• Adaptīvs dizains;
• Ar peles klikšķi ritiniet.

Demo |Lejupielādēt

Bezmaksas 3D Stack Slider

Eksperimentāls slīdnis, kas ritina attēlus 3D formātā. Abas kaudzes atgādina papīra kaudzes, no kurām ritinot tiek parādīti attēli slīdņa centrā:

• Adaptīvs dizains;
• Flip - pāreja;
• 3D efekti.

Demo |Lejupielādēt

Pilnekrāna spraugas slīdnis, kura pamatā ir JQuery un CSS3+ apmācība

Šī apmācība parādīs, kā izveidot slīdni ar pagriezienu: ideja ir “izgriezt” un parādīt pašreizējo slaidu, atverot nākamo vai iepriekšējo attēlu. Izmantojot JQuery un CSS animāciju, mēs varam izveidot unikālus pārejas efektus:

• Adaptīvs dizains;
• Sadalīta pāreja;
• Pilnekrāna slīdnis.

Demo |Lejupielādēt

Unislider - ļoti mazs jQuery slīdnis

Nav nevajadzīgu zvanu un svilpienu, mazāks par 3 KB. Slaidiem izmantojiet jebkuru HTML kodu, paplašiniet to ar izmantojot CSS. Viss, kas saistīts ar Unslider, tiek mitināts vietnē GitHub:

• Atbalsts dažādām pārlūkprogrammām;
• Tastatūras atbalsts;
• Augstuma regulēšana;
• Adaptīvs dizains;
• Pieskāriena ievades atbalsts.

Demo | Lejupielādēt

Minimāli atsaucīgi slaidi

Vienkāršs un kompakts spraudnis ( izmērs ir tikai 1 KB), kas rada adaptīvais slīdnis izmantojot konteinera iekšpusē esošos elementus. ResponsiveSLides.js darbojas ar plašu pārlūkprogrammu klāstu, tostarp visām IE versijām no IE6 un jaunākām versijām:

• Pilnībā atsaucīgs;
• Izmērs 1 KB;
• CSS3 pārejas ar iespēju palaist caur JavaScript;
• Vienkārša iezīmēšana, izmantojot aizzīmju sarakstus;
• Iespēja pielāgot pārejas efektus un viena slaida skatīšanās ilgumu;
• Atbalsta iespēju izveidot vairākas slaidrādes;
• Automātiska un manuāla ritināšana.

Demo |Lejupielādēt

Kamera — bezmaksas jQuery slīdnis

Kamera ir spraudnis ar daudziem pārejas efektiem un atsaucīgu izkārtojumu. Viegli iestatīt, atbalsta mobilās ierīces:

• Pilnībā atsaucīgs dizains;
• Paraksti;
• Iespēja pievienot video;
• 33 dažādu krāsu ikonas.

Demo |Lejupielādēt

SlidesJS, atsaucīgs jQuery spraudnis

SlidesJS ir adaptīvs spraudnis JQuery (1.7.1 un jaunākām versijām) ar atbalstu skārienierīcēm un CSS3 pārejām. Eksperimentējiet ar to, izmēģiniet dažus gatavus piemērus, kas palīdzēs izdomāt, kā projektam pievienot SlidesJS:

• Adaptīvs dizains;
• CSS3 pārejas;
• Skārienierīču atbalsts;
• Viegli uzstādīt.

Demo | Lejupielādēt

BX Jquery slīdnis

Šis ir bezmaksas atsaucīgs jQuery slīdnis:

• Pilnībā atsaucīgs – pielāgojas jebkurai ierīcei;
• Horizontāla, vertikāla slaida maiņa;
• Slaidos var būt attēli, videoklipi vai HTML saturs;
• Paplašināts atbalsts skārienierīcēm;
• CSS pāreju izmantošana slaidu animācijai ( aparatūras paātrinājums);
• API atzvani un pilnīgi publiskas metodes;
• mazs faila izmērs;
• Viegli īstenojams.

Demo |Lejupielādēt

FlexSlider 2

Labākais atsaucīgais slīdnis. Jauna versija tika pārveidots, lai palielinātu ātrumu un kompaktumu.

Demo | Lejupielādēt

Galleria — uz JavaScript balstīta atsaucīga fotoattēlu galerija

Galleria tiek izmantota miljoniem vietņu, lai izveidotu attēlu galerijas augstas kvalitātes. Pozitīvo atsauksmju skaits par viņas darbu vienkārši ir ārpus saraksta:

• Pilnīgi bezmaksas;
• Pilnekrāna skatīšanās režīms;
• 100% adaptīvs;
• Nav nepieciešama programmēšanas pieredze;
• Atbalsts iPhone, iPad un citām skārienjūtīgajām ierīcēm;
• Flickr, Vimeo, YouTube un citi;
• Vairākas tēmas.

Demo | Lejupielādēt

Blueberry — vienkāršs atsaucīgs jQuery attēlu slīdnis

Es piedāvāju jums jQuery attēla slīdni, kas īpaši izstrādāts adaptīvam tīmekļa dizainam. Blueberry ir eksperimentāls atvērtā pirmkoda attēlu slīdņa spraudnis pirmkods, kas tika rakstīts īpaši darbam ar atsaucīgām veidnēm.

Pastāstiet man, lūdzu, vai ir iespējams izveidot fona attēla slīdni, izmantojot slideno slīdni?
Google nepalīdz (dokumentācijā teikts, ka attēli jāievieto div blokā. Bet kā ar fona attēliem?

@charset utf-8; html,body,div,span,sīklietotne,objekts,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, saīsinājums,akronīms,adrese,liels,citēt,kods,del,dfn, em,fonts,img,ins,kbd,q,s,samp,mazs,trieciens,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li, lauka kopa,forma,iezīme, leģenda,tabula,paraksts,tbody,tfoot,thead,tr,th,td(fons: nav atkārtot ritināšanu 0 0 caurspīdīgs; apmale: 0 nav; fonta lielums: 100%; kontūra: 0 nav; vertikālā līdzināšana: bāzlīnija;mala: 0;polsterējums: 0;)tabula(apmale-sakļauts: sakļauts;atstarpe starp apmalēm: 0;) adrese,raksts,malā,audekls,detaļas,attēlu paraksts,attēls,kājene,galvene,hgrupa, nav, sadaļa, kopsavilkums(displejs: bloks;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box ) a, a:hover, button, button:hover, .anime ( -moz-transition:visi 200ms lineāri; -ms-transition:visi 200ms lineāri; -o-transition:visi 200ms lineāri; -webkit- pāreja: visas 200 ms lineāras; 12vw;

Izmantojot atsevišķi, CSS3 un jQuery nodrošina plašu iespēju klāstu. Bet, ja izmanto kopā... Tad tie var padarīt efektus patiešām iespaidīgus. Dažkārt rodas problēma, kā labāk un radošāk vienuviet sakārtot vairākus attēlus vai fotogrāfijas ar kopīgu tēmu. Kā opciju varat izveidot slīdni (jo īpaši tāpēc, ka to ir ļoti daudz). Bet šajā apmācībā mēs izveidosim interaktīvu 3D galeriju, izmantojot CSS3 un jQuery. Lai to ātri izdomātu un lietotu slīdni savā vietnē, iesaku lejupielādēt demo versiju (tā ir pieejama arī pilnajos ziņās) un vienkārši izdarīt to pēc analoģijas piemērā.

Reālu piemēru var redzēt šeit:

Lejupielādēt

HTML daļa — interesants jQuery slīdnis

Konteiners ar klasi galvenais tiks izmantoti, lai parādītu fons. Un tad blokā ar identifikatoru immersive_slider varat pievienot tik daudz slaidu, cik nepieciešams. Pogas, lai pārvietotos pa slaidiem, var noņemt, ja jums tās nav vajadzīgas:

jQuery daļa

Kā jūs, iespējams, pamanījāt, skatot slīdņa piemēru, ir dažādi . Visi šo pāreju iestatījumi ir norādīti iepriekš minētajā funkcijā. Apskatīsim šos iestatījumus:

• animācija— vērtība, kas nosaka, kā mainīsies slaidi. Pieņem vērtības "fade", "slide" vai "bounce". Un, lai veiktu vertikālas izmaiņas slaidos, jums jāievada “slideUp” vai “bounceUp”.
• slaidu atlasītājs— selektors bloku atlasei ar slaidiem.
• konteiners— šis rekvizīts nosaka galveno konteineru, kura fons mainīsies.
• cssBlurŠī ir izmēģinājuma funkcija. Ja nevēlaties iestatīt aizmiglojumu, neiestatiet šo rekvizītu.
• lappuse— aktivizē navigāciju.
• automātiskā palaišana— automātiska slaidrādes sākšana.