Design web asterial - crearea de site-uri

În plus față de setările modulului din panoul de administrare al site-ului, există setări ale scenariilor în sine, schimbând care, puteți obține efecte interesante și utile.

Ajustarea efectelor cursorului

Codul cursorului cu efecte arată astfel:







$ ('# slideshow') .nivoSlider (

Selectăm efectele necesare și le adăugăm în interiorul .nivoSlider (); Nu uitați să puneți brațele în interiorul bretelelor <> în caz contrar glisorul nu va funcționa.

efect: "aleatoriu", // efectul animației cursorului, lista completă este prezentată mai jos

felii: 15, // numărul de elemente animate, de exemplu, numărul de pătrate pentru efectul sliceDown și alte

animSpeed: 500, // viteza de schimbare a imaginilor

pauzăTime: 3000, // întrerupe imaginile

startSlide: 0, // numărul imaginii de la care începe afișarea imaginilor, numărul este de 0, adică 0 este prima imagine.

directionNav: true, // true - arată săgețile înainte și înapoi, false - ascunde

directionNavHide: true, // true - arată săgețile numai atunci când se hovering, false - arată mereu

controlNav: true, // true - afișează butoanele comutatorului, false - ascunde

keyboardNav: true, // utilizați săgețile stânga și dreapta de pe tastatură pentru a comuta diapozitivele.

pauseOnHover: true, // opriți animația în timp ce plasați cursorul pe mouse.

Valori pentru efect:

Nu voi descrie efectele, le puteți vedea înlocuind valoarea dorită în cod.







Ajustarea efectelor caruselului

Editați în fișierul catalog / vizualizare / temă / temă / șablon / modul / carousel.tpl. Structura codului din fișier este aceeași cu cea a cursorului. Efectele caruselului sunt mai mici, dar ele pot fi utile. Inițial, scriptul carusel arată astfel:

$ ('# carusel ul ') jcarousel (

vizibile: ,

derulați:

După cum puteți vedea, unele efecte există deja, de exemplu, vertical: false înseamnă că caruselul va fi afișat într-o poziție orizontală, dacă setați această valoare la adevărat, acesta va fi afișat pe verticală. Vizibil - numărul de elemente vizibile în carusel, această valoare este setată din panoul de administrare în setările modulului Carusel. Parcurgerea este, de asemenea, setată în panoul de control al site-ului și determină câte elemente va parcurge caruselul. Acum, ia în considerare celelalte efecte pe care le puteți adăuga la carusel.

animație: 'lent', // viteza de defilare a elementelor. Valorile posibile sunt "lente", "rapide", 0 (fără animație)

auto: 0, // specifică intervalul de auto-derulare a caruselului, dacă este setat la 0, autocortarea este dezactivată. Dacă doriți să faceți un carusel cu o auto-defilare, asigurați-vă că specificați această valoare.

wrap: 'circular', // definește comportamentul caruselului la atingerea ultimului element. Valorile pot fi "ultima", "prima", "ambele", "circulare". Valoarea circulară vă permite să derulați fără sfârșit.

Carusel script cu efecte instalate:

$ ('# carusel ul ') jcarousel (

vizibile: ,

derulați: ,

În acest exemplu, caruselul se va deplasa automat cu un pas de 2 elemente și o repetare infinită. Dacă viteza de animație nu este setată, atunci implicit va fi rapidă.

Mulți sunt în căutarea unor module pentru a face un carusel cu autoscrolling, dar de fapt, este suficient doar să editați fișierul caruselului standard puțin și efectul necesar va fi atins.

Poate că veți fi, de asemenea, interesați de articole:







Articole similare

Trimiteți-le prietenilor: