HTML5 adaptīvais slīdnis. Kā padarīt adaptīvo slīdni uz CSS3? Adaptīvais slīdnis uz CSS3

Viens no efektīvi veidi Lietotāju uzmanības piesaistīšana vietnes lapā ir kustīgas animācijas izveide. Animācijas elementi palīdz mums skaidrāk pastāstīt mums un parādīt lietotājus par savu produktu. Pēdējo reizi, ceļojuma paneļi ieguva lielu popularitāti, kā arī vairākas citas sekas, kas parādās, ritinot vai nospiežot attēlu. Tie ir pazīstami arī kā slīdņi, karuseļi un atstāj paneļus. Šajā rakstā aplūkota adaptīva karuseļa tipa slīdņa izveide, vienmērīgi ietekmējot automātisko līgumu.

Šodien tīklā ir simtiem atsauksmju ar atsaucēm uz gataviem risinājumiem, tomēr lielākā daļa no tiem satur daudzas neizmantotas funkcijas, kas ievērojami samazina slīdņa veiktspēju, kā arī palēnināt vietas iekraušanu kopumā. Profesionālie tīmekļa izstrādātāji vienmēr centās izveidot elastīgu uzstādīšanā programmatūras produktiar zemu papildu bibliotēku un spraudņu slieksni. Tāpēc mūsu skripta darbs ietver minimālās prasības, lai organizētu šādu slīdni. Darba funkcionalitāte ļauj iestatīt pārslēgšanas intervālu, ātrumu, kā arī konkrēta slaida izvēli. Zemāk ir pastāvīga rinda, kas regulē paša slīdņa darbu.

laika grafiks. - Slaidu pārslēgšanas ātrums

TimeView. - parādīts laiks

Radioobut. - pogas zem slaidas, ātrai navigācijai. Pēc noklusējuma patiesā vērtība, ja lietojat FALSE, pogas pazudīs.

Un tagad pieņemsim sākt! Izveidojiet un atveriet failu index.htm.

Iesniegtajā kodā, kā mēs neredzam neko sarežģītu, slīdnis-wrap. Nosaka vispārējs Un līnijas slīdni ekrāna vidū. Parametrs aktīvais slaids. Iestata attēla lielumu un augstumu atbilstoši tās garumam. UN slīdni. Rāda tikai aktīvu attēlu.

Tagad izveidojiet un atveriet failu. style.css. un raudāt atzīmi, kas mums nepieciešams:

@Import URL ("https://fonts.googleapis.com/css?family\u003dopen+sans|roboto"); Ķermenis (krāsa: # 4f4f5a; Font-Face: "Roboto", SANS-SERIF; Fonta izmērs: 16px; polsterējums: 0; Margin: 0;) # Slider-wrap (Maksimālais platums: 800px; Margin: 0 Auto; Margin-top: 80px;) # Active-slide (platums: 100%; displejs: tabula; pozīcija: relatīvais; pārpildes: slēpta; -webkit-lietotāja izvēlieties: nav; -Moz-lietotāja izvēle: nav; -ms- Lietotāja izvēle: Neviens; -O-Lietotāja izvēle: Nav; Lietotāja izvēle: Nav;) #slider (pozīcija: Relatīvais; Platums: Calc (100% * 4); Top: 0; Pa kreisi: 0; Margin: 0 polsterējums: 0; -webkit-pāreja: 1s; -O-pāreja: 1s; pāreja: 1s; -webkit-pārejas laika funkcija: viegluma-in-out; -O-pārejas laika funkcija: vieglumu -out; Pārejas laika funkcija: vieglums-in-out;) .slide (platums: calc (100% / 4); saraksta stils: nav; displejs: inline; pludiņš: pa kreisi;) .slide img (platums: 100%;) .radio-poga (margin-top: 10px; teksta saskaņotais: centrs;) .radio-bet .ctrl-izvēlieties (rezerve: 2px; displejs: inline bloks; platums: 16px; Augstums: 16px; pārpildes; : Slēpts; teksta ievilkums: -9999px; fons: URL (RadioBg.p Ng) centrālais apakšējais nav atkārtojums; ) .Radio-bet .ctrl-atlasiet: lidināties (kursors: rādītājs; fona stāvoklis: centra centrs;) .radio-bet .ctrl-select.acture (fona stāvoklis: centrs;) #prewbutton, #nextbutton (displejs) : Bloks; Platums: 40px; Augstums: 100%; Absolute; Tops: 0; Pārplūdes: paslēpts; teksta ievilkums: -999px; fons: URL ("arrowbg.png") Left Centrs nav atkārtošanās; necaurredzamība: 0.5 z index: 3; kontūra: Nav svarīgi;) #prewbutton (pa kreisi: 10px;) #nextbutton (labi: 10px; fons: URL (arrowbg.png) labais centrs bez atkārtošanas;) #prewbutton: lidināties, # Nextbutton: Hover (necaurredzamība: 1;)

Stila stilā slīdnis-wrap. Īpatnējs platums. – maksimālais garums Jūsu attēlus.

Stila stilā #Slider (platums: calc (100% * 4);) un .slide (platums: calc (100% / 4);) Norādiet attēlu skaitu savā slīdni. Mūsu piemērā tie ir 4.

Ja bultiņas uz priekšu / atpakaļ uz jūsu slīdņa redzamību var būt neredzams, un tie parādīsies, kad jūs lidināties. Lai to izdarītu parametros prewbut. un nextbut., Iestatiet necaurredzamības īpašuma vērtību 0.

Tagad izveidojiet un atveriet mūsu failu. slider.js.kurā būs slīdņa kods. Neaizmirstiet savienot jQuery bibliotēku.

$ (Dokuments) .READY \u003d 700; VAR TIMEVIEW \u003d 5000; VAR RADIOBUT \u003d TRUE; VAR SLIDENUM \u003d 1; VAR SLIDETIME; slidecount \u003d $ ("# slīdni .slide"). Garums; VAR ANIMSLIDE \u003d FUNKCIJA (bultiņa) (Slidetime); ja (bultiņa \u003d\u003d "Next") (ja (slidenum \u003d\u003d slidecount) (slidenum \u003d 1;) cits (slidenum ++) TransleWidth \u003d - $ ("# Active-slide") .Width () * * (Slidenum - 1); $ ("# slīdni"). CSS (("pārveidot": "Tulkot (" + TranslateTh + "PX, 0)"));), ja (bultiņa \u003d\u003d "prew") (ja (Slidenum \u003d\u003d 1) (slīdni \u003d slidecount;) citur (sliderum- \u003d 1) Translatewidth \u003d - $ ("# Active-slide"). Platums () * (slidenum - 1); $ ("#slider"). CSS (("Transform": "Tulkot (" + Translatewidth + "PX, 0)"));) cits (slidenum \u003d bultiņa; TransleWidth \u003d - $ ("# Active-slide"). Platums () * (slidenum - 1); $ ("# slīdni"). CSS (("transformācija": "Tulkot (" + Translatewidth + "PX, 0)"));) $ (". Ctrl-Select.Active") .REMOVECECASS ("). Aktīvs "); $ (" CTRL-SELECT "). EQ (slidenums - 1) .addclass (" Aktīvs ");) Ja (RadioBut) (VAR $ LIETOT \u003d $ (")<>") .prependto (" # Active-slide "); $ (" # Nextbutton "). Noklikšķiniet (funkcija (); atgriezties FALSE;)) $ (" # Prewbutton "). Noklikšķiniet (funkcija () (animslide (" Prew) "); Atgriezties FALSE;))) Var adderspan \u003d" "; $ (". Slide "). Katrs (funkcija (indekss) (addersonspan + \u003d" "+ indekss +""; }); $("

"+ adderspan +"

") .Appendto (" # slīdni-wrap "); $ (" Ctrl-Select: First "). Addclass (" Aktīvs "); $ (". Ctrl-Select "). Noklikšķiniet (funkcija (VAR GOTONUM \u003d Parsefloats) ($ (tas) Nākamais ")), TimeView);)) $ (" # slīdnis-wrap "). Lidmašīna (funkcija (); pauze \u003d taisnība;), funkcija () (pauze \u003d false; rotators ();)); var klikšķināt \u003d FALSE; VAR PREVX; $ (". slide"). Mousedown (funkcija (E) (noklikšķinot \u003d taisnība; prevx \u003d e.Clientx;)); $ (". Slaids"). MouseUP (funkcija () (noklikšķinot \u003d FALSEUP) ;)); $ (dokuments) .MouseUP (funkcija () (noklikšķinot \u003d FALSE;)); $ (".". slide "). Mousemove (funkcija (E) (ja (noklikšķinot \u003d\u003d taisnība) (ja (E.Clientx)< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX > Prevx) (animslide); Cleartimeout (slidetime);) Noklikšķinot \u003d FALSE; )))); $ (". Slide"). Lidojums (). CSS ("kursors", "rādītājs"); Rotators (); ));

Funkcija animslīda. Aizņem trīs vērtības veidus: nākamā, nogrima, skaitliskā vērtība. Nākamais parametrs pārslēdz šādu slaidu, prew atgriež iepriekšējo, un ciparu vērtība ir noteikti norādīts slaids, kas izvēlēts, izmantojot radio slaidu pogas.

Iesniegtais slīdnis izmantoja attēlus no tīmekļa resursiem https://pixabay.com/.

Ja jums ir nepieciešams pievienot augstas kvalitātes jquery-slīdni uz jūsu vietni, tad šajā rakstā jūs atradīsiet nepieciešamo spraudņu aprakstu. Neskatoties uz to, ka jQuery ir ievērojami vienkāršots darbs ar JavaScript. Mums joprojām ir vajadzīgi spraudņi, lai paātrinātu tīmekļa dizaina izveides procesu.

Mēs varam veikt izmaiņas dažos no šiem spraudņiem un radīt jaunas slīdņus, ka daudz vairāk atbildēs uz mūsu vietnes uzdevumiem.

Attiecībā uz citiem slīdņiem, vienkārši pievienojiet virsrakstus, attēlus un izvēlieties efektus, lai mainītu slaidus, kas nāk ar slīdni. Visi šie spraudņi ir pievienoti detalizēta dokumentācijaTāpēc pievienojiet jaunas sekas vai tās funkcijas nebūs daudz grūtības. Jūs pat varat mainīt izraisītājus atkarībā no notikumiem, ja esat pieredzējis jquery programmētājs.

Nesenās tendences, piemēram, adaptīvā konstrukcija, ir ļoti svarīgi tīmekļa projektiem, neatkarīgi no tā, vai jūs īstenojat spraudni vai skriptu. Visi šie elementi padara katru no šiem spraudņiem ļoti elastīgi. Viss, kas notika 2014. gadā, ir iekļauts šajā sarakstā.

JQuery-sliders attēlus

JSSOR atsaucīgs slīdnis.

Nesen es atnācu pāri šim funkcionālajam jQuery -Colder, un es varētu pārliecināt pirmo, lai pārliecinātos, ka viņš ļoti labi cīnās ar savu darbu. Tajā ir neierobežotas iespējas, kas var tikt paplašinātas rēķina atvērtā pirmkoda slīdni:

Adaptīvais dizains;
Vairāk nekā 15 iestatījumi;
Vairāk nekā 15 attēlu maiņas ietekme;
Attēlu galerija, karuselis, atbalsts pilnekrāna izmēram;
Vertikālās rotatora baneri, slaidu saraksts;
Video atbalsts.

Demo | Lejupielāde

PGWSlider - adaptīvā jQuery / Zepto bāzes slīdnis

Vienīgais uzdevums šī spraudņa ir demonstrēt slaidus attēlu. Tas ir ļoti kompakts, jo jQuery failu lielums ir tikai 2,5 kB, kas ļauj jums to ielādēt ātri:

Adaptīvais izkārtojums;
SEO optimizācija;
Atbalsts ar 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āde

JQuery vertikālais ziņu slīdnis

Elastīga un noderīga jQuery-slīdni, kas paredzēti ziņu resursiem ar publikāciju sarakstu kreisajā pusē un secinājums attēla labajā pusē:

Adaptīvais dizains;
Vertikālā ziņu komutācijas kolonna;
Paplašinātas virsraksti.

Demo | Lejupielāde

Wallop slīdnis.

Šis slīdnis nesatur jQuery, bet es gribētu to prezentēt, jo tas ir ļoti kompakts un ļauj ievērojami samazināt laika lejupielādes laiku. Ļaujiet man zināt, ja jums tas patīk:

Adaptīvais izkārtojums;
Vienkāršs dizains;
Dažādas iespējas mainīt slaidus;
Minimālais JavaScript kods;
Tikai 3kb lielums.

Demo | Lejupielāde

Plakanā stila polaroid galerija

Galerija, kas izkliedēta uz dokumentu galda ar elastīgu izkārtojumu un skaists dizains Ir jāinteresē daudzi no jums. Vairāk piemērots tabletēm un lieliem displejiem:

Adaptīvais slīdnis;
Plakanais dizains;
Izlases slaidu izmaiņas;
Pilna piekļuve avota kodam.

Demo | Lejupielāde

Slīdnis.

Demo | Lejupielāde

Hislider - HTML5, jQuery un WordPress slīdni

Hislider ieviesa jaunu bezmaksas jQuery slīdni spraudni, ar kuru jūs varat izveidot dažādus galerijas attēlus ar fantastiskām pārejām:

Adaptīvais slīdnis;
Neprasa zināšanas par programmēšanu;
Vairākas pārsteidzošas veidnes un ādas;
Skaistas pārejas efekti;
Atbalsts dažādām platformām;
Saderība ar WordPress, Joomla, Drupal;
Spēja parādīt dažādu veidu saturu: attēlus, YouTube video un VIDEA VIDEA;
Elastīgs iestatījums;
Noderīgas papildu funkcijas;
Neierobežots redzamā satura apjoms.

Demo | Lejupielādēt

Wow slīdni.

WoW slīdnis ir adaptīvā jQuery slīdni Attēli ar pārsteidzošu vizuālās sekas (domino, pagrieziens, izplūdis, apvērsums un zibspuldze, izlidošana, žalūzijas) un profesionālās veidnes.

WoW slīdnis ir aprīkots ar instalācijas vedni, kas ļauj izveidot fantastiskus slīdņus dažu sekunžu laikā bez nepieciešamības izprast kodu un rediģēt attēlus. Pieejams arī plug-in Joomla un WordPress versijas lejupielādei:

Pilnībā adaptīvs;
Atbalsts visām pārlūkprogrammām un visu veidu ierīcēm;
Atbalsts sensorām ierīcēm;
Vienkārša uzstādīšana WordPress;
Elastīgums uzstādīšanas;
SEO optimizēts.

Demo | Lejupielādēt

NIVO slīdni - bezmaksas jquery-spraudnis

Nivo slīdnis ir pazīstams visai pasaulei kā skaistākā un viegli lietojamā attēla slīdni. NIVO slīdni spraudnis ir bezmaksas un tiek izlaists saskaņā ar MIT licenci:

JQuery 1.7 un vairāk;
Skaistas pārejas efekti;
Vienkāršs un elastīgs uzstādīšanā;
Kompakts un adaptīvs;
Atvērts kods;
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

Ideja iedvesmoja ābolu slīdņus, kuros vairāki mazi elementi var lidot ar dažādām animācijas efektiem. Izstrādātāji centās iemiesot šo koncepciju attiecībā uz minimālās prasības Lai izveidotu vienkāršu interneta veikala dizainu, kurā elementi "izlidojošie" ir dažādas kategorijas:

Adaptīvais izkārtojums;
Minimālisma dizains;
Dažādas sekas zaudējumu un maiņu slaidiem.

Demo | Lejupielādēt

Pilna izmēra jQuery attēlu slīdnis

Ļoti vienkāršs slīdnis, kas aizņem 100% no lapas platuma un pielāgo mobilo ierīču ekrānu lielumam. Tas darbojas ar CSS pārejām, un attēli "Fit" ar dzīvniekiem. Anchor var nomainīt vai dzēst, ja nevēlaties saistīt saiti uz attēlu.

Uzstādot slīdni atver 100% ekrāna platumu. Tas var arī automātiski samazināt slaidu attēlu lielumu:

Adaptīvā jQuery -slider;
Pilna izmēra;
Minimālisma dizains.

Demo | Lejupielādēt

Elastīgs satura slīdnis + ir

Elastic Content Slidener automātiski regulē platumu un augstumu atkarībā no lieluma mātes elementa. Tas ir vienkāršs jquery slīdnis. Tas sastāv no iepriekš minētās slaidu zonas un navigācijas cilnes paneļiem apakšā. Slīdnis regulē tā platumu un augstumu atbilstoši mātes konteinera lielumam.

Skatoties uz mazajiem ekrāniem pa diagonāli, navigācijas cilnes tiek pārvērstas mazās ikonas:

Adaptīvais dizains;
Ritiniet ar peles klikšķi.

Demo | Lejupielādēt

Bezmaksas 3D Stack slider

Eksperimentālais slīdnis, klejojošs attēli 3D. Divi skursteņi atgādina papīra skursteņus, no kuriem, ritinot attēlu, tiek parādīts centrā slīdni:

Adaptīvais dizains;
Flip-transformācija;
3D sekas.

Demo | Lejupielādēt

Fullscreen Slit Slider, pamatojoties uz jQuery un CSS3 + Manual

No rokasgrāmatas jūs uzzināsiet, kā izveidot slīdni ar izcilu: ideja ir "samazināt" un parādīt pašreizējo slaidu šajā veidlapā, atverot šādu vai iepriekšējo attēlu. Izmantojot jQuery un CSS - animāciju, mēs varam izveidot unikālu pārejas efektu:

Adaptīvais dizains;
Sadalīt pāreju;
Pilnekrāna slīdni.

Demo | Lejupielādēt

Unislider - ļoti mazs jquery slīdnis

Nav nevajadzīgas plēšas un marķējums, lielums ir mazāks par 3kb. Izmantojiet jebkuru HTML kodu jūsu slaidiem, paplašiniet to ar izmantojot CSS. . Visi saistīti ar Undlider atrodas Github:

Atbalsts dažādām pārlūkprogrammām;
Tastatūras atbalsts;
Regulēšana augstumā;
Adaptīvais dizains;
Atbalsts sensoro ievadei.

Demo | Lejupielāde

Minimālas atsaucīgas slaidi

Vienkāršs un kompakts spraudnis ( tikai 1 KB izmērs), kas izveido adaptīvu slīdni, izmantojot elementus konteinera iekšpusē. AtbildesLides.js darbojas S. liels daudzums pārlūkprogrammas, ieskaitot visas IE6 un augstākas versijas:

Pilnībā adaptīvs;
Izmērs 1 KB;
CSS3 pārejas ar iespēju startēt caur JavaScript;
Vienkārša iezīmēšana, izmantojot ievērojamu sarakstu;
Spēja konfigurēt pāreju sekas un viena slaida skatīšanās ilgumu;
Atbalsta spēju radīt vairākas slaidrādes;
Automātiska un roku ritināšana.

Demo | Lejupielādēt

Kamera - bezmaksas jquery slīdni

Kamera ir spraudnis ar daudziem pārejas efektiem, adaptīvu izkārtojumu. Vienkārša iestatījumā, ko atbalsta mobilās ierīces:

Pilnībā adaptīvais dizains;
Paraksti;
Spēja pievienot video;
33 dažādas krāsas ikonas.

Demo | Lejupielādēt

Slaidus, adaptīvā jQuery spraudnis

Slaidi ir adaptīvs spraudnis jQuery (1.7.1 un vairāk), ar atbalstu sensorām ierīcēm un CSS3 pārejām. Eksperimentējiet ar viņu, mēģiniet vairākus gatavus piemērus, kas palīdzēs jums izdomāt, kā pievienot jūsu projektam slaidjs:

Adaptīvais dizains;
CSS3 -Productions;
Atbalsts sensorām ierīcēm;
Vienkāršs uzstādīšanas laikā.

Demo | Lejupielāde

BX jQuery slīdni.

Tas ir bezmaksas adaptīvā jQuery slīdni:

Pilnībā adaptīvā - pielāgojas jebkurai ierīcei;
Horizontālā, vertikālā maiņa slaidu;
Slaidi var saturēt attēlus, video vai html -content;
Pagarināts atbalsts sensorām ierīcēm;
Izmantojot CSS pārveidojumus par slaidu animāciju ( aparatūras paātrinājums);
Atzvanīšanas API un pilnībā publiskās metodes;
Neliels faila lielums;
Viegli īstenot.

Demo | Lejupielādēt

FlexSlider 2.

Labākais adaptīvais slīdnis. Jauna versija Tas tika pabeigts, lai palielinātu darba ātrumu, kompaktumu.

Demo | Lejupielāde

Galleria - Adaptīvā foto galerija, pamatojoties uz JavaScript

Galleria tiek izmantota miljoniem vietņu, lai izveidotu attēlu galeriju augstā kvalitātē. Pozitīvo pārskatu par viņas darbu vienkārši ruļļos:

Pilnībā brīvi;
Pilnekrāna skatīšanas režīms;
100% adaptīvs;
Nav nepieciešama programmēšanas pieredze;
Atbalstiet iPhone, iPad un citas pieskāriena ierīces;
Flickr, Vimeo, YouTube un daudz vairāk;
Vairākas tēmas.

Demo | Lejupielāde

Blueberry - vienkāršs adaptīvais jquery image slīdnis

Es jūs iesniedzu jums jquery-slider attēlu, kas rakstīts tieši adaptīvā web dizainā. Melleņu ir eksperimentāls atvērtā koda attēla slīdņa spraudnis, kas bija īpaši rakstīts darbam ar adaptīvām veidnēm.

2019. gada 4. novembris Ierakstīšana ir atjaunināta

Yury vācu valoda

Slīdņi pie tīra CSS + bonusa slīdni

CSS slīdņiem ir dažas priekšrocības pār slīdņiem uz JavaScript. Viena no šīm priekšrocībām ir lejupielādes ātrums. Tiek izmantoti ne tikai attēli slīdņiem. lieli izmēri (Ja nav optimizācijas dažādiem ekrāniem), tas ir arī tērēts uz skriptu lejupielādi kādu laiku. Bet rakstā jūs redzēsiet tikai slīdņus tīros CSS.

Tas ir tas, ko es atradu vietnē par tēmu slīdņiem:

1. CSS3 Image Slider

Slider uz CSS, kas izmanto radio pogas slaidus, lai pārvietotos. Šie radio baseini ir slīdņus. Turklāt papildus radio baseiniem navigācija tiek veikta, izmantojot šāvēju pa kreisi un pa labi. Lai sekotu tam, kāds attēls ir redzams - tiek izmantotas pseido-skolas: pārbaudīts.

2. CSS3 miniatūra slīdnis

Atšķirībā no pagātnes slīdni CSS, šeit, nevis radio baseini apakšā ir visu attēlu sīktēli, kas ir ērti, veidojot attēlu galeriju. Attēli tiek aizstāti ar sava veida efektu: vienmērīgi pazūd.

3. Galerija CSS

Bet šis slīdnis CSS ir ideāli piemērots lapu pārdošanai. Parasti daudzi tīmekļa izstrādātāji aizdevumu izstrādē (pārdošanas lapas) novieto slīdni pašā sākumā tā, ka pirmajā ekrānā (bez ritināšanas), apmeklētājs nekavējoties redzēja visas priekšrocības, ko tā atrodas šajā lapā. Turklāt šis slīdnis ir adaptīvs, kas arī patīk.

4. Slider uz CSS bez saitēm

Tūlīt es vēlos pamanīt, ka šis slīdnis neizmanto saites! Pēc noklusējuma, papildus galvenajam attēlam (slide), 2 vairāk slaidi ir redzami. Tie atrodas aiz galvenā. Slaidu maiņa notiek skaistā režīmā: vispirms abi slaidi tiek pārvietoti, un slaids kļūst par centru, kas pēc tam kļūs par galveno. Tad slaidu palielinās un novieto priekšā pārējiem.

5. Adaptīvais slīdnis CSS3

Vēl viens adaptīvs slīdnis, kura vadība ir balstīta uz radiokopteriem. Lai redzētu, kā šis slīdnis izskatīsies dažādas ierīcesah - jūs varat patstāvīgi mainīt pārlūkprogrammas logu vai slīdņa lapā ir īpašas ikonas dažādām ierīcēm, noklikšķinot uz kura jūs redzēsiet, ka jūs redzēsiet slīdni datorā, planšetdatorā vai viedtālrunī.

* bonusa slīdnis *

Papildus visiem slīdņiem, kas ir iepriekš izklāstīti, es vēlos iepriecināt jūs ar citu. Šis slīdnis ir ideāls attēlu galerijas izveidei. Vārdi nepaskaidro, ko viņš dara, tāpēc labāk ir skatīties visu uz video:

Izeja

Izmantojot slīdņus, jūs varat skaisti izveidot attēlu galerijas, ievietojot tos kompaktiskāk, ievietojiet slīdni pirmajā ekrānā (daļa no lapas, kas ir redzama bez ritināšanas), pārdodot lapu, lai nekavējoties parādītu apmeklētājus uz galvenajiem ieguvumiem, ko viņš saņems. Jūs joprojām varat atrast daudz veidu, kur var izmantot slīdņus, bet viena lieta ir skaidra tieši - tie ir izdevīgi ar pareizu lietošanu.

Punktus, kas tika pārskatīti rakstā.

Sveiki visiem. Ļoti atdzist slīdni, ko es vēlos iepazīstināt pie jūsu uzmanības. Ooo ... Es skatos uz jums pilnīgi aizmirsu par mani. Jā, jā, es jau esmu aizgājis, iespējams, sešus mēnešus vai gadu, un es absolūti nezinu, kā padarīt sevi par katru dienu uz rakstu (lai gan tas ir pilnīgi reāls). Nu, labi, nevis par to tagad runas. Slīdni nodrošina Tympanus Codrops un darbojas HTML5, CSS3 un Tweenmax.js.

Slīdnis nav vērpts pa kreisi pa labi, nevis no augšas uz leju, bet pa diagonāli. Navigācijas bultiņas atrodas augšējā kreisajā stūrī un apakšējā labajā stūrī. Arī navigācija tiek veikta, nospiežot prevni pa labi un pa kreisi. Visa animācija ir ļoti gluda un darbojas labi mūsdienu pārlūkprogrammas. Katram slīdņa atsevišķajam elementam ir sava lapa, kas atveras, kad preses. Lapā ir fotoattēls, nosaukums un teksts.

Slīdnis ir ideāls galerijā, mākslinieka portfelī, fotogrāfs, tēlnieks, īsi, jebkura persona, kas nodarbojas ar radošām aktivitātēm, un viņam ir darbi, kurus viņš vēlas parādīt vietnē. Galerija uz vietas muzeja, izstāde izskatīsies labi.

Galerijas savienošana

Pievienojiet galeriju nebūs grūti

Lejupielādēt failus

Vispirms jums ir nepieciešams lejupielādēt avotus no manas vietnes, lai iegūtu tiešu saiti. No arhīva jums ir nepieciešams, lai ielej saknē vietnes IMG, CSS un JS mapes

Savienojiet CSS un JS failus

Pēc tam pievienojiet skriptus un stilus. Stili ir savienoti, pievienojot tagu Nākamais kods

un skripti nosaka lapas aizvēršanas tagu

Pievienojiet vietnes slīdni

Pirmkārt, pievienojiet navigāciju vietnes augšdaļā

un tad pats slīdnis

Atmiņas un domas.

Automatizācija.

Izlases klīst

Mašīnas.

Patvaļīgi vārdi.

Līdzāspastāvēšana

Vienīgā rokasgrāmata ir jūsu sirds

Haunted Drift.

Bellamio.

Jautri atšķiras

Ganības.

Cerības un sapņi.

Fokuss

Automatizācija.

Koks ir jābūt jūsu draugam, ja jūs viņu gatavojas gleznot viņu

Vienkārši ļaujiet tam notikt. Mēs vienkārši ļaujiet šai plūsmai tieši no mūsu prātiem. Vienkārši atpūsties un ļaujiet tai plūst. Tas ir viegli. Let 's likt dažas laimīgas maz mākoņi mūsu pasaulē. Tas ir ļoti auksts attēls, man var būt iet saņemt savu mēteli. Tas ir gatavs iesaldēt mani līdz nāvei. Tas ir gonna būt laimīgu maz jūras ainavu. Let 's iet uz augšu šeit, un sākt ar kādu jautri mazāk mazliet var darīt tik daudz. Darbs vienu lietu vienlaicīgi. Don "t aizvedis prom - mums ir daudz laika. Ievietojiet savas jūtas tajā, jūsu sirdī, tā ir jūsu pasaule. Šie koki ir tik jautri. Es sāku uz tiem, un man ir grūti apstāšanās.

Mašīnas.

Tas, iespējams, ir vislielākā lieta, kas notiks manā dzīvē

Mēs "nemēģinām jūs kohth, lai kopētu. Mēs esam tikai šeit Tehniķi, tad ļaujiet jums zaudēt pasauli. Tagad mēs esam gatavojas uzpūstu šo mākoni. Mums šeit nav kaut kas, bet laimīgs koki šeit. Pieņemsim, ka to darīsiet vēlreiz. Izmantojiet to, ko redzat, nedodiet to plānot. Let 's iet uz augšu šeit, un sākt ar kādu jautri mazāk mazliet var darīt tik daudz. Darbs vienu lietu vienlaicīgi. Don "t aizvedis prom - mums ir daudz laika. Ievietojiet savas jūtas tajā, jūsu sirdī, tā ir jūsu pasaule. Šie koki ir tik jautri. Es sāku uz tiem, un man ir grūti apstāšanās.

Līdzāspastāvēšana

Vienīgā rokasgrāmata ir jūsu sirds

Let 's iet uz augšu šeit, un sākt ar kādu jautri mazāk mazliet var darīt tik daudz. Darbs vienu lietu vienlaicīgi. Don "t aizvedis prom - mums ir daudz laika. Ievietojiet savas jūtas tajā, jūsu sirdī, tas ir jūsu pasaule. Šie koki ir tik jautri. Es sāku tos un man ir grūti apstājoties. Bet mēs vēl neesam tur, tāpēc mums nav nepieciešams Jāuztraucas par to. Tagad šeit izvirzīsim dažus laimīgus mākoņus. Ko velns. Plāna krāsa pieturēs pie bieza krāsas. Es esmu gatavojas sajaukt mazliet krāsu.

Bellamio.

Vienīgais priekšnoteikums ir tas, ka tas padara jūs laimīgu

Redzēt. Mēs ņemam stūra suku un ļaujiet tai atskaņot un atpakaļ. Tas ir neplānots, tas tiešām vienkārši notiek. I "M veida ir muļķis, es nevarēju šaut bambi, izņemot kameru. Es domāju, ka es esmu mazliet dīvaini. Man patīk runāt ar kokiem un dzīvniekiem. Tas ir labi, lai gan; Man ir vairāk jautrības nekā vairums cilvēku. Mēs šodien spēlēsim ar mākoņiem. Tu pazīstat, ka jums bija tik daudz jaudas? Jūs varat pārvietot kalnus. Jūs varat darīt kaut ko. Let 's iet uz augšu šeit, un sākt ar kādu jautri mazāk mazliet var darīt tik daudz. Darbs vienu lietu vienlaicīgi. Don "t aizvedis prom - mums ir daudz laika. Ievietojiet savas jūtas tajā, jūsu sirdī, tā ir jūsu pasaule. Šie koki ir tik jautri. Es sāku uz tiem, un man ir grūti apstāšanās.

Ganības.

Let 's iet uz augšu šeit jautri un sākt ar kādu jautri

Tik bieži mēs izvairāmies no braukšanas ūdens, un braukšanas ūdens ir daudz jautrības. Ikviens gatavojas redzēt lietas savādāk - un ka "s tā, kā tas būtu. Liels spēcīgs koks ir lielas spēcīgas saknes. Stīvs vēlas pārdomas, tāpēc ļausim viņam pārdomāt. Mēs neietekmējamies Strādājiet vienā reizē. Don "t get aizvedis - mums ir daudz laika. Novietojiet savas jūtas tajā, jūsu sirdī, tas ir jūsu pasaule. Šie koki ir tik jautri. Es sāku uz tiem, un man ir grūti apturēt.

Fokuss

Tas ir neplānots, tas tiešām vienkārši notiek

Bet mēs vēl neesam tur, tāpēc mums nav jāuztraucas par to. Tagad let 's likt dažas laimīgas maz mākoņi šeit. Kas velns. Tieva krāsa būs pieturēties pie bieza krāsas. Es "esmu sajauc mazliet krāsu. Mēs izmantosim Van Dyke Brown, pastāvīgu sarkanu un mazliet Prūsijas zilā krāsā. Let 's iet uz augšu šeit, un sākt ar kādu jautri mazāk mazliet var darīt tik daudz. Darbs vienu lietu vienlaicīgi. Don "t aizvedis prom - mums ir daudz laika. Ievietojiet savas jūtas tajā, jūsu sirdī, tā ir jūsu pasaule. Šie koki ir tik jautri. Es sāku uz tiem, un man ir grūti apstāšanās.

Tas ir viss. Slīdnis ir gatavs! Veiksmi darbā

Sveicinot jūs atkal manā emuārā. Šodien CSS, pateicoties jaunajiem selektoriem, bija iespēja veikt slīdni bez skriptiem. Tātad, šajā rakstā, es jums parādīs, kā padarīt adaptīvo slīdni uz CSS3?

Nodarbību plāns

Tātad šodien es jums parādīšu ļoti detalizēti, kā izveidot savu slīdni bez skriptiem, pielāgot to jebkurām ierīcēm un viegli mainīt savu izskatu nākotnē, kā arī pievienot jaunus slaidus. Mēs izgatavosim tikai 3 slaidus, kas noklikšķinot uz pogām manuāli, noklikšķinot uz pogām. Nu, sāksim!

Marķēšanas slīdni

Pirmkārt, ir jāsaprot, kas būs atzīme. Šajā ekrānuzņēmumā jūs varat redzēt manu marķējuma piemēru, saskaņā ar to, un es strādāju šodien.
Es arī dublēt visu šo kodu, lai jūs varētu kopēt un ievietot sevi.
Pirmkārt, jums ir jāizveido slaidu slēdžu pogas. Tā kā slaids būs trīs, tad tas pats ir nepieciešams pogas:

Katrs saņem savu, unikālo identifikatoru, un viens ir izvēlēts pēc noklusējuma.

Pēdējais gabals kodu, kas mums nepieciešams. Tas parāda parakstus uz pogām, bet patiesībā mēs tos izmantojam, lai paslēptu noklusējuma pogas (radio pogas netiek izpildītas caur stiliem) un ievieto šos blokus, kurus var izdot tās vietā. Tas ir tie, kas kalpos kā pārslēgšanas pogas, un komplekts ar radio pogām tiek veikta, izmantojot īpašu formu atribūtu.

Un tagad viss šis kods ir iesaiņots vienā kopīgā traukā. Ļaujiet tai būt bloks ar wrap klasi.

Mēs sākam izveidot slīdni - sākotnējos lapas stilus

Tātad, pirmkārt, mēs uzstādīsim kopīgus stilus, kas palīdzēs atiestatīt visus noklusējuma indikatorus, un tajā pašā laikā, lai padarītu iekšējos ievilkumus un rāmjus ņem vērā platumā elementu. Tas tiek darīts kā šis:

* {
Margin: 0;
Polsterējums: 0;
-Webkit-box-izmēra: Border-box;
-Moz-Box-Izmērs: Border-box;
-O-box-izmēra: Border-box;
Box-Izmērs: Border-box;
}

Starp citu, * - ir visi selektori. Tas ir tāds universāls un globāls selektors.

Mēs dekorējam konteineru. Tas ir pats bloks, kas satur visas 3 no mūsu svarīgajām daļām - pogām, slaidiem un parakstiem.

Ietīšana (". \\ T
Augstums: 350px;
Margin: 0 Auto;
Stāvoklis: radinieks;
Platums: 600px;
}

Platums un augstums, ko varat eksponēt IkviensAtkarībā no tā, kādi izmēri būs jūsu fotoattēli slaidiem. Es agrāk apgrieztu fotoattēlus līdz 600 lielumam uz 350 pikseļiem, tāpēc es norādīju šādus izmērus. Marža: 0 Auto līnijas Tvertne tieši lapas centrā, un relatīvā pozicionēšana ļaus jums precīzi novietot pogas konteinerā vēlāk.

Mēs sastādām slīdni un slaidus

Sākotnēji šeit ir šādi stili:

Slīdnis (
Fona krāsa: # 999;
Augstums: mantojums;
Pārplūde: slēpta;
Stāvoklis: radinieks;
Platums: mantojums;
}

Mēs norādām, ka slīdnis ir tāds pats platums un augstums, kā arī kopīgs konteiners. Mēs arī norādām krāsu un pozicionēšanu, un pārplūdes īpašumu: slēptās izcirtņi viss, kas neietilpst blokā.

Nākamais gadījums ir jāizdod paši slaidi:

Slaidi (
Augstums: mantojums;
Necaurredzamība: 0;
Stāvoklis: absolūts;
Platums: mantojums;
Z-indekss: 0;
}
.Auto1 (fona attēls: URL (bmw.jpg);)
.Auto2 (fona attēls: URL (audi.jpg);)
.Auto3 (fona attēls: URL (Porshe.jpg);)

Norādiet arī platumu un augstumu kā slaidu. Mantojuma vērtība ļauj jums mantot mātes bloka vērtību. Izmantojot Z-indeksa īpašības un necaurredzamību, mēs padarīsim mūsu attēlus neredzamus. Zemāk mēs skaidri izrakstīt fona attēlus.

Līdz šim mēs neredzēsim tikai pelēku fonu, jo mūsu attēli ir slēpti.

Mēs izrotāt slēdzis pogas

Tagad jums ir nepieciešams, lai noņemtu standarta radio pogas un stilizēt parakstus vietā.

Wrap\u003e ievade (
Displejs: nav;
}

Mēs noņemam radio pogas.

Wrap .control (
Stāvoklis: absolūts;
Margin-left: -50px;
Pa kreisi: 50%;
}

Ar šo stilu palīdzību mēs centīsimies bloku ar pogām centrā.

Wrap etiķete (
Kursors: rādītājs;
Displejs: inline bloks;
Augstums: 25px;
Marža: 10px;
Stāvoklis: radinieks;
Platums: 25px;
Robeža: 2px cietā pelēka;
Robežu rādiuss: 30% / 10px;
}

Šie stili padara ļoti svarīgu lietu - tie ļauj mums izdot pogas. Jums ir nepieciešams iestatīt pogas lielumu, kas paredzēts tiem bloka-mazajiem burtiem, ievilkumiem un pelēko rāmi. Varat arī pievienot noapaļošanas stūriem.

Tagad mums ir trīs pogas, kas centrētas zem slaidiem, tas ir tikai pelēks rāmis. Padarīsim to tā, ka, noklikšķinot uz pogas tajā, parādījās kāds attēls, norādot, ka poga ir aktīva Šis brīdis. Starp citu, to pašu tehniku, tikai ar izvēles rūtiņām, es parādīt šajā rakstā.

Tā kā mēs ieslēgsim auto attēlus, es atklāju stūres ikonu tīklā, samazinot to līdz apmēram 20 līdz 20. Tagad lieta ir gudrs - pievienojiet fona attēlu pogai, ja tā tika noklikšķināta.

# Punkts1: pārbaudīts ~ .control etiķete: nth-of-type (1),
# Punkts2: pārbaudīta ~ .control etiķete: nth-of-type (2),
# Punkts3: pārbaudīts ~ .control etiķete: nth-of-type (3) (
Priekšvēsture: URL (Wheel.png) Atkārtojiet 50% 50%;
}

