În proiectele cu care am colaborat, a existat o întâlnire amuzantă. Am avut idei despre modul în care putem face această lucrare utilizând animația CSS și transformarea proprietății, dar ar da un carusel care se derulează automat și nu permite introducerea de către utilizatori a mamei care nu avea nevoie. După un moment de gândire, am luat o decizie care folosește poziționarea absolută și: pseudo-selector țintă pentru a schimba indexul z și opacitatea caruselului nostru pentru a trece prin ele.
Să creăm asta!
Structura caruselului nostru arată astfel: avem div.carousel-wrapper principal, care oferă dimensiunea caruselului. În interiorul cochiliei noastre, avem elemente span.hidden-țintă cu identificatori unici care acționează ca ținte pentru elementele noastre de control cu carusel și elemente div.carusel-item care conțin conținutul fiecărui element carusel.
Fiecare element div.carusel-element va avea conținut și două linkuri, a.arrow-prev și a.arrow-next, pe care le folosim pentru buclă între elementele caruselului.
Deoarece elementele individuale ale caruselului vor fi poziția: absolută (putem să le suprapusem unul pe celălalt), trebuie să setăm manual înălțimea div. Carusel-wrapper. Vom încerca să descărcăm CSS în foaia de stiluri externe, dar unele dintre elementele pe care trebuie să le scriem pentru a face caruselul nostru utilizabil și scalabil.
De asemenea, folosim CSS pentru a seta imaginea de fundal a celor două elemente div.carousel-item pentru a le face mai vii, dar o vom lăsa mai jos, astfel încât marcajul nostru să fie mai ușor de citit.
Acesta este tot HTML-ul. Este surprinzător de ușoară. În CSS (SCSS, în acest caz), acolo se întâmplă magia.
Aveți un carusel complet funcțional și 100% compus din HTML și CSS! Am creat un carusel cu trei elemente, dar puteți continua să adăugați elemente, să vă asigurați că adăugați mai multe elemente vizate și să le conectați corect.
Conversii mari!
ATENȚIE! Utilizați un browser Internet Explorer învechit
Acest site este construit pe tehnologii avansate și moderne și nu suportă versiunile 6 și 7 ale Internet Explorer.
Articole similare
Trimiteți-le prietenilor: