Interesants slīdnis, izmantojot jQuery. Adaptīvo slīdņu izvēle Slīdnis ar maināma fona piemēru

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 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 virs galvenā fona attēla pārklātu papildu attēlu ar caurspīdīgu vai daļēji caurspīdīgu fonu. 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 konsoles kreisajā panelī atlasiet vienumu Multivides faili > Pievienot 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, ko izmantot ar tumšu fonu, 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 vienu no diviem animācijas efektiem slaidu grafikai
• Satura animācija: izvēlieties vienu no diviem veidiem, kā animēt nosaukumu, subtitrus, 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:

Sakiet, 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 izmantots, lai parādītu fonu. 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.

Š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( width:100%; augstums: 100%; pozīcija: absolūts: 0 fons-atkārtojums: 18s lineārs bezgalīgs 0s - ms-animation: anim_slides linear infinite 0s; lineārs bezgalīgs 0s; 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) ) -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 tiek piešķirti izskata un vispārīgo iestatījumu stili.

Tālāk mums ir pseido elements - : pēc, kas nosaka papildu slāni, un zīmējums punktu veidā tiek uzklāts virs fona. 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. 🙂

Laiks nestāv uz vietas un līdz ar to progresē. Tas ietekmēja arī internetu. Jau tagad var redzēt, kā mainās vietņu izskats, īpaši populārs ir adaptīvais 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āls karuselis ar detalizētām uzstādīšanas instrukcijām. Tas ir izgatavots vienkāršā stilā, bet jūs varat veidot to 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). Š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šs, viegls un atsaucīgs vietnes slīdnis.

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, izmantojot CSS3.

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īvā slīdņa pamatā ir 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- izveidots pārlūkprogrammai Safari, kur būs redzams 3D efekts. Ja skatāties uz to citā pārlūkprogrammā, funkcionalitāte būs laba, bet 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 slaidu pa slaidam.

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 attēlus pilnekrāna režīmā ar skaistu pāreju.