Share
În cursul meu, Optimizați-vă site-ul fără AMP, v-am arătat în detaliu cum să optimizați site-ul dvs. pentru performanțe rapide fără folosind AMP-ul Google.
În acest videoclip de la curs, veți învăța cum să creați o componentă populară - un carusel de tweets revolving - utilizând scriptul Siema ușor. Tehnicile pe care le veți învăța vă vor ajuta să obțineți performanțe excelente fără a utiliza AMP.
Acest videoclip preia lecțiile anterioare din curs, în care am creat un site web cu trei tweete încorporate în partea de jos a paginii. Puteți găsi codul sursă complet pentru proiect pe GitHub. În această lecție, vom transforma aceste trei tweets într-un carusel.
În versiunea AMP a site - ului nostru, care a fost făcută cu amp-carusel personalizat element. În schimb, vom folosi un scenariu mic, numit Siema.
Siema bifează toate cutiile pe care le căutăm cu scripturile noastre:
Am adăugat deja Siema la scriptul nostru index.min.js mai devreme când am creat fișierul nostru și acesta a fost deja încărcat în fișierul nostru pagecontent.html, deci este gata să îl folosim.
Tot ce trebuie să facem este să adăugăm un mic cod pagecontent.html pentru a activa scriptul nostru.
const mySiema = newSiema (selector: '.slides');
Imaginea de mai jos arată unde se introduce:
Ceea ce facem aici este crearea unei constante și numirea acesteia mySiema. Am stabilit acea constantă egală cu o nouă instanță a lui Siema și apoi adăugăm un obiect cu câțiva parametri.
În interiorul parantezelor curbate, adăugăm selectorul proprietății și numim selectorul pe care Siema ar trebui să-l caute pentru a face un carusel din copiii săi. Anterior am adăugat clasa .slide-uri conținând tweets, deci dacă țintim acest lucru cu Siema, va lua fiecare din cele două tweets și o transformă într-un diapozitiv care este în caruselul nostru.
Dacă verificați site-ul acum, ar trebui să vedeți primul tweet afișat ca diapozitiv.
Nu afișează însă ceilalți, pentru că trebuie să adăugăm un mic cod suplimentar pentru a face caruselul auto-play.
Pentru a face carusel auto-play, trebuie să ne modificăm codul după cum urmează:
const mySiema = newSiema (selector: '.slides', bucla: true); setInterval (() => mySiema.next (), 4000)
Ceea ce facem aici este să-i spunem lui Siema cât timp trebuie să aștepte între fiecare diapozitiv. Deci, pe ultima linie, am setat intervalul cu setInterval, și apoi restul acelei linii îi spune lui Siema că vrem ca intervalul dintre fiecare diapozitiv să fie de 4.000 milisecunde sau 4 secunde.
În timp ce ne aflăm la el, trebuie să-i spunem și lui Siema că vrem să se încrucișeze. Așa că facem asta cu linia buclă: adevărat.
Acum, caruselul va trece automat de la un diapozitiv la altul, așteptând patru secunde între ele, iar apoi va reveni la început.
Există încă un alt lucru care lipsește și sunt niște butoane mici pe care le putem folosi pentru a merge manual sau înapoi în caruselul nostru.
Deci, pentru a configura butoanele noastre, primul lucru pe care trebuie să-l facem este să adăugați un mic HTML suplimentar în același fișier. Adăugați următorul fragment în interiorul twitter-carusel div, dar în afara slide-uri div, pentru că nu vrem ca Siema să trateze aceste butoane ca diapozitive care trebuie introduse în carusel.
Acest cod adaugă pur și simplu două forme SVG: un triunghi mic care indică spre stânga și un mic triunghi care indică spre dreapta.
Pentru că nu trebuie să încărcăm o imagine, asta ne dă un timp de încărcare și mai rapid, iar mărimea fișierului acestui mic cod de comandă pentru a configura o formă SVG este incredibil de mică.
Puteți vedea că avem numele de clasă prev pe primul dintre butoanele noastre și apoi Următor → pe cea de-a doua. Și acestea sunt clasele pe care le vom viza cu Siema, spunându-le să le trateze butoanele ca butoanele înainte și înapoi pentru carusel.
Vom folosi un mic JavaScript pentru a găsi acele elemente din codul nostru. Aici ați fi fost obișnuiți să lucrați cu jQuery, dar, desigur, evităm să folosim jQuery pe site-ul nostru, astfel încât să nu avem codul suplimentar de încărcat. În schimb, vom modifica codul prin adăugând două linii noi, astfel încât să pară următoarele:
În acest cod, adăugăm un selector de interogări pentru document și apoi specificăm selectorul pe care dorim să îl căutăm, care este clasa prev. Apoi adăugăm un ascultător al evenimentului și evenimentul pe care dorim să-l ascultăm este clic.
Deci, când cineva face clic pe butonul din stânga, vom declanșa o acțiune, iar restul liniei stabilește ce comportament are pentru butonul de pe partea stângă.
Apoi, în linia următoare, facem același lucru cu butonul din partea dreaptă, numai de data aceasta înlocuim prev cu Următor →.
Iar acum, dacă verificăm site-ul nostru, putem vedea butoanele anterioare și următoare și dacă le dăm clic pe ele putem trece prin carusel, cu toate acestea vă rugăm.
Acum, există doar un mic cod suplimentar pe care trebuie să-l adăugăm. În curs, am creat o versiune a site-ului pentru persoanele care au JavaScript oprit în browserele lor. Dar chiar acum, dacă dezactivați JavaScript, avem citatele minunate ale blocurilor noastre ca rezervoarele noastre, dar acum avem aceste butoane de navigare inutile.
Așa că putem rezolva asta, mergând la noi noscript.css și adaugă:
.carusel-buton display: nici unul;
Acum, când reîmprospătăm site-ul cu JavaScript dezactivat, putem vedea că am scăpat de acele butoane.
În cursul complet, Optimizați-vă site-ul fără AMP, veți învăța cum să luați un site bazat pe AMP și să-l convertiți pentru a utiliza echivalente non-AMP. Cursul vă va oferi metode utile pentru a face ca site-urile dvs. să fie difuzate rapid, dar cu tehnici de optimizare pe care le decideți pentru dvs..
Puteți lua acest curs imediat cu un abonament la Envato Elements. Pentru o singură taxă lunară redusă, veți avea acces nu numai la acest curs, ci și la biblioteca noastră în creștere de peste 1.000 de cursuri video și cărți electronice de vârf din industria Envato Tuts+.
În plus, beneficiați de descărcări nelimitate din imensa bibliotecă Envato Elements cu 400.000 de active creative. Creează cu fonturi, fotografii, grafică și șabloane unice și oferă proiecte mai bune mai rapid.
Accentsconagua