Cum sa faci un adaptivă (cauciuc) slider imagine folosind jQuery și CSS3

Cum sa faci un adaptivă (cauciuc) slider imagine folosind jQuery și CSS3

Înainte de a începe, aș spune că avem nevoie pentru a conecta două biblioteci externe:

  1. FlexSlider - plugin dezvoltatori utilizează WooThemes. rapid impecabil. Puteți descărca plugin-ul de pe site-ul oficial separat sau împreună cu sursa de la sfârșitul articolului.
  2. jQuery bibliotecă - l-am conecta direct de la depozitul Google.

Pasul 1 - Structura HTML marcare

Să începem cu cursorul html marcare. a crea bloc

clasa «flex-containere» in interiorul crea un alt bloc
clasa slider „flex-slider“, în care sunt plasate toate controalele. Ultimul lucru pe care trebuie făcut de marcare, - este de a crea o lista ordonata in care vom adăuga prezentarea noastră imagine. Fiecare diapozitiv trebuie să fie în elementul din listă.

Apoi, conectați biblioteca jQuery și plugin FlexSlider

Pasul 2 - stiluri principale

Crearea unui fișier de stil implicit în care toate stilurile noastre pentru cursorul va fi precizate, am numit fișier slider.css

În primul rând prescrie stiluri de resetare pentru a șterge toate marginile, spațiere etc. reținându-se astfel codul de pornire pentru toate browserele.

Adăugarea de stil care „curăță“ următoarea poziție de diapozitive

Pasul 3 - Stiluri pentru cursor

Pentru glisor vom seta culoarea de fundal - alb și se adaugă puțină umbră cu proprietăți CSS3 - „box-umbra“. Apoi se adaugă padding 10px și colțurile rotunjite.

Am stabilit o lățime minimă și maximă pentru cursorul. Puteți ajusta setările pentru a se potrivi cerințelor dumneavoastră.
Parametrul set 1 zoom, se va evita problema redimensionarea în browsere de pe dispozitivele mobile.

Pasul 4 - Butoane de navigare <>

Pentru butoanele, vom adăuga un gradient verde, cu ajutorul CSS3, parametrul lățime este setat, altitudinea, etc. Pentru a alinia butoanele pe verticală, avem nevoie pentru a pune poziția superioară marjei de 50%.

Adăugați imaginea de săgeți folosind pseudo-selectori „: înainte“ și „: după“. Surse Toate imaginile folosite în acest tutorial sunt arhivate în dosarul img. Puteți schimba imaginea pe placul dumneavoastră.

Adăugați unele efecte 3D la butoanele în formă de bandă (buton merge la partea din spate a cursorului).

Pasul 5 - Butoanele de control sub glisorul

Crearea unui bloc cu butoane mici, rotunde în partea de jos a cursorului prin care slide-uri pot fi comutate în ordinea lor nu dependență.

Pasul 6 - Legende pentru imagini

A fost ultimul pas, trebuie doar să adăugați câteva stiluri simple, pentru imagini antet. Aici vă puteți face propria dvs. pentru a experimenta și de a crea stiluri, la libera sa alegere. Am stabilit culoarea de fundal la negru cu un mic utilizând modul transparent RGBA.

În această lecție de peste. Sper ca acest tutorial a fost de ajutor, și ați învățat ceva nou. Puteți utiliza un cursor în oricare dintre proiectele tale, este ușor de configurat și de a folosi în același timp povara asupra resurselor este minim.