Cum de a crea un slider foto folosind jquery și css3
LPgenerator - Pagina profesională de aterizare este o platformă pentru creșterea vânzărilor afacerii dvs.
COMERCIALIZAREA CURSULUI DE ACȚIUNI ALE PARTENERILOR
In acest tutorial vom crea un slider jQuery cu ajutorul „Nivo Slider jQuery Script“ și CSS3. Vom folosi "Nivo Slider jQuery Script" pentru că este un instrument puternic și este complet gratuit. Acest script are 16 efecte de tranziție, este simplu, flexibil și are multe caracteristici interesante. O puteți folosi aproape oriunde și pentru aproape orice proiect, inclusiv site-uri web personale și comerciale, precum și orice comanda a face pentru WordPress, de exemplu.
Pasul 1. Marcajul HTML de bază
În primul rând, trebuie să descărcați scriptul jQuery Nivo Slider aici. Ai nevoie doar de două fișiere din pachetul pe care l-ați descărcat: „Nivo-slider.css“ și „jquery.nivo.slider.pack.js“.
Apoi, creați marcajul HTML principal și adăugați fișierele "Nivo Slider" CSS și JS. În plus, trebuie să atașați biblioteca jQuery, folosind cea mai recentă versiune găzduită de Google sau dacă doriți, puteți plasa pe serverul dumneavoastră, alegerea este a ta.
Pentru a descărca glisorul jQuery Nivo, trebuie să adăugăm încă câteva linii de cod înainte
tag-ul de închidere. De asemenea, trebuie să setăm câteva opțiuni pentru a face controlul vizibil, pentru a schimba opacitatea antetului și a schimba textul precedent și următor al diapozitivului cu săgețile.
Pasul 2. Glisorul de marcaj HTML
În primul rând, trebuie să creați un div cu clasa "slider-wrapper" și "futurico-theme". Apoi creați un div cu identificatorul "cursorul" și clasa "nivoSlider". Pentru fiecare diapozitiv, creăm .
Pasul 3: Aspectul glisorului jQuery
Vom crea un slider de imagine jQuery cu o lățime de 300px și 180px înălțime. De îndată ce adăugăm 5px padding (umplutură americană), trebuie să scăpăm imediat 10px de la lățime și înălțime. De asemenea, setăm culoarea de fundal și rotunjim colțurile.
Acum mergem la stilul cursorului. Vom începe cu plasarea și centrarea în partea de jos. Dacă aveți mai mult de patru diapozitive, va trebui să modificați valoarea "stânga", pentru a centraliza cursorul.
Creăm un cerc pentru fiecare diapozitiv. Pentru stilul său, vom adăuga o culoare de fundal, umbre și colțuri rotunjite. Pentru a ascunde numerotarea "1,2,3,4", vom adăuga o liniuță a textului cu o valoare negativă.
Pentru diapozitivul activ, adăugăm un gradient verde și schimbăm umbra.
Pasul 5. Slide următoare și anterioare
Pentru a stiliza cursorul „următoare și anterioară, o vom poziționa în centru și se adaugă stiluri CSS de bază (font, dimensiunea fontului, culoarea, etc.)
Pasul 6. Anteturile de marcare HTML
Pentru a crea un antet, trebuie să creați un div cu clasa "Nivo-HTML-caption" și un id aleator (id). Pentru a conecta titlul la diapozitivul corespunzător, trebuie să adăugăm "titlu" la cu același nume ca și id-ul antetului.
Pasul 7: Stilul titlului
Pentru a stiliza semnătura, vom schimba culoarea textului, familia fontului și dimensiunea acestuia. Vom folosi de asemenea același gradient verde pe care l-am folosit mai devreme.
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.
