Share
Una dintre caracteristicile foarte bune ale lui Twitter Bootstrap este un carusel glisant plăcut pentru imagini și conținut! Instalarea nu este dificilă. Aceasta necesită o marcare structurată, pluginul Bootstrap jQuery și câteva linii de JavaScript pentru a-l inițializa. Lasă-mă să-ți arăt cum se face!
Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!
Pentru cei care apreciați tutorialele alb-negru, să trecem peste:
Caruselul Bootstrap necesită un model specific de marcare, cu clase corespunzătoare.
‹ ›
Caption text aici
Caption text aici
Caption text aici
Caption text aici
Odată ce am furnizat marcajul, trebuie să inițializăm caruselul JavaScript pentru a-și face munca pe acest carusel.
Să începem prin asigurarea faptului că JavaScript-ul necesar este conectat la această pagină. Veți găsi legăturile dvs. JavaScript în partea de jos a paginii, lângă eticheta corpului de închidere.
Cea mai bună, cea mai recomandată metodă de a lega jQuery este de a vă conecta la o versiune găzduită de CDN. Aceasta oferă o descărcare mai rapidă și poate fi deja stocată în memoria cache în browserul utilizatorului.
Dar, bineînțeles, ar fi frumos să avem un backback, astfel încât, dacă se întâmplă ceva cu acea versiune găzduită de CDN, utilizatorul o poate obține de la propriile fișiere de site-uri. Asta este exact ceea ce oamenii buni de la HTML5 Boilerplate recomanda, și se pare astfel:
Rețineți că prima linie ajunge la versiunea găzduită de Google. A doua linie utilizează JavaScript pentru a verifica dacă prima linie și-a făcut treaba. Dacă nu, acesta generează automat un link către propria dvs. copie găzduită de jQuery, pe care ați inclus-o în propriile fișiere de site-uri (așa cum am aici).
Odată ce am legat jQuery, avem nevoie de pluginurile Bootstrap jQuery. Am inclus versiunea completă și minimalizată a tuturor pluginurilor Bootstrap. Astfel, link-ul meu arată astfel:
Odată ce am furnizat pluginurile jQuery plus Bootstrap, trebuie doar să inițializăm pluginul Carousel pentru a face munca pe caruselul nostru.
În limba engleză, aceasta înseamnă: Odată ce documentul HTML este gata, identificați elementul (ele) cu o clasă de "carusel", și direcționați pluginul carusel pentru a-și face treaba.
Odată ce marcajul este în vigoare și JavaScript a fost furnizat corect, ar trebui să puteți reîmprospăta browserul și să vedeți rezultatele. Fiecare rotație a imaginii durează cinci secunde. Asigurați-vă că mouse-ul nu se deplasează peste prezentarea de diapozitive, deoarece aceasta își întrerupe temporizatorul.
Puteți adăuga parametri pentru a regla timpul dintre comportamentul de alunecare carusel.
De exemplu, puteți schimba intervalul de timp la intervale de 2 secunde (2.000 milisecunde) după cum urmează:
În marcajul pentru Pasul 1, de mai sus, am folosit imaginile Placehold.it. Rețineți că imaginile de lățime de 1200 de pixeli sunt suficient de mari pentru a întinde lățimea maximă maximă a site-ului standard Bootstrap. Am folosit un raport de 1200x480px pur și simplu pentru că mi se pare plăcut vizual - cel puțin pe monitorul meu mare!
În acest moment sunteți liberi să:
Întotdeauna amintiți-vă, în timp ce încercați lucrurile și tweak-le, documentația excelentă a lui Twitter Bootstrap este prietenul tău. Și dacă puteți utiliza ajutor suplimentar, o mulțime de oameni găsesc ajutor în Grupul Google Bootstrap Twitter.
Uitați-vă la rezultatul final.
Accentsconagua
