Mai jos sunt câteva tendințe și metode generale pe care dezvoltatorii le folosesc:
- Glisoarele pe mai multe niveluri reprezintă ultima adăugire a glisoarelor pentru efectul de parallax.
- Sliders cu efecte de intrare / ieșire Fade - astfel de glisoare nu au controale. Conținutul va dispărea unul câte unul.
- Rotatoare banere - glisiere care lucrează de-a lungul unei traiectorii circulare.
Există și alte glisiere. Fiecare tip de cursor este potrivit pentru anumite scopuri. Prin urmare, pentru proiectant, este important să alegeți cursorul care funcționează cel mai bine pentru o sarcină sau altul. Glisoarele de dimensiuni mari pot fi folosite pentru a afișa produse sau proiecte, un slider mai mic, de exemplu, pentru a afișa articole populare pe un blog. Apoi, hai să vorbim puțin despre problemele pe care dezvoltatorii le pot întâmpina dacă includeți două glisante pe o singură pagină.
Dezavantajele utilizării glisoarelor jQuery multiple
După cum am menționat deja, diferitele glisoare afișează diferite efecte și pot fi folosite pentru diferite aspecte. Există multe dezavantaje în utilizarea mai multor glisoare pe o singură pagină.
- Fiecare cursor va avea mai multe scripturi și fișiere CSS. Un număr semnificativ de scripturi și fișiere CSS va reduce, în schimb, timpul de descărcare al site-ului dvs., care va fi afișat pe site-ul SEO.
- Diferite glisoare pot necesita versiuni diferite ale jQuery. Prin urmare, fișierele jQuery vor fi duplicate.
- Posibilitatea conflictelor în coduri cu alte glisante.
Având în vedere punctele de mai sus, pe o pagină este de dorit să folosiți un cursor. Dar acest lucru nu este obligatoriu. De asemenea, puteți crea diferite modele folosind un singur cursor. Pentru a face acest lucru, trebuie doar să selectați un cursor flexibil, să aveți anumite abilități în lucrul cu jQuery și CSS pentru a-l personaliza. În această lecție, luați în considerare Sliderul Rhino, deoarece este unul dintre cele mai flexibile glisoare disponibile.
Introducere în Sliderul Rhino
Rhino Slider este un cursor dublu jQuery sub licența MIT. Mai multe informații puteți citi aici. Următoarea imagine prezintă forma glisorului Rhino.
Despre modul în care puteți utiliza acest cursor, puteți citi în articolul "Cum să creați un formular utilizând RhinoSlider". În acest articol, puteți vedea cum funcționează. În lecția de astăzi, vom vedea cum să creăm machete cu funcții diferite și un cursor.
Proiectarea navigării personalizate pentru cursor
Navigarea este, probabil, una dintre cele mai importante părți ale cursorului. Chiar dacă creați un cursor cu o modificare automată a intervalului de timp, este preferabil să oferiți încă control utilizatorilor. În general, butoanele Următor și Începător din glisoare sunt foarte populare. Sliderul Rhino, folosit în această lecție, conține o navigație numerotată care seamănă cu paginarea.
Putem schimba ușor aspectul cursorului. În această lecție vom învăța cum să modificăm stilurile de bază de navigare. Să mergem.
Definiția butoanelor de control
Sliderul Rhino are trei butoane de navigare - următorul diapozitiv și paginare anterioare. Aceste elemente sunt reprezentate de clase separate CSS, astfel încât acestea să poată fi definite cu ușurință.
Slide anterioare - rhino-prev
Următorul diapozitiv - rhino-next
Acum, aruncați o privire rapidă la imaginea de mai jos pentru a obține o idee despre modul în care vom schimba designul.
Să vedem acum imaginea de mai jos pentru a vedea cum vom schimba designul.
Pasul 1 - Managementul anterior / următor
Dupa cum puteti vedea, butoanele prev / next au fost schimbate. Ei stau acum în mijloc, nu de jos și sunt plasați pe un fundal negru. Să ne uităm la schimbarea stilurilor:
Crearea unei previzualizări
Această parte va fi puțin mai complicată. Aici ne vom uita la modul de a face un câmp cu imagini care vor fi plasate în loc de numerotare. Vom folosi o combinație de CSS și JQuery.
Odată ce aplicați stilurile CSS, glisorul va arăta astfel.
Acum puteți vedea previzualizarea imaginilor, așa cum se arată în imaginea de mai jos.
Glisorul cu previzualizare verticală a miniaturilor
Mai jos sunt modificările pe care trebuie să le faceți pentru a schimba designul.
Folosiți cursorul pe o singură pagină
În secțiunile anterioare, am schimbat funcționalitatea cursorului utilizând același cursor, schimbând stilurile CSS ale cursorului original Rhino. Dar când trebuie să folosim mai multe glisiere pe o singură pagină, nu putem schimba stilul, așa cum am făcut înainte. Pentru a determina stilurile diferite pentru aceleași clase și elemente, avem nevoie de o metodă alternativă.
Mai întâi trebuie să implementăm Sliderul Rhino separat, prin definirea diferitelor ID-uri.