Jquery fona slīdnis. Interesants slīdnis, izmantojot jQuery. Kamera — bezmaksas jQuery slīdnis

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: visi 200 ms lineāri; pāreja: visi 200 ms lineāri; kursors: rādītājs; ) .F_COL_C-START_I-CENTER ( displejs: flex; flex-flow: kolonna nowrap; attaisnot-saturs: flex-start; izlīdzināt vienumus: centrs; ) .F_ROW_C-START_I-CENTER ( displejs: flex; flex-flow: rindu bez iesaiņojuma; attaisnot-saturs: flex-start; līdzināt-vienumus: centrā; ) .F_ROW_C-S-B_I-F-S ( displejs: flex; flex-flow : rinda bez iesaiņojuma; attaisnot-saturs: atstarpe starp; līdzināt vienumus: flex-start; ) .F_ROW_C-START_I-STRETCH ( displejs: flex; flex-flow: rinda bez iesaiņojuma; attaisnot-saturs: flex-sākt; līdzināt vienumus : stiept; ) korpuss ( fona krāsa: #fff; krāsa: #413d4b; fontu saime: "Roboto", sans-serif; fonta izmērs: 0,87 vmax; līnijas augstums: 1,37 vmax; ) .wrap ( platums: 58,75 vw; piemale: 0 automātiski; pozīcija: relatīvā 49, 29, 94, .85)), url(../img/bg_header.jpg); fona atkārtojums: bez atkārtošanas; fona izmērs: vāks; fona pozīcija: centrā; pārplūde: paslēpts; ) #top_header ( displejs: flex; flex-flow: rinda bez iesaiņojuma; pamatojums-saturs: atstarpe starp; līdzinātie vienumi: centrā; malas augšdaļa: 3.2vh; ) #logo svg( augstums: 3vw; ) #top_header nav ul ( displejs: flex; flex-flow: rinda nowrap; ) nav li (saraksta stils: nav; teksta pārveidošana: lielie burti; krāsa: #fff; fontu saime: "Roboto Black", bez serifa; piemale-kreisais: 1,25vw; ) nav a (teksta noformējums: nav ; fonta svars: treknraksts; krāsa: #fff; ) a:hover ( krāsa: #00e0d0; ) #header_content ( margin-top: 24.4vh; ) #header_content h2( font-family: "Playfair Display", serif; krāsa : #fff; fonta izmērs: 2vw; teksta līdzināšana: centrā; ) h (mala: nav; platums: 3. 12vw; augstums: 1px; fona krāsa: #00e0d0; krāsa: #00e0d0; augšdaļa: 3,8 vh; ) #header_content p (platums: 48,6 vw; krāsa: #fff; līnijas augstums: 3,5 vh; teksta līdzinājums: centrā; malas augšdaļa: 4,17 vh; ) .btn ( polsterējums: 0,8 vw 1,5 vw; fontu saime: "Hammersmith One", bez serifa; fonta lielums: 1vw; krāsa: #00e0d0; teksta pārveidošana: lielie burti; apmale: 1px ciets #00e0d0; fona krāsa: caurspīdīga; apmales rādiuss: 2 pikseļi; malas augšdaļa: 7,3 vh; ) .btn:hover ( krāsa: #fff; apmale: 1px solid #fff; ) #dot_nav( platums: 3,43vw; displejs: flex; flex-flow: row nowrap; justify-content: space-between; līdzināt- vienumi: flex-start; margin-top: 18,9vh; ) .circle_nav (platums: 0,62vw; augstums: 0,62vw; apmale: 2px solid #bab9bc; fona krāsa: caurspīdīgs; apmales rādiuss: 0,62vw; ) .circle_nav :hover (apmale: 2 pikseļi cieta #00e0d0; fona krāsa: #00e0d0; )

Laiks nestāv uz vietas un līdz ar to progresē. Tas ietekmēja arī internetu. Jau tagad var pamanīt, kā mainās vietņu izskats, tas ir īpaši populārs adaptīvs dizains. Un šajā sakarā ir parādījušies diezgan daudz jaunu adaptīvie jquery slīdņi, galerijas, karuseļi vai līdzīgi spraudņi.
1. Atbilstošs horizontālo ziņu slīdnis

Adaptīvs horizontālais karuselis ar detalizētas instrukcijas par uzstādīšanu. Tas ir izgatavots vienkāršā stilā, bet jūs varat to veidot atbilstoši sev.

2. Slīdnis vietnē Glide.js

Šis slīdnis ir piemērots jebkurai vietnei. Tas izmanto atvērtā koda Glide.js. Slīdņa krāsas var viegli mainīt.

3. Noliekta satura slaidrāde

Adaptīvā satura slīdnis. Šī slīdņa galvenā iezīme ir attēlu 3D efekts, kā arī dažādas nejauša izskata animācijas.

4. Slīdnis, izmantojot HTML5 audeklu

Ļoti skaists un iespaidīgs slīdnis ar interaktīvām daļiņām. Tas tika izveidots, izmantojot HTML5 audeklu,

5. Attēla pārveidošanas slīdnis

Slīdnis ar morfēšanas efektu (vienmērīga pārveidošana no viena objekta uz citu). IN šajā piemērā Slīdnis ir labi piemērots tīmekļa izstrādātāja vai tīmekļa studijas portfelim portfeļa veidā.

6. Apļveida slīdnis

Slīdnis apļa formā ar attēla apvēršanas efektu.

7. Slīdnis ar izplūdušu fonu

Adaptīvs slīdnis ar pārslēgšanu un fona aizmiglojumu.

8. Atsaucīgs modes slīdnis

Vienkārši, viegli un adaptīvais slīdnis vietnei.

9. Slicebox — jQuery 3D attēla slīdnis(ATJAUNINĀTS)

Atjaunināta Slicebox slīdņa versija ar labojumiem un jaunām funkcijām.

10. Bezmaksas animēts reaģējošs attēlu režģis

JQuery spraudnis, lai izveidotu elastīgu attēlu režģi, kas pārslēgs kadrus, izmantojot dažādas animācijas un laikus. Tas var izskatīties labi kā fons vai dekoratīvs elements vietnē, jo mēs varam selektīvi parādīt jaunus attēlus un to pārejas. Spraudnis ir pieejams vairākās versijās.

11.Flex slīdnis

Universāls bezmaksas spraudnis jūsu vietnei. Šim spraudnim ir vairākas slīdņa un karuseļa opcijas.

12. Foto rāmis

Fotorama ir universāls spraudnis. Tam ir daudz iestatījumu, viss darbojas ātri un vienkārši, un jūs varat skatīt slaidus pilnekrāna režīmā. Slīdni var izmantot gan fiksētā izmērā, gan adaptīvi, ar vai bez sīktēliem, ar vai bez apļveida ritināšanas un daudz ko citu.

P.S.Es vairākas reizes uzstādīju slīdni un domāju, ka tas ir viens no labākajiem

13. Bezmaksas un adaptīva 3D slīdņu galerija ar sīktēliem.

Eksperimentālās galerijas slīdnis 3DPanelLayout ar režģi un interesantiem animācijas efektiem.

14. Slīdnis uz css3

Adaptīvais slīdnis ir izveidots, izmantojot css3 ar vienmērīgu satura izskatu un vieglu animāciju.

15. WOW Slīdnis

WOW slīdnis ir attēla slīdnis ar pārsteidzošiem vizuāliem efektiem.

17.Elastīga

Elastīgs slīdnis ar pilnu atsaucību un slaidu sīktēli.

18. Šķēlums

Šis ir pilnekrāna reaģējošs slīdnis, kurā tiek izmantota css3 animācija. Slīdnis ir izgatavots divās versijās. Animācija tiek veikta diezgan neparasti un skaisti.

19. Adaptīvā fotogalerija plus

Vienkāršs bezmaksas galerijas slīdnis ar attēlu ielādi.

20. Responsive Slider for WordPress

Adaptīvs bezmaksas slīdnis priekš WP.

21. Parallax satura slīdnis

Slīdnis ar paralakses efektu un katra elementa vadību ar izmantojot CSS 3.

22. Slīdnis ar mūzikas saiti

Slīdnis, izmantojot JPlayer atvērtā pirmkoda kodu. Šis slīdnis atgādina prezentāciju ar mūziku.

23. Slīdnis ar jmpress.js

Adaptīvais slīdnis ir balstīts uz jmpress.js, un tāpēc tas ļaus slaidiem pievienot dažus interesantus 3D efektus.

24. Fast Hover Slideshow

Slaidrāde ar ātru slaidu pārslēgšanu. Slaidu slēdzis virza kursoru.

25. Attēlu akordeons ar CSS3

Attēlu akordeons, izmantojot css3.

26. Pieskāriena optimizēta galerijas spraudnis

Šī ir atsaucīga galerija, kas ir optimizēta skārienierīcēm.

27. 3D galerija

3D sienas galerija- radīts priekš Safari pārlūks, kur būs redzams 3D efekts. Ja skatāties uz to citā pārlūkprogrammā, funkcionalitāte būs laba, taču 3D efekts nebūs redzams.

28.Slīdnis ar lappusēm

Adaptīvs slīdnis ar lappusi, izmantojot JQuery UI slīdni. Ideja ir izmantot vienkāršu navigācijas koncepciju. Ir iespējams attīt visus attēlus vai pārslēgt pa slaidiem.

29.Attēlu montāža ar jQuery

Automātiski sakārtot attēlus atkarībā no ekrāna platuma. Ļoti noderīga lieta, veidojot portfeļa vietni.

30. 3D galerija

Vienkāršs 3D apļveida slīdnis, izmantojot css3 un jQuery.

31. Pilnekrāna režīms ar 3D efektu, izmantojot css3 un jQuery

Slīdnis ar iespēju skatīt pilnekrāna attēlus ar skaistu pāreju.

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 "klasisku" 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 jums ir nepieciešami pilnekrāna slīdņi 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 video, 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 > Pievieno jaunu. Kad videoklipa lejupielāde ir pabeigta, kopējiet tā adresi 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 slidkalniņš. Ja vēlaties (un varat), varat ražot laba skaņa animācijas, izmantojot CSS stilus.

Slaida saglabāšana

Pirms slaida saglabāšanas pievienojiet to vienam vai vairākiem slīdņiem, iespējojot 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 pievienota detalizēta dokumentācija, tāpēc jaunu efektu vai funkciju pievienošana tiem nebūs sarežģī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 3 KB.

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 avota kodam.

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 Slīdnis ir atsaucīgs jquery- slīdnis attēli 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ērtais 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 centās ieviest šo koncepciju, ņemot vērā minimālās prasības vienkārša interneta veikala dizaina izveidei, 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 mobilās ierīces. 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 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 izveido atsaucīgu slīdni, izmantojot konteinera 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);
• Atzvanīšanas API un pilnībā 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 rakstīts atsaucīgs tīmekļa dizains. Blueberry ir eksperimentāls atvērtā pirmkoda attēlu slīdņa spraudnis, kas tika rakstīts īpaši darbam ar adaptīvām veidnēm.

Šo slīdni ir viegli uzstādīt, un, ja to izdomājat, varat to viegli konfigurēt un sasniegt vēlamo rezultātu. Lai šis slīdnis darbotos, jums ir nepieciešami tikai daži elementi, kurus mēs tagad izskatīsim secībā.

HTML marķējums

Šeit viss ir ļoti vienkārši, jums tikai jāpievieno UL saraksts pašā sākumā uzreiz pēc taga ķermeni.

Sarakstā ir tikai trīs rindas li, tas ir, slīdnis ir paredzēts 3 attēliem, ja nepieciešams vairāk, tad pirmais solis ir pievienot vajadzīgo rindu skaitu. Ejam tālāk.

CSS stili

Šī, iespējams, ir vissvarīgākā darba daļa, jo mūsu slīdņa darbība ir atkarīga no CSS. Atveriet savas vietnes stila failu un pievienojiet tam šādu kodu.

Body_slides(saraksta stils:nav; margin:0; polsterējums:0; z-index:-2; background:#000;) .body_slides, .body_slides:after(pozīcija: fiksēta; platums:100%; augstums:100% ; top:0px; left:0px;) .body_slides:after ( saturs: ""; fons: caurspīdīgs url(images/pattern.png) atkārtojiet augšā pa kreisi;).body_slides li(platums:100%; augstums:100%; pozīcija: absolūtais; augšā: 0; pa kreisi: 0; fona izmērs: vāks; fona atkārtojums: nav; necaurredzamība: 0; -webkit-animation: anim_slides 18s lineārs bezgalīgs 0s; -moz-animation: anim_slides 18s lineārs bezgalīgs 0s; -o-animācija: anim_slides 18s lineārs bezgalīgs 0s; -ms-animation: anim_slides 18s lineārs bezgalīgs 0s; animācija: anim_slides 18s lineārs bezgalīgs 0s; ) .body_slides li:nth-child(1)( background-image:/url-images 1.jpg) ) .body_slides li:nth-child(2)( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2.jpg) ) . body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) ) @-webkit-keyframes anim_slides ( 0% (necaurredzamība: 0;) 6% (necaurredzamība: 1;) 24% (necaurredzamība: 1;) 30% (necaurredzamība: 0;) 100% (necaurredzamība: 0;) ) @-moz-keyframes anim_slides ( 0% (necaurredzamība:0;) 6% (necaurredzamība:1;) 24% (necaurredzamība:1;) 30% (necaurredzamība:0;) 100% (necaurredzamība:0;) )

Ja saproti CSS, tad tev nebūs grūti saprast, kas par ko ir atbildīgs. Es jums pateikšu minimumu, jo nav jēgas mācīt CSS.

Mūsu sarakstā ar slaidiem ir klase body_slides. Tam ir doti stili izskats un vispārīgie iestatījumi.

Tālāk mums ir pseido elements - : pēc, kas nosaka papildu slānis un virs fona tiek uzlikts punktu raksts. Tas tiek darīts, izmantojot attēlu, uz kuru ir norādīts ceļš images/pattern.png. Ja jums ir cits ceļš, lūdzu, norādiet to pareizi.

.body_slides li:nth-child(1)- šis ir pirmais slaids kārtībā, un tam ir fona attēls. Tālāk seko nth-child(2), papildus attēlam tam tiek dots cits laiks un ir vienāds ar 6 sekundēm. Tas ir, tas parādīsies 6 sekundes pēc pirmā slaida. Nākamais ir nth-child(3), tas parādīsies vēl pēc sešām sekundēm, tātad tam ir 12 sekundes. Ja jāpievieno 4. slaids, tad pievienojiet nth-child(4), un tam jau vajadzētu būt 18 sekundes laikam. Es domāju, ka tas ir skaidrs.

Tālāk jums jānorāda pilns animācijas laiks, tagad tas ir iestatīts body_slides un ir vienāds ar 18 sekundēm. Ja pievienosit 4 slaidus, tas būs vienāds ar 24 un tā tālāk. Ja tev padodas matemātika, ar to jātiek galā, galvenais nekļūdīties, jo slīdnis nedarbosies vispār. Ja vēlaties, varat paātrināt vai palēnināt, iestatot vēlamo laiku.

keyframes anim_slides- tas ir slaida parādīšanās un pazušana. Sākotnēji slaids ir caurspīdīgs un tam tiek dots nosacījums - necaurredzamība:0;. Kad pienāk kārta kādam no slaidiem, tas vispirms parādās, pēc tam atkal sāk kļūt caurspīdīgs un pilnībā pazūd, un tā vietā parādās jauns. Ja vēlaties mainīt parādīšanās vai pazušanas ātrumu, mainiet procentus - tas ir procents no kopējā laika.

Pārējie iestatījumi ir atbilstoši vēlmei un nepieciešamībai - vispārējais fons, tagad melns, ceļš uz attēliem, pozicionēšana, slāņa līmenis utt. Šī slīdņa priekšrocība ir tā, ka tas ir vienkāršs un neizmanto skriptus un visas bibliotēkas, ja tas būtu izveidots, izmantojot - jQuery. Es ļoti ceru, ka, ja vēlaties mainīt fona attēlus, tad šis CSS slīdnis jums palīdzēs.

Tas arī viss, paldies par uzmanību. 🙂