Î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.

Marcaj HTML

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

CSS

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.

/* Glisor */ .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: liniar; -număr-iterație-animație-webkit: infinit; -direcție-animație-webkit: normal; -întârziere-animație-webkit: 0; -stare-play-animație-webkit: rulează; -mod-de-umplere-webkit-animație : înainte; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinit; -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 ( 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; ) ) .slides ul li div (culoare fundal:#000000; rază-chenar:10px 10px 10px 10px; umbră casetă: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-animatie-directie: 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; -functie-moz-animation-timing: 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

Glisoare CSS pure + glisor bonus

Glisoarele CSS au câteva avantaje față de glisoarele Javascript. Unul dintre aceste avantaje este viteza de încărcare. Nu numai imaginile pentru glisoare sunt folosite la dimensiuni mari (dacă nu există o optimizare pentru diferite ecrane), este nevoie și de ceva timp pentru a încărca scripturile. Dar în articol veți vedea doar glisoare care folosesc CSS pur.

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

1. Glisor de imagine CSS3

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.

2. Glisor de imagine CSS3 cu miniaturi

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.

3. Galerie cu CSS

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.

4. Glisor CSS fără linkuri

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.

5. Slider CSS3 receptiv

O alta glisor adaptiv, al cărui control se bazează pe butoane radio. Pentru a vedea cum va arăta acest glisor diferite dispozitive ah - 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.

***CURSANT BONUS***

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:

Concluzie

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.

Colectare gratuită Slider HTML și CSS exemple de cod: card, comparație, ecran complet, receptiv, simplu, etc. Actualizare a colecției iunie 2018. 7 articole noi.

Cuprins

Articole similare

Despre cod

Un set de ecrane de onboarding în HTML/CSS/JS. Un experiment personal cu stratificarea pictogramelor PNG, tranziții CSS3 și flexbox.

Glisor pentru cardul de informații HTML, CSS și JavaScript.
Realizat de Andy Tran
23 noiembrie 2015

Glisor foto care funcționează pe browsere desktop și mobile.
Fabricat de Taron
29 septembrie 2014

Glisoare de comparație (înainte/după).

Despre cod

Un glisor de comparare a imaginilor simplu și curat, complet receptiv și gata de atingere, realizat cu CSS și jQuery.

Despre cod

Un slider înainte și după cu numai html și css.

Despre cod

Mă joc cu o idee nouă folosind glisorul de imagine înainte/după pe două straturi. Păstrând-o la minim. Păstrând-o vanilie. Like daca este util :)

Vanilla JS, minimal, frumos la arata.
Fabricat de Huw
3 iulie 2017

Despre cod

Un element glisor „ecran divizat” cu JavaScript.

Un mic experiment pentru un glisor înainte și după, totul în interiorul unui SVG. Mascarea face totul destul de simplu. Întrucât este totul SVG, imaginile și subtitrările se scalează frumos împreună. Pluginurile Draggable și ThrowProps de la GreenSock au fost folosite pentru controlul glisorului.
Realizat de Craig Roblewsky
17 aprilie 2017

Utilizează introducerea de interval personalizată pentru glisor.
Fabricat de Dudley Storey
14 octombrie 2016

Slider de comparare a imaginilor receptiv cu HTML, CSS și JavaScript.
Realizat de Ege Görgülü
3 august 2016

Slider de comparare înainte și după video HTML5, CSS3 și JavaScript.
Fabricat de Dudley Storey
24 aprilie 2016

Un glisor la îndemână care poate compara rapid 2 imagini, alimentat de CSS3 și jQuery.
Realizat de CodyHouse
15 septembrie 2014

Glisoare pe ecran complet

Despre cod

Glisor simplu bazat pe intrări radio. 100% pur HTML + CSS. Funcționează și cu tastele săgeți.

Reactiv: da

Dependente: -

Despre cod

Efect de tranziție plăcut pentru glisorul pe ecran complet.

Despre cod

Glisor de alunecare paralaxă orizontală cu Swiper.js.

Despre cod

Glisor neted de perspectivă 3D la mișcarea mouse-ului.

Glisor pentru imaginea eroului pe ecran complet (temă de glisare cu panouri) cu HTML, CSS și JavaScript.
Realizat de Tobias Bogliolo
25 iunie 2017

Un lucru de interacțiune cu glisorul care utilizează efectele de viteză și viteză (UI Pack) pentru a îmbunătăți animația. Animația este declanșată prin tastele săgeți, clic de navigare sau jack de defilare. Această versiune include chenare ca parte a interacțiunii.
Realizat de Stephen Scaff
11 mai 2017

Glisor simplu într-un stil minimal pentru a evidenția imaginile. O parte din imagine apare pe fiecare diapozitiv.
Realizat de Nathan Taylor
22 ianuarie 2017

Lucrul este destul de ușor de personalizat. Puteți schimba în siguranță fontul, dimensiunea fontului, culoarea fontului, viteza animației. Prima literă a unui șir nou din matrice în JS va apărea pe un nou diapozitiv. Ușor să creați (sau să ștergeți) un nou diapozitiv: 1. Adăugați un oraș nou în matrice în JS. 2. Schimbați variabila numărul de diapozitive și puneți o nouă imagine în lista scss în CSS.
Realizat de Ruslan Pivovarov
8 octombrie 2016

1. Clip-Tras pentru mascarea imaginii chenar dreptunghi (numai pentru webkit).
2. Mod de amestecare pentru această mască.
3. Sistem de culoare inteligent, puneți doar numele și valoarea culorii dvs. în harta sass și apoi adăugați clasa adecvată cu acest nume de culoare elementelor și totul va funcționa!
4. Meniul lateral de credite cool (faceți clic pe butonul mic din centrul demo-ului).
5. Vanilla js cu doar< 200 lines of code (basically it’s just adds/removes classes).

Realizat de Nikolay Talanov
7 octombrie 2016

Acest glisor deformat cu defilare bazată pe JS și CSS pur (fără biblioteci).
Realizat de Victor Belozyorov
3 septembrie 2016

O animație slider cu design Pokemon.
Realizat de Pham Mikun
18 august 2016

Slider HTML, CSS și JavaScritp cu animație complexă și text în unghi semicolorat.
Realizat de Ruslan Pivovarov
13 iulie 2016

Efect de paralaxă al glisorului cu HTML, CSS și JavaScript.
Realizat de Manuel Madeira
28 iunie 2016

Slider HTML, CSS și JavaScript cu efect de ondulare.
Realizat de Pedro Castro
21 mai 2016

Slider de dezvăluire a traseului de clipuri cu HTML, CSS și JavaScript.
Realizat de Nikolay Talanov
16 mai 2016

GSAP + glisor Slick cu previzualizare a diapozitivelor anterioare/următoare.
Realizat de Karlo Videk
27 aprilie 2016

Slider de pagină completă HTML, CSS și JavaScript.
Realizat de Joseph Martucci
28 februarie 2016

Prototip complet de glisor cu HTML, CSS și JavaScript.
Realizat de Gluber Sampaio
6 ianuarie 2016

O prezentare de diapozitive pe ecran complet, un fel de receptivă, animată cu Greensocks TweenLite/Tweenmax.
Fabricat de Arden
12 decembrie 2015

Fabricat de Arden
5 decembrie 2015

Glisor pe ecran complet (cronologie GSAP) #1 cu HTML, CSS și JavaScript.
Realizat de Diaco M.Lotfollahi
23 noiembrie 2015

Slider HTML și CSS cu efecte personalizate.
Realizat de Nikolay Talanov
12 noiembrie 2015

Glisor cu glisare pe ecran complet cu paralaxe cu HTML, CSS și JavaScript.
Realizat de Nikolay Talanov
12 noiembrie 2015

Glisor rotativ Dovada conceptului. Folosește clip-path și o mulțime de matematică.
Fabricat de Tyler Johnson
16 aprilie 2015

Un simplu glisor CSS și jQuery pe ecran complet folosind translateX și translate3d netezime!
Fabricat de Iosif
19 august 2014

Glisoare receptive

Despre cod

Slider opacitate imagini

Glisor de opacitate imagini în HTML și CSS.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Aspect de diapozitive flexibile stivuite

Acest exemplu ilustrează cum să creați un aspect al diapozitivelor stivuite unul pe celălalt (util în special pentru tranzițiile cu fade in/out). Se realizează fără a le seta înălțimea și a evita poziția: absolut; astfel încât sunt complet flexibile și ușor de păstrat în fluxul normal al paginii.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Slider receptiv

Slider animat responsive în HTML, CSS și JavaScript.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependențe: animate.css

Despre cod

Glisor cu text mascat

Glisor numai CSS cu text mascat.

Browsere compatibile: Chrome, Edge (parțial), Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Imagine și conținut cu efect de paralaxă.

Despre cod

Galerie de diapozitive numai CSS.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre cod

Slider pur HTML/CSS

Glisor pur HTML/CSS cu bară de progres SVG circulară.

Browsere compatibile: Chrome, Edge (parțial), Firefox (parțial), Opera, Safari

Reactiv: da

Dependențe: font-awesome.css

Despre cod

Un experiment pentru a crea un glisor vertical complet receptiv, cu miniaturi folosind numai CSS și păstrând raportul de aspect al imaginilor.

Despre cod

Un glisor/carusel de imagine Flexbox simplu realizat cu JavaScript vanilla.

Despre cod

Acesta este un experiment care simulează un efect de estompare a mișcării de fiecare dată când comutați un diapozitiv. Profită de filtrul SVG Gaussian Blur și de unele animații de cadre cheie CSS. Deși efectul nu necesită Javascript pentru a funcționa corect, în acest exemplu Javascript este folosit doar pentru funcționalitatea glisorului.

Despre cod

Cool animat slider cu JS.

Despre cod

Acesta este un experiment despre modul în care modelele SVG ne pot ajuta să creăm imagini asemănătoare mascate pentru un glisor de imagine numai CSS.

Explorarea unor tranziții de glisor. Glisor cu glisare cu opțiunea de paralaxă activată. Te joci cu filtre CSS mai ales aici.
Realizat de Mirko Zorić
12 iunie 2017

Glisor simplu GSAP cu câteva animații subtile de interpolare.
Realizat de Goran Vrban
9 iunie 2017

Slider UI cu HTML, CSS și JavaScript.
Realizat de Mergim Ujkani
6 iunie 2017

Slider GSAP versiunea 2.
Realizat de Em An
4 mai 2017

Un mic glisor de tranziție delicat folosind o simplă ofertă de adăugare a clasei. Trebuie să netezi puțin timpii și să decizi cea mai bună abordare pentru mobil(doar stivuiți, adăugați evenimente tactile, faceți imaginile o fereastră de vizualizare completă etc. Acceptă rotița de defilare (scroll jacking), butoanele de navigare și tastele săgeți. Poate crește, de asemenea, conținutul de ambalare pentru a face ca imaginile să umple fereastra de vizualizare în starea lor neanimată, ceea ce este destul de cool de asemenea.
Realizat de Stephen Scaff
3 ianuarie 2017

Cu efect de pârghie CSS chenar-imagine& clip-path pentru a crea un efect de animație de glisor.
Realizat de Emily Hayman
31 decembrie 2016

Mic glisor construit cu flexbox. Oarecum receptiv și poate avea elemente fixe de-a lungul zonei glisorului.
Realizat de Robert
28 noiembrie 2016

Slider canvas HTML, CSS.
Fabricat de Nvagelis
29 octombrie 2016

Slider 3D fluid HTML, CSS și JavaScript.
Realizat de Eduardo Allegrini
19 octombrie 2016

Slider pentru cupcake HTML și CSS cu stropire!
Realizat de Jamie Coulter
14 octombrie 2016

Realizat de mario s maselli
12 octombrie 2016

Explorarea animației UI nr. 2 cu HTML, CSS și JavaScript.
Realizat de mario s maselli
22 septembrie 2016

Explorarea animației UI nr. 3 cu HTML, CSS și JavaScript.
Realizat de mario s maselli
22 septembrie 2016

E-commerce Slider v2.0 cu HTML, CSS și JavaScript.
Realizat de Pedro Castro
17 septembrie 2016

Slider curat HTML, CSS și JavaScript cu fundal curbat.
Realizat de Ruslan Pivovarov
13 septembrie 2016

Explorarea animației UI #1 cu HTML, CSS și JavaScript.
Realizat de mario s maselli
8 septembrie 2016

Bucurați-vă de puterea CSS: în sus și în jos fiecare imagine din mijloc și glisor paginat cu lightbox.
Fabricat de Kseso
15 august 2016

Expunerea dublă este o tehnică fotografică care combină 2 imagini diferite într-o singură imagine.
Realizat de Misaki Nakano
3 august 2016

Glisor folosind clipul de proprietate CSS3.
Realizat de Pedro Castro
1 mai 2016

Glisor CSS receptiv.
Fabricat de geekwen
19 aprilie 2016

Acesta este un experiment simplu cu glisare care afișează cuvinte cu semnificații frumoase care nu pot fi traduse direct. Focus: tipografie elegantă și tranziții simple, dar atrăgătoare.
Realizat de Joe Harry
5 aprilie 2016

Ideea animației este de a schimba valoarea traseului clipului CSS, astfel încât să creați un efect de mascare.
Realizat de Bhakti Al Akbar
31 martie 2016

Glisor cu puncte cu HTML, CSS și JavaScript.
Realizat de Derek Nguyen
16 martie 2016

Glisor cu efect de prismă cu HTML, CSS și JavaScript.
Realizat de Victor
12 martie 2016

Galerie de fundal glisante cu HTML, CSS și JavaScript.
Realizat de Ron Gierlach
30 noiembrie 2015

Soluție de glisare HTML, CSS și JavaScript.
Realizat de Jürgen Genser
30 septembrie 2015

Un glisor de produs alimentat de Sequence.js. Sequence.js - Cadrul de animație CSS receptiv pentru crearea de slidere, prezentări, bannere și alte aplicații bazate pe pași unice.
Realizat de Ian Lunn
15 septembrie 2015

Glisor personalizat cerc mic.
Realizat de Bram de Haan
11 august 2015

Glisor GTA V receptiv cu HTML, CSS și JavaScript.
Realizat de Eduard Mayer
24 ianuarie 2014

Este ca un glisor, dar se rotește cub din motive necunoscute.
Fabricat de Eric Brewer
4 decembrie 2013

Realizat de Hugo DarbyBrown
28 august 2013

Glisoare simple

Glisor de suprapunere a imaginii cu HTML, CSS și JavaScript vanilla.
Fabricat de Yugam
7 iunie 2017

Slider pentru imagini prezentate HTML și CSS.
Realizat de Joshua Hibbert
16 iunie 2016

Glisor de imagine cu mai multe axe

Glisor de imagine cu mai multe axe cu HTML, CSS și JavaScript.
Fabricat de Burak Can
22 iulie 2013

Glisor cub, un mic experiment cu transformări 3d HTML5/CSS3.
Realizat de Ilya K.
26 iunie 2013

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?

Planul lecției

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!

Dispunerea glisorului

Î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 îl primește pe a lui identificator unic, iar 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 drept 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.

Să începem să creăm un glisor - stiluri inițiale pentru pagină

Așadar, 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 lățimea și înălțimea ORICE, în funcție de dimensiunea fotografiilor tale 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.

Proiectarea glisorului și diapozitivelor

Î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 debordarea: 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 Fundal gri, pentru că imaginile noastre sunt ascunse.

Proiectarea butoanelor comutatoare

Acum trebuie să eliminăm butoanele radio standard și să stilizăm 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ă;
lățime: 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ă le setați la tipul de linie bloc, indentări și un chenar gri. De asemenea, puteți adăuga colțuri rotunjite.

Acum avem trei butoane centrate sub slide-uri, sunt doar cadre gri. Să ne asigurăm că atunci când faceți clic pe un buton, apare o imagine în el, care indică faptul că butonul este activ în acest moment. 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 pe 20. Acum, problema mică este să adaugi o imagine de fundal la buton dacă se dă clic pe acesta.

#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!

Cea mai importantă etapă este ca schimbarea să funcționeze!

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.

Adaptarea glisorului pentru vizualizare pe dispozitive mobile

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:

1. Pentru blocul de înfășurare, adică containerul principal, setați nu lățime, ci lățime maximă: 600px. Acest lucru va permite recipientului să se micșoreze pe măsură ce fereastra devine mai mică în lățime.
2. Glisorul trebuie setat la lățime: 100%;
3. Nu schimbam nimic pentru diapozitive.

Î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 telefon mobil cu o latime de 320 pixeli va arata grozav. Cu toate acestea, vedeți singur:

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

Adăugarea de efecte de tranziție la glisor

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.

Adăugare - cum să vă asigurați că atunci când faceți clic pe un diapozitiv, veți urma linkul atașat diapozitivului?

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".

Dar asta nu este tot ce este de făcut! În acest moment, nimic nu funcționează încă, pentru a face clic pe imagini, trebuie să adăugați acest lucru la css:

Diapozitive a(
afisare: bloc;
latime: 100%;
inaltime: 100%;
}

Adică, pentru toate diapozitivele facem din legătură un element bloc și îi setăm lățimea și înălțimea la 100%, astfel încât să ocupe întreg spațiul imaginii. Acum totul ar trebui să funcționeze, îl puteți verifica. Doar înlocuiți adresele din linkuri și le puteți folosi. Sper că am explicat cât se poate de clar.

Un moment al atentiei tale: Cu toții dorim să ne găzduim site-urile web pe găzduire de încredere. Am analizat sute de găzduiri și am găsit cele mai bune - HostIQ Sunt sute online feedback pozitiv despre asta, ratingul mediu al utilizatorilor este de 4,8 din 5. Fie ca site-urile tale să fie bine.