Cuprins
Vom crea un glisor dezvoltat cu
Jquery Da
Nivo Slider, fără a fi nevoie de un plugin și pe care îl putem adapta site-ului nostru web.
Pentru a face acest lucru vom folosi
Cadrul Jquery, care este un
bibliotecă pentru a facilita lucrul cu limba Javascript. Descarcăm biblioteca de pe
Jquery.com, de asemenea, este posibil să îl puteți folosi trăgând
googleapis.com folosind acest cod în pagina dvs. html pentru a adăuga acest script.
Dacă l-ați descărcat de pe pagina Jquery și l-ați încărcat într-un director de pe site-ul dvs. web, trebuie să îl puneți pentru a indica domeniul dvs. ca exemplu:
Acum să descărcăm
Glisor Nivo ce este
Biblioteca Jquery care ne va permite să creăm glisorul. De aici puteți descărca glisorul Nivo gratuit. Dezarhivați fișierul din directorul nostru, aici putem vedea structura web.
Acum vom crea un fișier index.html pentru site-ul nostru, în antet vom pune bibliotecile și foile de stil. Putem vedea biblioteca Jquery, biblioteca glisor nivel și propriile foi de stil ale glisorului Nivo, apoi le putem personaliza.
Acum vom crea un container pentru imaginile noastre și pentru glisor, pentru aceasta și pentru a putea să-l afișăm, a fost creat în același index.html (Poate fi creat și într-un fișier de foaie de stil CSS, pentru a se potrivi fiecare).
Începem cu structura web și glisorul în sine, inserând imaginile de afișat și un mesaj.
Apoi activăm pluginul Silder nivo și îi trimitem parametri despre tipul de efect, timpul dintre animație, pauza între imagine și multe altele care pot fi văzute în documentația Nivo Slider.
Să observăm că ID-ul este activat
#silder același în care definesc imaginile, așa că, dacă vreau să am mai multe glisante, va trebui să replic aceeași structură și să o activez pentru ID-ul corespunzător.
Rezultatul testării index.html într-un browser este:
Aici vedem al doilea diapozitiv, mai jos vedem numărul de diapozitive 1 și 2, iar legăturile implicite Prev (precedent) Următor (următor) vom îmbunătăți vizualizarea cu ajutorul css.
Putem schimba numerele în gloanțe pur și simplu uitându-ne la nivo-silder.css
.nivo-controlNav {text-align: left; umplutură: 0; poziție: relativă; indice z: 10; } .nivo-controlNav to {display: inline-block; lățime: 10 px; înălțime: 10px; fundal: url (bullets.png.webp) fără repetare; text-indent: -9999px; chenar: 0; marja: 0 2px; } .nivo-controlNav a.active {background-position: 0 100%; } .nivo-directionNav to {display: block; lățime: 30 px; înălțime: 30px; fundal: url (săgeți.png.webp) fără repetare; text-indent: -9999px; chenar: 0; sus: auto; jos: -36px; indice z: 11; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; raza chenarului: 2px; } a.nivo-nextNav {background-position: 160% 50%; dreapta: 0px; } a.nivo-prevNav {background-position: -60% 50%; stânga: auto; dreapta: 35px; } Rezultatul acestei modificări va fi numerele ca gloanțe la stânga și legăturile ca săgeți la dreapta.
Vom extinde funcționalitatea prin afișarea unui bloc de date într-unul din diapozitive
Modificând codul pe care îl avem deja, schimbăm paragraful din diapozitivul 2 pentru un bloc pe care îl voi numi cu un ID # bloc2, apoi creez blocul și aplic un stil ascuns astfel încât să fie vizibil doar când diapozitivul 2 este activat.
Rezultatul este următorul:
De asemenea, puteți pune imagini în miniatură. O altă opțiune este de a genera conținut dinamic dintr-un mysql și php sau utilizarea acestuia într-un șablon CMS, cum ar fi joomla sau wordpress. Vine cu multe plugin-uri deja programate, dar cu câteva linii de cod ne putem crea propria componentă. Sper că ți-a servit.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
Vei ajuta la dezvoltarea site-ului, partajarea pagina cu prietenii
