Astăzi vreau să vă spun cum să faceți o bandă spectaculoasă de imagini cu imagini. Arată ca un banner cu un autoswitch. Poate doriți să plasați linkuri către oferte speciale din magazin sau link-uri către postările recente? Indiferent ce a fost, vă voi învăța cum să faceți asta. Este foarte ușor.
Ce avem nevoie
Și asta e tot. În cazul în care pentru a obține jQuery cred că toată lumea știe. Și jcarousel Lite, vă conduc. Am căutat un plugin care să mă permită să fac un astfel de efect rapid și fără probleme, fără cantități uriașe de cod și înțelepciune delicată. Și l-am găsit și sunt foarte mulțumit de asta. De fapt, scriu acest post și pentru mine, ca marcaj, să vă uit aici când data viitoare trebuie să faceți o galerie de imagini cu autoscroll.
Vom scrie html pentru o bandă de imagini
E un clasic. Utilizați lista ul și împachetați-o într-o div. Pe această diva vom configura pluginul, deci are nevoie de un identificator. În cazul meu, aceasta este o clasă.
Este important ca imaginile să aibă aceeași dimensiune. În caz contrar, nu va arăta atât de spectaculos. Prin urmare, trebuie să le strângeți și să le procesați.
Trebuie să conectați jQuery. Cum se face, cred că toată lumea știe. Și totuși trebuie să conectați biblioteca jcarousel Lite. Ea face totul.
După încărcarea paginii, trebuie să setați plug-in-ul pe panglica de imagine și un miracol se va întâmpla!
Asta e tot! Într-adevăr. Nu este nevoie de nimic mai mult. Nu este nevoie să conectați și să personalizați teme. Nu trebuie să faceți niciun control și să scrieți cod suplimentar. Aveți un cod standard al listei de imagini și un singur apel la pluginul cu parametri. Așa ar trebui să fie. Sunt încântat să fiu cinstit.
Despre parametrii posibili și valorile lor pot fi citite în original în pagina plug-in. Ei bine, vă voi spune pe scurt despre ce.
Posibile opțiuni pentru galerie
btnPrev este identificatorul care definește butonul Înapoi. Acest lucru este necesar dacă efectuați un control de defilare utilizând butoanele.
btnNext este identificatorul butonului Înainte.
btnGo - puteți face tranziția la numărul de elemente. Când faceți clic pe un element, caruselul trebuie derulat la un anumit element. Mai multe detalii sunt scrise în documentație.
mouseWheel - true / false este valoarea care determină dacă caruselul va derula de la defilarea mouse-ului. Necesită pluginul mousewheel.
auto - true / false Valoarea care determină dacă banda se va roti singură.
viteza de derulare în milisecunde.
relaxare - efectul derulării. Puteți face efectul de a bouncing. Necesită adăugarea unui plugin.
vertical - pot avea imagini rotite vertical?
circulară - va înceta înregistrarea benzii când se va atinge ultima imagine sau se va roti?
vizibil - câte elemente sunt vizibile
start - care element să începeți cu
derulați - câte elemente sunt derulate
înainte de începerea funcției callback, care este apelată înainte de începerea animației
afterEnd - funcția Callback, numită la sfârșitul animației
Astfel de cazuri. Utilizați-l!
Și am terminat concursul pe blogul unui fan al tricoului și voi scrie în curând un raport despre acesta.