În acest tutorial vom face un slider CSS3 grozav. Va folosi un efect de estompare între diapozitive. În plus, puteți folosi o descriere pentru fiecare imagine. O listă neordonată va fi folosită pentru a organiza informațiile. Diapozitivele se vor comuta automat folosind animații CSS3.

Marcajul HTML este foarte simplu. Exemplul are patru diapozitive. Fiecare constă dintr-o imagine (ca fundal) și text de descriere într-un element div. Este foarte ușor să introduceți diapozitive suplimentare.

• Descrierea #1
• Descrierea #2
• Descrierea #3
• Descrierea #4

Glisorul folosește animații CSS3 anim_slides și anim_titles . Primul este folosit pentru diapozitive individuale, al doilea pentru text de descriere. Poziția și transparența se schimbă și pentru descriere.

/* Slider */ .slides (înălțime:300px; margine:50px automat; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Cadre de animație # anim_slides */ @-webkit-keyframes anim_slides ( 0% ( opacitate:0; ) 6% ( opacitate:1; ) 24% ( opacitate:1; ) 30% ( opacitate:0; ) 100% ( opacitate:0; ) ) @-moz-keyframes anim_slides ( 0% ( opacitate: 0; ) 6% ( opacitate: 1; ) 24% ( opacitate: 1; ) 30% ( opacitate: 0; ) 100% ( opacitate: 0; ) ) . slides ul li ( opacitate: 0; poziție: absolut; top: 0; /* animație css3 */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: -webkit-animation-iterare: -webkit-animation-state: -moz-animation-slides; 24.0s -moz-animation-functie-timing: liniar; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: alergare; -moz-animation-fill-mode: înainte; ) /* css3 delays */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0 s; ) .slides ul li:nth-child(3), .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) . slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; ) .slides ul li img ( display:block; ) /* Cadre de animație #anim_titles */ @-webkit-keyframes anim_titles ( 0% ( stânga:100%; opacitate:0; ) 5% ( stânga:10%; opacitate:1; ) 20% ( stânga:10%; opacitate:1; ) 25% ( stânga:100%; opacitate:0; ) 100% ( stânga:100%; opacitate:0; ) ) @-moz-keyframes anim_titles ( stânga:100 %; opacitate: 0; ) 5% ( stânga: 10%; opacitate: 1; ) 20% ( stânga: 10%; opacitate: 1; ) 25% ( stânga: 100%; opacitate: 0; ) :100%; opacitate:0; ) .slides ul li div (culoare de fundal:#000000; bord-radius:10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; culoare:#FFFFFF; dimensiunea fontului: 26px; stânga: 10%; margine:0 auto; umplutură: 20px; poziție: absolut; sus:50%; lățime: 200px; /* Animație Css3 */ -webkit-animation-name: anim_titles; -webkit-animatie-durata: 24.0s; -webkit-animatie-functie-timing: liniar; -webkit-animation-iteration-count: infinit; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: rulare; -webkit-animation-fill-mode: înainte; -moz-animation-name: anim_titles; -moz-animation-durata: 24. 0s; -moz-animation-timing-functie: liniar; -moz-animation-iteration-count: infinit; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: alergare; -moz-animation-fill-mode: înainte; )

4 noiembrie 2019 Postarea a fost actualizată

Yuri Nemets

Glisoarele CSS au câteva avantaje față de glisoarele Javascript. Unul dintre aceste beneficii este viteza de încărcare. Nu numai că imaginile pentru glisoare sunt folosite la dimensiuni mari (dacă nu există optimizare pentru diferite ecrane), dar se petrece ceva timp încărcând script-uri. Dar în articol veți vedea doar glisoare care folosesc CSS pur.

Iată ce am găsit pe un site despre glisoare:

Un glisor CSS care utilizează butoane radio pentru a naviga prin diapozitive. Aceste butoane radio sunt situate sub glisoare. De asemenea, pe lângă butoanele radio, navigarea se realizează cu ajutorul săgeților din stânga și dreapta. Pentru a urmări ce imagine este afișată în prezent, sunt utilizate pseudoclasele :checked.

Spre deosebire de cursorul CSS anterior, aici, în loc de butoanele radio din partea de jos, există miniaturi ale tuturor imaginilor, ceea ce este convenabil și atunci când creați o galerie de imagini. Imaginile se schimbă cu un efect deosebit: dispar ușor atunci când sunt mărite.

Dar acest glisor CSS este perfect pentru paginile de vânzări. De regulă, atunci când dezvoltă pagini de destinație (pagini de vânzare), mulți dezvoltatori web plasează un glisor chiar la început, astfel încât pe primul ecran (fără derulare) vizitatorul să vadă imediat toate beneficiile care îi sunt disponibile pe această pagină. Pe lângă toate, acest glisor este adaptiv, ceea ce este și frumos.

Aș dori să notez imediat că acest glisor nu folosește link-uri! În mod implicit, pe lângă imaginea principală (diapozitiv), sunt vizibile încă 2 diapozitive. Sunt situate în spatele celui principal. Schimbarea diapozitivelor are loc într-un mod frumos: mai întâi, două diapozitive sunt depărtate și diapozitivul care va deveni apoi cel principal devine centrat. Toboganul este apoi mărit și plasat în fața celorlalți.

Un alt glisor adaptiv, al cărui control se bazează pe butoane radio. Pentru a vedea cum va arăta acest glisor pe diferite dispozitive, puteți fie să schimbați singur fereastra browserului, fie pe pagina cu glisorul există pictograme speciale pentru diferite dispozitive, făcând clic pe care veți vedea cum va arăta glisorul pe un computer , tabletă sau smartphone.

Pe lângă toate glisoarele prezentate mai sus, vreau să vă mulțumesc cu încă unul. Acest glisor este perfect pentru a crea o galerie de imagini. Nu puteți explica în cuvinte ce face, așa că este mai bine să urmăriți totul în videoclip:

Folosind glisoare, puteți proiecta frumos galerii de imagini, plasându-le mai compact, introduceți un glisor în primul ecran (partea paginii care este vizibilă fără derulare) a paginii de vânzări pentru a arăta imediat vizitatorului principalele beneficii pe care le va primi. . Puteți găsi în continuare o mulțime de moduri în care și cum puteți utiliza glisoarele, dar un lucru este clar - sunt utile atunci când sunt utilizate corect.

Puncte care au fost discutate în articol.

Bun venit din nou pe blogul meu. Astăzi, în CSS, datorită noilor selectori, este posibil să creați un glisor fără scripturi. Deci, în acest articol, vă voi arăta cum să faceți un glisor receptiv în css3?

Așadar, astăzi vă voi arăta în detaliu cum să vă creați propriul slider fără scripturi, să îl adaptați la orice dispozitiv și să-i schimbați cu ușurință aspectul în viitor, precum și să adăugați noi diapozitive. Vom face doar 3 slide-uri, care vor fi comutate manual atunci când dați clic pe butoane. Ei bine, să începem!

În primul rând, trebuie să înțelegeți care va fi marcajul. În această captură de ecran puteți vedea exemplul meu de marcare, la care voi lucra astăzi.
De asemenea, voi duplica toate acestea în cod, astfel încât să le puteți copia și lipi pentru dvs.
Primul pas este crearea butoanelor comutatoare cu glisare. Deoarece vor exista trei slide-uri, este nevoie de același număr de butoane:

Fiecare primește propriul său identificator unic și unul este selectat implicit.

Ultima bucată de cod de care avem nevoie. Afișează etichete pentru butoane, dar de fapt le folosim pentru a ascunde butoanele implicite (butoanele radio nu sunt stilizate) și în schimb punem aceste blocuri de etichete care pot fi stilate. Acestea vor servi ca butoane de comutare, iar conexiunea cu butoanele radio se face printr-un atribut special pentru.

Și acum, tot acest cod trebuie să fie împachetat într-un singur container comun. Să fie acesta un bloc cu clasa wrap.

Deci, pentru început, vom seta stiluri generale care vor ajuta la resetarea tuturor umpluturilor implicite și, în același timp, ne asigurăm că umplutura internă și chenarele sunt luate în considerare în lățimea elementelor. Acest lucru se face astfel:

* {
marja: 0;
umplutură: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
dimensionare cutie: chenar-cutie;
}

Apropo, * înseamnă toți selectorii. Adică un astfel de selector universal și global.

Aranjam containerul. Este blocul în sine, care conține toate cele 3 părți importante ale noastre - butoane, diapozitive și legende.

Înfășurare (
înălțime: 350px;
marja: 0 auto;
poziție: relativă;
latime: 600px;
}

Puteți seta ORICE lățime și înălțime, în funcție de dimensiunea fotografiilor dvs. pentru diapozitive. Am decupat fotografiile în prealabil la dimensiuni de 600 pe 350 pixeli, motiv pentru care indic aceste dimensiuni. Marja: 0 automat va alinia containerul exact în centrul paginii, iar poziționarea relativă va permite ca butoanele să fie plasate cu precizie în interiorul containerului însuși ulterior.

În primul rând, iată stilurile:

Glisor (
culoare de fundal: #999;
înălțime: moștenire;
preaplin: ascuns;
poziție: relativă;
lățime: moștenire;
}

Să dăm cursorului aceeași lățime și înălțime ca și containerul general. Specificăm, de asemenea, culoarea și poziționarea, precum și overflow: proprietatea ascunsă taie tot ceea ce nu cade în bloc.

Următorul lucru pe care trebuie să-l faceți este să proiectați diapozitivele în sine:

Slide-uri (
înălțime: moștenire;
opacitate: 0;
poziție: absolută;
lățime: moștenire;
indicele z: 0;
}
.auto1 ( imagine de fundal: url(bmw.jpg); )
.auto2 ( imagine de fundal: url(audi.jpg); )
.auto3 ( imagine de fundal: url(porshe.jpg); )

Specificăm și lățimea și înălțimea ca pentru slide. Valoarea de moștenire vă permite să moșteniți valoarea blocului părinte. Folosind proprietățile z-index și opacitate, vom face imaginile noastre invizibile. Mai jos indicăm clar imaginile de fundal.

Deocamdată nu vom vedea nimic, doar un fundal gri, pentru că imaginile noastre sunt ascunse.

Acum trebuie să eliminăm butoanele radio standard și să stilizăm în schimb legendele.

Wrap > input (
afișaj: niciunul;
}

Eliminarea butoanelor radio.

Wrap .control (
poziție: absolută;
margine-stânga: -50px;
stânga: 50%;
}

Folosind aceste stiluri vom centra blocul cu butoanele.

Înfășurați eticheta (
cursor: pointer;
display: inline-block;
înălțime: 25px;
marja: 10px;
poziție: relativă;
latime: 25px;
chenar: 2px gri solid;
chenar-rază: 30%/10px;
}

Aceste stiluri fac un lucru foarte important - ne permit să stilăm butoanele. Trebuie să setați dimensiunile butoanelor, să setați tipul de linie de blocare, căptușeala și chenarul gri. De asemenea, puteți adăuga colțuri rotunjite.

Acum avem trei butoane centrate sub diapozitive, sunt doar margini gri. Să ne asigurăm că atunci când dai clic pe un buton, apare o imagine în el, care indică faptul că butonul este activ în prezent. Apropo, arăt aceeași tehnică, doar cu casete de selectare, în acest articol.

Deoarece tu și cu mine schimbăm imaginile cu mașini, am găsit o pictogramă pe volan pe Internet, am redus-o la aproximativ 20 cu 20 de dimensiuni.

#point1:verificat ~ .control label:nth-of-type(1),
#point2:verificat ~ .control label:nth-of-type(2),
#point3:verificat ~ .control label:nth-of-type(3) (
fundal: url(wheel.png) no-repeat 50% 50%;
}

Acest lucru se face folosind selectoare ca acestea. Ce fac ei? De fapt, acesta este un selector complex, o întreagă condiție este scrisă în el. Este un pic ca programarea. Înseamnă următoarele: dacă butonul radio este selectat, atunci trebuie să aplicați stilul legendei, care merge undeva mai departe în marcaj. Acum, când dai clic pe butoane, în interiorul lor apare o imagine a unui volan!

De fapt, mai avem doar puțin de făcut. Și anume, asigură-te că în locul zonei gri din glisor apar imagini cu mașini care pot fi derulate cu succes. Pentru a face acest lucru, trebuie să utilizați alți selectori complexi:

#point1:verificat ~ .slider > .auto1,
#point2:verificat ~ .slider > .auto2,
#point3:verificat ~ .slider > .auto3 (
opacitate: 1;
indicele z: 1;
}

Ce se întâmplă? Acum, dacă încercați glisorul în acțiune, acesta va fi pe deplin funcțional. Cu aceste selectoare indicăm următoarele: dacă este apăsat un buton radio, faceți vizibil slide-ul dorit, care se află undeva mai departe în codul html (în spatele butoanelor radio).

Astfel, când facem clic pe primul buton, ni se arată o mașină BMW, când facem clic pe al doilea - un Audi, când facem clic pe al treilea - un Porshe. Și în tot acest timp, la comutare, pictograma volanului apare în butonul pentru care slide-ul este activ.