Tas tiek darīts ar šādiem selektoriem. Ko viņi dara? Būtībā tas ir sarežģīts selektors, tajā ir ierakstīts viss stāvoklis. Tas ir kaut kas līdzīgs programmēšanai. Tā apzīmē šādi: ja ir izvēlēts radio poga, tad jums ir nepieciešams piemērot stilu parakstam, kas iet kaut kur iezīmējumā. Tagad, kad noklikšķināt uz pogām, stūres rata attēls parādās iekšā!

Svarīgākais posms ir piespiežot pārslēgšanos!

Patiesībā, mēs atstājām darīt diezgan mazliet. Proti, lai padarītu vietā pelēko zonu slīdni parādījās attēli ar automašīnām, kas veiksmīgi pārvietots prom. Lai to izdarītu, jums ir nepieciešams piemērot vēl vienu sarežģītus selektorus:

# Punkts1: pārbaudīts ~ .slider\u003e .Auto1,
# Punkts2: pārbaudīts ~ .slider\u003e .Auto2,
# Punkts3: pārbaudīts ~ .slider\u003e .Auto3 (
Necaurredzamība: 1;
Z-indekss: 1;
}

Kas notiek? Tagad, ja jūs mēģināt slīdni darbībā, tas tiks pilnībā apstrādāts. Ar šiem selektoriem mēs norādām: Ja tiek nospiesta radio poga, veiciet vēlamo slaidu, kas atrodas kaut kur uz HTML koda (turpmākās radio pogas).

Tādējādi, noklikšķinot uz pirmās pogas, tas ir parādīts mums BMW automašīnai, noklikšķinot uz otrās - Audi, noklikšķinot uz trešās - Porshe. Un visu šo laiku, pārslēdzot, stūres ikona parādās šajā pogā, slaids ir aktīvs.

Tātad, mēs izveidojām slīdni. Tas joprojām ir jāpielāgo.

Mēs pielāgojam slīdni, skatoties uz mobilajām ierīcēm

Kamēr mūsu slīdni ir fiksēts platums 600 pikseļu. Attiecīgi, problēmas sāks rasties uz ekrāniem mazāk par šo platumu. Jo īpaši parādīsies horizontālā ritināšanas josla. Lai to novērstu, mums ir mazliet pielāgot rakstisko kodu. Tas ir tas, kas jums jāmaina:

Par WRAP bloku, tas ir, galvenais konteiners nav platums, bet max-platums: 600px. Tas ļaus konteineram sarukt, ja logs kļūst mazāks platumā.
Slīdni (slīdni) Ir nepieciešams reģistrēt platumu: 100%;
Slideša (slaidi) neko nemaina.

Kopējās izmaiņas var redzēt šajā kodeksā:

Ietīšana (". \\ T
Maksimālais platums: 600px;
}
.Slider (
Platums: 100%;
}

Lieliski, tagad paliek reģistrēt pāris multivides pieprasījumus, lai padarītu slīdni pilnībā adaptīvā, kā arī mēroga attēlus jauniem ekrāniem. Eksperimentāls, es atklāju, ka slaidu attēls sāk uzstādīt uz ekrāna par platumu loga 600 pikseļu. Tātad, par šo zemes gabalu un jums ir nepieciešams veikt izmaiņas stilā. Lai to izdarītu, rakstiet pirmo mediju pieprasījumu.

Starp citu, es rakstīju detalizēti par mediju vaicājumiem un to piemērošanu šajā rakstā. Es ieteiktu jums iepazīties ar to ar to, kam nav ne jausmas par adaptīvo dizainu.

Attiecīgi, līdz 650 pikseļu platumam un mazāk viss tika parādīts labi, es piedāvāju šādu izmaiņu stilu:

@Media ekrāns un (max-platums: 650px) (
.wrap (
Maksimālais platums: 480px;
Augstums: 280px;
}
.slides (
Fona lielums: vāks;
}
}

Slīdņa platums samazināsies, augstums samazināsies arī. Par slaidiem paši, mēs parakstījām īpašumu, kas skala attēlus, lai viņi saglabātu savu proporciju pilnībā ievietots slīdni bez griešanas tajā pašā laikā.

