Cele mai simple elemente ale unui jquery carusel circular

În această lucrare propunem să demonteze un exemplu de realizare a unui element de tip carusel circulare jQuery. Este important să nu fie confundat cu ciclică într-o singură linie, aici se va roti într-un cerc.

Acum, cursoarele orizontale și verticale și elemente de tip carusel foarte popular. Există un număr mare de biblioteci gata făcute pentru punerea în aplicare a sensuri giratorii. Dar nu atât de mult timp în urmă, am dat pe un site, în cazul în care elementele sunt aranjate și au trecut în jurul valorii. Pentru a crea un carusel circular sunt gata 3D carusele bibliotecă, dar ei nu au permis să realizeze exact ceea ce am vrut, iar controlul asupra elementelor a fost aproape de zero, a fost dificil să se stabilească funcțional „de la sine“.

Ca urmare, am decis să investigheze în mod independent și să facă un carusel elemente similare. Demonstrație carusel Puteți găsi link-ul de la sfarsitul articolului.

funcționalitate simplă. Am avertiza în prealabil că toate elementele trebuie să calculeze și post (poziția) manual pentru fiecare dimensiune de conținut. Ca un alt minus, am act de faptul că, datorită calculului manual de poziționare a elementelor nu se va realiza schimbarea dinamică a numărului de elemente din carusel.

Cum funcționează:

Deci, propun să se ocupe, de la care va consta în general dintr-un carusel.

În primul rând, trebuie să alegeți imaginea care va forma baza unui carusel circular.

Apoi, efectuați următoarele markup:

Aici am dori să se concentreze pe bloc

.

Acesta va fi transferat membrilor noștri, ele pot fi la fel de mult ca iti place. Acest bloc se poate face în mod natural prin ciclul, în cazul în care datele sunt preluate din baza de date, sau sunt în matrice.

Recomand să folosească un număr de elemente, astfel încât atunci când împărțirea 360 de numărul acestor elemente au fost obținute fără număr infinit de fracțiuni, altfel carusel în timpul defilare va deplasa treptat la unele erori.

Nu acorde atenție la unitățile cu .circle-item-conținutul de clasă, în care stocăm titluri, descrieri și linkuri către articole, acestea nu apar, noi le ascundem, dar valorile se vor lua pentru a afișa în momentul selecției.

De asemenea, vom prezenta o unitate de navigație

- săgețile de derulare înainte și înapoi, ele pot fi eliminate, dacă nu va fi nevoie.

Și, în consecință blocul

în care vom plasa titlul, descrierea și link-ul de la elementul selectat pentru a fi afișat, și anume, doar din clasa bloc .circle-item-conținutul fiecărui element.

Structura este gata. Acum aveți nevoie pentru a trage întregul conținut:

Aici, să acorde o atenție la proiectarea .circle-container clasă, în ea vom specifica doar imaginea care va fi baza noastra. Imagine de dorit să fie egală sau mai mare decât dimensiunea unității de tip carusel. Dimensiunea blocului ne cerem clasa .circle-carusel .container .wraper, mărimea mea este 1000x1000 pixeli (carusel avem rotund, astfel încât unitatea trebuie să fie egală în lățime și înălțime).

Cel mai important lucru în stilurile noastre, aceste elemente clearance-ul, astfel încât să acorde o atenție specială stiluri .circle-element: nth-de-tip (număr)

Acest lucru este în cazul în care aveți nevoie pentru a calcula și stabili poziția fiecărui element în cercul nostru. Am 6 elemente, așa că, de asemenea, fiecare dintre ele rândul său, la 60 de grade în raport cu celălalt, este necesar să se asigure că la sfârșitul selectat în sus, atunci când rândul său, a crescut la gradul dorit. De fapt, poziționarea elementelor cele mai dificile din întregul proces de creare a unui carusel circular.

Toate celelalte stiluri, este doar decor, aveți posibilitatea să le răsuciți ca te rog. Eu nu sunt un specialist în proiectarea, așa că am totul simplu.

Deci, acum vom adăuga un script care va procesa carusel nostru:

Aici avem o funcții 4 și 3 de prelucrare de presare (apăsând butonul „Înapoi“, „înainte“ și făcând clic pe elementul în sine):
appendContent (elem) - o funcție care primește titlul, descrierea si link-ul elementului și plasat în unitatea centrală;
rotateElem (elem) - o caracteristică ce se va transforma întregul carusel la elementul, care a fost produs de un clic;
rotatePrev (elem) - o facilitate care va transforma caruselul înapoi cu un element atunci când faceți clic pe butonul „înapoi“;
rotateNext (elem) - o facilitate care va transforma caruselul înainte un element atunci când faceți clic pe butonul „Forward“.

Script-ul nici măcar nu se poate atinge, inserat așa cum este, indiferent de numărul de elemente din structura de tip carusel, ca calculul este în funcție. Tot ce trebuie este să modificați numele claselor, dacă le-ați schimbat în marcaj.

Și, detaliu nu mai puțin important - nu uitați să vă conectați biblioteca jQuery.