Așa că am făcut un glisor. Tot ce rămâne este să-l adaptăm.

Deocamdată, glisorul nostru are o lățime fixă ​​de 600 de pixeli. În consecință, vor începe să apară probleme pe ecranele mai mici decât această lățime. Mai exact, va apărea o bară de defilare orizontală. Pentru a evita acest lucru, trebuie doar să modificăm ușor codul deja scris. Iată ce trebuie schimbat:

În total, toate modificările pot fi văzute în acest cod:

Wrap(
lățime maximă: 600px;
}
.slider(
latime: 100%;
}

Grozav, acum tot ce rămâne este să scrieți câteva interogări media pentru a face glisorul să răspundă complet, precum și să scalați imaginile pentru a se potrivi noilor ecrane. Prin experimentare, am aflat că imaginea diapozitivului începe să nu se potrivească pe ecran la aproximativ o lățime a ferestrei de 600 de pixeli. Asta înseamnă că în jurul acestei zone trebuie să faci o schimbare de stiluri. Pentru a face acest lucru, să scriem prima interogare media.

Apropo, am scris în detaliu despre interogările media și aplicarea lor în acest articol. Îi sfătuiesc pe cei care habar n-au despre designul responsive să-l citească.

În consecință, pentru ca totul să fie afișat bine la o lățime de 650 de pixeli sau mai puțin, sugerez următoarea schimbare de stil:

Ecran @media și (lățime maximă: 650 px)(
.wrap(
lățime maximă: 480px;
înălțime: 280px;
}
.diapozitive(
dimensiunea fundalului: coperta;
}
}

Lățimea glisorului în sine va scădea, iar înălțimea va scădea. Pentru diapozitivele în sine, am scris o proprietate care scala imaginile, astfel încât acestea, menținându-și proporțiile, să se încadreze complet în glisor fără a fi decupate.

Grozav, acum puteți testa și vă asigurați că atunci când lățimea este mai mică de 650 de pixeli, glisorul se transformă și arată bine fără a tăia imaginea.

Ultimul punct are o lățime de aproximativ 400 de pixeli. Pe ea, imaginea noastră începe din nou să nu se potrivească și trebuie să luăm măsuri. Pentru a face acest lucru, voi scrie o altă interogare media:

Ecran @media și (lățime maximă: 400px)(
.wrap(
lățime maximă: 320px;
înălțime: 180px;
}
.diapozitive(
dimensiunea fundalului: coperta;
}
}

Totul este la fel, doar că reducem din nou lățimea și înălțimea containerului. Grozav, glisorul nostru este acum pe deplin receptiv! Chiar și pe un telefon mobil cu o lățime de 320px va arăta grozav. Cu toate acestea, vedeți singur:

Datorită interogărilor media, imaginile sunt reduse proporțional, păstrându-și proporțiile.

Ei bine, un bonus În acest articol puteți vedea câteva efecte care pot fi implementate atunci când treceți cu mouse-ul peste blocuri. Deci, trebuie doar să selectați oricare dintre ele și să-l atribuiți diapozitivelor (.slides), iar când apare imaginea, anulați efectul. Pentru a vedea rezultatul, trebuie să setați proprietatea de tranziție la diapozitive, astfel încât tranzițiile să fie netede. Exemplu de efect:

Slide-uri(
transformare: rotire(50deg);
tranziție: 1s;
}

Acum este suficient ca selectorul care face diapozitivul vizibil să anuleze transformarea:

#point1:verificat ~ .slider > .auto1(
transforma: nici unul;
}

Și faceți asta pentru toate diapozitivele. În consecință, inițial imaginea va fi rotită și invizibilă, iar atunci când apare, va avea loc efectul unei reveniri line la poziția inițială. În consecință, puteți veni cu propriile efecte. Ei bine, am făcut glisorul, asta e tot pentru mine. Dacă aveți întrebări, vă aștept în comentarii.

Cu alte cuvinte, acum avem doar imagini, dar cum le putem face clic pe acestea? Pentru a face acest lucru, ar trebui să aveți deja un glisor gata făcut pentru această lecție. Apoi, trebuie să găsiți piesa în codul html care este responsabilă pentru slide-urile în sine. Iată-l în captură de ecran:

După cum puteți vedea, am inserat link-uri în primul și al doilea slide. Deci, când faceți clic pe primul slide, veți merge la Google, când faceți clic pe al doilea, veți merge la Yandex. Aș dori să remarc că linkul se va deschide în aceeași fereastră, adică pagina curentă cu glisor va dispărea în acest caz. Dacă trebuie să deschideți linkuri din diapozitive într-o fereastră nouă, în fiecare etichetă trebuie să adăugați atributul target = "_blank".