Lielisks, tagad jūs varat pārbaudīt un pārliecināties, ka ar platumu mazāk nekā 650 pikseļi, slīdnis tiek pārveidots un izskatās labi, nesagriežot attēlu.

Pēdējais punkts ir aptuveni 400 pikseļu platums. Par to, mūsu attēls sākas, lai nenotiek un jārīkojas. Lai to izdarītu, es uzrakstīšu citu mediju pieprasījumu:

@Media ekrāns un (max-platums: 400px) (
.wrap (
Maksimālais platums: 320px;
Augstums: 180px;
}
.slides (
Fona lielums: vāks;
}
}

Tas pats, tikai atkārtoti samazināt platumu un augstumu konteinera. Lielisks, tagad mūsu slīdnis ir pilnībā adaptīvs! Pat uz mobilais telefons Ar 320 pikseļu platumu viņš izskatīsies lieliski. Tomēr skatiet sevi:

Pateicoties plašsaziņas līdzekļu pieprasījumiem, attēli ir proporcionāli, lai samazinātu to proporcijas.

Kad pārejas pievienojiet slīdņa efektus

Nu, bonuss šajā rakstā jūs varat redzēt pāris efektus, kurus var īstenot, kad jūs virzīt uz blokiem. Tātad, tas ir pietiekami, lai izvēlētos kādu no tiem, un rakstīt to slaidi (.slides), un, kad parādās attēls, atceļ efektu efektu. Lai redzētu rezultātu, jums ir jānosaka pārejas īpašuma slaidi, lai pārejas būtu gluda. Piemērs efekts:

Slaidi (
Pārveidojums: pagriezt (50deg);
Pāreja: 1s;
}

Tagad diezgan selektors, kas padara slaidu redzamu, reģistrēt transformācijas anulēšanu:

# Punkts1: pārbaudīts ~ .slider\u003e .auto1 (
Pārveidot: nav;
}

Un tā darīt visiem slaidiem. Attiecīgi, sākotnēji attēls tiks pagriezts un būs neredzams, un, kad tas parādās, vienmērīgas atgriešanās ietekme uz sākotnējā pozīcija. Attiecīgi jūs varat nākt klajā ar savu ietekmi. Nu, mēs darījām slīdni, man tas viss ir viss. Ja jums ir jautājumi, gaidot komentārus.

Papildinājums - kā to izdarīt tā, ka, noklikšķinot uz slaida, pāreja piesaistīta slaidu saitei?

Citiem vārdiem sakot, mēs esam tikai attēli tagad un kā padarīt tos noklikšķinām. Lai to izdarītu, jums ir jābūt gatavam slīdni šajā nodarbībā. Tālāk jums ir jāatrod gabals HTML kodā, kas ir atbildīgs par slaidiem. Šeit tas ir ekrānuzņēmums:

Kā redzat, es ievietoju pirmo un otro slaidu saiti. Tātad, noklikšķinot uz pirmā slaida, pāreja uz Google notiks, noklikšķinot uz otrās - uz Yandex. Es vēlos atzīmēt, ka saite būs atvērta tajā pašā logā, tas ir, pašreizējā lapa ar slīdni izzudīs šajā gadījumā. Ja jums ir nepieciešams atvērt saites no slaidiem jaunā logā, katrs marķējums Jums jāpievieno atribūtu mērķi. \u003d "_Blank".

Bet tas vēl nav viss, kas jums jādara! Tagad tas nedarbojas vēl, lai attēli būtu kļuvuši noklikšķināti, jums ir jāpievieno CSS, kas ir tas, ko:

Slaidi a
Displejs: bloks;
Platums: 100%;
Augstums: 100%;
}

Tas ir, visiem slaidiem, mēs izveidojam saiti uz bloka elementu, un norāda uz to platumu un augstumu 100%, lai tas aizņem visu attēla telpu. Tagad viss ir jāstrādā, varat pārbaudīt. Vienkārši aizstājiet adreses saitēs un varat izmantot. Es ceru, ka es skaidrāk izskaidroju, cik vien iespējams.

Jūsu uzmanības paaugstināšana: Mēs visi vēlamies ievietot savas vietnes uz uzticamu hostingu. Es analizēju simtiem hostinga un atrada labāko - Hostiq. Tīklā simtiem pozitīvas atsauksmes Par viņu, vidējais lietošanas vērtējums - 4,8 no 5. Ļaujiet jūsu vietnēm ir labi.