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

Cum de a crea un slider foto folosind jquery și css3

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.

Cum de a crea un slider foto folosind jquery și css3

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.

Cum de a crea un slider foto folosind jquery și css3

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.)

Cum de a crea un slider foto folosind jquery și css3

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.

Cum de a crea un slider foto folosind jquery și css3

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.

Cum de a crea un slider foto folosind jquery și css3

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.

Cum de a crea un slider foto folosind jquery și css3

Cum de a crea un slider foto folosind jquery și css3

Cum de a crea un slider foto folosind jquery și css3

Cum de a crea un slider foto folosind jquery și css3

Cum de a crea un slider foto folosind jquery și css3

Articole similare