Cumva prietenii mei au decis să mă surprindă. Surpriza în sine a fost foarte simplă, a necesitat cel mai obișnuit tricou fără grafică.

Și apoi au întâlnit o problemă - toate tricourile din magazine erau cu imagini. Nu au putut găsi cel mai simplu tricou, fără imagini. Cred că și tu te-ai confruntat cu o problemă similară când nu poți găsi cel mai simplu lucru.

Și cu carusele de aceeași poveste, aproape toate caruselele sunt deja proiectate. Și aproape întotdeauna aveți nevoie de un carusel curat, care poate fi apoi proiectat așa cum a intenționat designerul.

Prin urmare, pentru a vă bucura imediat de lucrul cu carusele, pentru a le realiza rapid, vă sugerez să adoptați următorul plugin.

Plugin carusel jQuery curat și puternic

Frumusețea acestui plugin este că nu este proiectat și mult mai ușor de lucrat decât alte plugin-uri frumoase.

Poate fi aranjează-l în orice fel.

Și așa, iată acest plugin: Owl Carousel.

Instalare plugin

1. Conectăm jQuery dacă nu este deja conectat, de exemplu așa

2. Copiați fișierele plugin în folderul site-ului

• Despachetarea
• Copiați folderul pe site bufniță-carusel

3. Conectăm aceste fișiere la site:

4. Adăugați codul în pagină

5. Rulați pluginul

$(document).ready(function()( // Găsiți blocul carusel var carusel = $("#carusel"); // Rulați pluginul carusel carousel.owlCarousel(); ));

6. Ne facem

/* Bloc principal */ .owl-wrapper-outer ( chenar: 1px solid #777; border-radius: 5px; overflow: hidden; fundal: alb; ) /* 1 carusel box */ .carusel-element ( padding: 30px ; text-align: center; font-size: 300%; margine-dreapta: 1px solid #777; )

Butoanele Înapoi și Înainte

În acest exemplu, voi arăta nu cel mai rapid, ci cel mai versatil mod.

1. Adăugați butoanele în sine

Inapoi inainte

2. Atașați butoanele pluginului carusel

După ce rulați pluginul, adăugați codul

// Înapoi // Când se face clic pe „Înapoi” $("#js-prev").click(function () ( // Declanșează un derulare înapoi la stânga carousel.trigger("owl.prev"); return false; )); // Înainte // Când se face clic pe "Înainte" $("#js-next").click(function () ( // Declanșează înainte dreapta carousel.trigger("owl.next"); return false; ));

Acum, când faceți clic pe „Înapoi” și „Înainte”, va funcționa înapoi.

Markere

Acestea sunt punctele care arată unde suntem acum.

Ele pot fi activate la pornirea pluginului prin adăugare următorul parametru

// Rulați pluginul carusel carousel.owlCarousel(( // Puncte sub paginarea caruselului: true ));

/* Bloc cu puncte */ .owl-pagination ( text-align: center; /* Aliniați punctele la mijloc */ ) /* 1 punct */ .owl-page ( lățime: 10px; înălțime: 10px; chenar: 1px continuu #777; afișare: bloc inline; fundal: alb; margine: 10px; rază chenar: 5px; ) /* Hotspot */ .owl-page.active ( fundal: #777; )

Pentru a afișa doar 1 bloc

Acest lucru este destul de des necesar, pentru aceasta adăugăm următorul parametru

// Rulați pluginul carusel carousel.owlCarousel(( singleItem: true, // Afișează doar 1 casetă cu lățime completă ));

Număr diferit de blocuri pe diferite dispozitive

Funcție foarte utilă, vă permite să faceți carusel adaptiv pentru dispozitive mobile.

// Rulați pluginul carusel carousel.owlCarousel(( // Numărul de blocuri de afișat // în funcție de dispozitiv (lățimea ecranului) // Numărul de blocuri pe ecrane mari articole: 10, // 5 blocuri pe computere (ecran de la 1400px la 901px) articoleDesktop: , // 3 blocuri pe computere mici (ecran de la 900px la 601px) articoleDesktopSmall: , // 2 elemente pe tablete (ecran de la 600px la 480px) ) itemsTablet: , // Setările telefonului sunt dezactivate, în acest caz setările tabletei vor // fi folosite itemsMobile: false ));

Și care este surpriza?

Prietenii vin la ziua mea de naștere, zâmbete vesele, încântă și se repezi peste margine. Ei îmi oferă solemn un cadou.

Îl deschid, uită-te la tricou. eu desfac. La naiba, ce prostie. Văd 3 fotografii cu mine pe acest tricou. Mi-am pus un tricou și toată lumea începe să râdă, a ieșit stupid și distractiv.

În ultimul timp am lucrat la un site care folosește un CMS, ceea ce este puțin limitativ. Putem adăuga al nostru propriul HTMLși CSS pe site, dar nu JavaScript.

Proiectele la care am lucrat aveau un carusel. Aveam idei despre cum am putea face acest lucru să funcționeze folosind animații CSS și proprietatea de transformare, dar asta ar oferi caruselului derulare automată și nu permite intrarea utilizatorului, ceea ce mamele nu și-au dorit. După ce ne-am gândit, am venit cu o soluție care folosește poziționarea absolută și un pseudo-selector :target pentru a schimba indicele z și opacitatea caruselului nostru pentru a parcurge.

Să creăm asta!

Structura

Structura caruselului nostru arată cam așa: avem un div.carusel-wrapper principal care oferă caruselului nostru o dimensiune. În interiorul ambalajului nostru, avem elemente span.hidden-target cu ID-uri unice care acționează ca ținte pentru elementele noastre de control carusel și elemente div.carousel-item care conțin conținutul fiecăruia dintre elementele carusel.

Fiecare dintre elementele div.carousel-item va avea conținut și două legături, a.arrow-prev și a.arrow-next, pe care le folosim pentru a parcurge elementele carusel.

Pentru că noastre elemente individuale caruselele vor fi pozitionate: absolute (le putem stivui unul peste altul), trebuie sa setati manual inaltimea div.carusel-wrapper. Vom încerca să descarcăm CSS în foaia noastră de stil externă, dar unele dintre elementele pe care va trebui să le scriem pentru a face caruselul nostru utilizabil și scalabil.

De asemenea, folosim CSS pentru a seta imagine de fundal dintre cele două elemente ale noastre div.carousel-element pentru a le face mai luminoase, dar îl vom lăsa mai jos, astfel încât marcajul nostru să fie mai lizibil.

Asta e tot HTML-ul. Este surprinzător de ușor. În CSS (SCSS, în acest caz), acolo se întâmplă magia.

Stiluri

Aveți un carusel care este complet funcțional și 100% HTML și CSS! Am creat un carusel cu trei articole, dar puteți continua să adăugați articole, asigurați-vă că adăugați mai multe articole vizate și să vă conectați corect linkurile.

/* Aici începe caruselul nostru, învelișul principal fiind poziționat relativ, astfel încât articolele noastre poziționate absolut să fie în locul potrivit. lățimea și înălțimea părintei sale. Le facem transparente în mod implicit, astfel încât să dispară atunci când parcurgem prin ele folosind link-urile săgeților. */ .carusel-element (poziție: absolut; sus: 0; jos: 0; stânga) : 0; dreapta: 0; umplutură: 25px 50px; opacitate: 0; tranziție: toate 0,5 s ease-in-out; /* Ați observat căptușeala de 50px stânga, dreapta sus? Pentru a ne poziționa link-urile săgeților! Fiecare va avea o lățime de 50 de pixeli. De asemenea, folosesc linkuri goale cu o imagine de fundal, astfel încât linkurile să arate ca niște săgeți. Asigurați-vă că schimbați acea adresă URL cu o adresă URL reală, astfel încât linkurile săgețile dvs. să nu fie doar dreptunghiuri transparente. */ .săgeată ( poziție: absolut; sus: 0; afișaj: bloc; lățime: 50px; înălțime: 100%; -webkit-tap-highlight-color: r gba(0,0,0,0); fundal: url("/carousel-arrow-dark.png") 50% 50% / 20px fără repetare; /* Să ne punem săgeata pentru a merge înapoi la stânga. */ &.arrow-prev ( stânga: 0; ) /* Și săgeata noastră pentru a merge înainte la dreapta. Deoarece folosesc aceeași imagine de săgeată pentru ambele săgețile mele, o rotesc pe aceasta cu 180 de grade, astfel încât să indice în direcția corectă */ &.arrow-next ( dreapta: 0; -webkit-transform: rotire(180deg); transform: rotire(180deg); ) ) /* Îmi place foarte mult cum arată aceste elemente de carusel pe un fundal de imagine întunecat, așa că dacă un div .carousel-item are clasa „luminoasă”, vom face textul în culoarea albă și vom folosi o săgeată albă în loc de unul gri închis. Din nou, asigurați-vă că această imagine cu săgeată există undeva */ &.light ( culoare: alb; .arrow ( fundal: url ("/carousel-arrow-light.png") 50% 50% / 20px fără repetare; ) ) / * Să folosim anumite interogări media pentru a redimensiona săgețile pe dispozitive mai mici.*/ @media (lățime maximă: 480px) ( .săgeată, &.light .arrow (dimensiunea fundalului: 10px; poziția fundalului: 10px 50 %); ) ) ) /* Să setăm afișarea țintelor pentru link-ul de salt: niciuna; astfel încât să nu facem browserul să sară în partea de sus a caruselului ori de câte ori un utilizator face clic pe unul dintre linkurile noastre săgeți. Acest selector de atribute va viza orice element al cărui id începe cu „articol-țintă”. */ ( afișare: niciunul ; ) /* Așadar, sus am făcut transparente toate articolele din carusel, ceea ce înseamnă că la încărcarea paginii, am avea o cutie mare goală unde ar trebui să fie caruselul. Să setăm opacitatea primului nostru articol la 1, astfel încât să fie afișat în schimb. De asemenea, îi setăm indicele z la 2, astfel încât să fie poziționat deasupra celorlalte elemente din carusel. */ .item-1 ( z-index: 2; opacitate: 1; ) /* Dar nu dorim ca primul articol să fie ALAWYS opacitate: 1; altfel s-ar arunca cu ochiul când treceți între elementele două și mai sus. * /*:target ~ .item-1 ( opacitate: 0; ) /* ...dar dacă #target-item-1 este vizat, bine dorim ca primul element să apară, așa că îl selectăm cu ~ selector de frați și setându-i din nou opacitatea la 1:-) */ #target-item-1:target ~ .item-1 ( opacitate: 1; ) /* Dacă orice alt element-țintă-# este vizat, să"s selectați-l utilizând selectorul de frați, faceți-l să se estompeze și plasați-l deasupra grămezii folosind indexul z: 3. Iată unde ați adăuga mai multe elemente țintă dacă caruselul dvs. are mai mult de trei elemente. S-ar putea să fie merită adăugat de la bun început 10 articole.*/ #target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 ( z-index: 3; opacitate: 1; ) )

Conversii mari pentru tine!

1. Carusel jQuery „clickCarousel”

Blocați cu anunțuri de știri care se defilează. Săgețile stânga/dreapta sunt folosite pentru a derula prin blocuri. Carusel arhivat în două styling: lumina si intuneric.

1. jQuery carusel, plugin carouFredSel

Un carusel de imagini jQuery îngrijit și proaspăt.

4. Plugin jQuery: Carusel Elastislide

5. Plugin „TinyCarousel”

Glisoare excelente de conținut sub forma unui carusel de imagini folosind jQuery. Pagina demonstrativă descrie cum să legați acest carusel de site-ul dvs.

Plugin „Slider Kit”, carusel ușor cu căi diferite sul.

7. carusel javascript

8. Plugin jQuery „Efecte de navigare în grilă”

Navigare originală între miniaturile imaginilor. Pentru a vedea efectul în partea dreaptă a paginii demo, faceți clic pe butoanele Sus și Jos. Această soluție jQuery oferă, de asemenea, un efect de hover asupra miniaturii și derularea cu rotița mouse-ului.

9. Carusel ușor

10. Carusel de blocuri Easy Paginate

plugin jQuery Paginare usoara. Fiecare bloc dreptunghiular este un element obișnuit din listă, iar dacă există mai mult de trei elemente, atunci pentru a le vizualiza pe toate trebuie să utilizați o navigare sub formă de glisor (folosind săgețile înainte și înapoi și folosind butoanele de navigare din partea de jos).

11. Rotator vertical „Vertical Ticker”

Rotator vertical jQuery: defilare automată a conținutului de pe pagină. Sunt furnizate butoane de navigare, precum și posibilitatea de a opri rotația și de a o reporni. Când mutați cursorul mouse-ului, mișcarea se oprește. Pe nivel HTMLÎn marcaj, blocurile de defilare sunt reprezentate de elemente obișnuite din listă li.

12. zona de derulare javascript css

Soluție javascript „TinyScroller” pentru a crea o zonă derulabilă plasată într-un container DIV.

13. Pluginul jQuery Smooth Div Scroll

Plugin de implementare defilare orizontală conținut într-un anumit domeniu. Când mutați cursorul mouse-ului peste marginea din stânga sau din dreapta zonei, începe derularea.

Navigarea între diapozitive cu conținut se poate face folosind săgeți sau făcând clic pe o miniatură. Mai jos există un buton „Afișare” care vă permite să ascundeți/afișați miniaturile sau Descriere completa diapozitiv.

15. Rotator de conținut „Carusel de conținut circular”

17. Scroller

Un bloc cu un scroller care apare atunci când treceți cu mouse-ul peste cursor. Puteți derula prin conținut folosind atât bara de defilare, cât și rotița mouse-ului.

Soluția asemănătoare jQuery a fost inspirată de un efect similar pe site-ul Apple. Dezvoltatorii acestei corporații au găsit întotdeauna soluții interesante care au inspirat webmasteri din întreaga lume. Pentru a demonstra pluginul, selectați una dintre categoriile din listă.

19. Glisor minunat

Glisorul este generat automat. Datele cu numele produsului, descrierea, linkul și adresa imaginii sunt preluate din fișierul slider.db.txt. Tehnologii folosite: CSS, PHP, jQuery.

20. Rotirea blocurilor folosind jQuery

Pentru a vedea efectul de rotație a blocurilor, faceți clic pe unul dintre dreptunghiurile mici de pe pagina demo

Un plugin de defilare a conținutului, de exemplu, poate fi folosit pentru a afișa cele mai recente știri sau pentru a afișa fluturași Twitter pe site.

22. Bloc dinamic „Evaluări ale clienților”

Rotirea automată a conținutului blocului. Tehnologii utilizate: PHP, XML, CSS, jQuery.

Acest plugin convertește elementele din listă (ul li) în elemente jQuery carusele.

26. carusel javascript „ImageFlow”

Imaginile sunt ușor de derulat cu rotița mouse-ului.

27. Derularea conținutului

Bloc compact cu anunț materiale de ultima generatie site sau știri. Coloana din stânga afișează o listă paginată de anunțuri scurte cu cele mai recente știri. Când selectați unul dintre ele, coloana din dreapta afișează mai mult decât descriere detaliatași un link pentru a citi textul integral al publicației. Implementat cu jQuery.

Imaginile cu linkuri sunt derulate, când treceți cu mouse-ul, defilarea se oprește și apare bara de navigare. Când treceți mouse-ul peste imagine, numele acesteia este afișat și între butoanele de control. Arata grozav pe pagina

33. Derularea conținutului, pluginul Mootools „Scrollbar”

Defilarea se face folosind atât bara de defilare, cât și rotița mouse-ului.

Când am început să studiez acest subiect, nu aveam nevoie de un carusel 3D, dar eram mai interesat de detaliile tehnice ale implementării lui. Desigur, principalele tehnici utilizate sunt, desigur, CSS Transforms Module Level 1, dar ca un grup de alte tehnologii de dezvoltare front-end sunt aplicate, atingând diverse subiecte în CSS, Sass și JavaScript la nivelul clientului.

Demo

Pentru a ilustra configurarea transformărilor CSS 3D, vă voi arăta o versiune numai CSS a componentei. Apoi vă voi arăta cum să-l îmbunătățiți cu JavaScript prin dezvoltarea unui script de componentă simplu.

Markup pentru un carusel cu opt imagini

Pentru marcaj, imaginile din interiorul componentei sunt împachetate în interior

element care asigură scheletul de bază:

Aceasta va fi fundația noastră.

Structura geometrică a caruselului

Înainte de a căuta în CSS, să ne uităm la planul care va fi dezvoltat în secțiunile următoare.

Aceste articolele trebuie aranjate într-un cerc conturat de carusel. Acest cerc poate fi aproximat prin poligonul regulat mărginit și imaginile laterale:

Astfel, numărul de laturi ale unui astfel de poligon este același cu numărul de imagini din carusel:
Cu trei imagini, poligonul este un triunghi echilateral;
Cu patru imagini, este un pătrat;
Cu cinci pentagoane; si asa mai departe:

Ce se întâmplă dacă în carusel există mai puțin de trei imagini?

Poligonul nu poate fi definit și procedura următoare nu poate fi aplicată așa cum este. Oricum, carcasa cu o singură imagine este destul de inutilă; Cele două imagini sunt ceva mai probabile și ar fi putut fi plasate în două puncte diametral opuse pe cerc. Pentru simplitate, aceste cazuri speciale nu sunt tratate și se presupun cel puțin trei imagini. Cu toate acestea, modificările relative ale codului nu ar fi dificile.

Acest poligon de referință imaginar va fi situat în spațiul 3D, perpendicular pe planul ferestrei de vizualizare, iar centrul său va fi împins înapoi în ecran la o distanță egală cu apotema sa, distanța laturii poligonului față de centrul său, așa cum se arată în Figura 2. Această vedere de sus în jos a caruselului:

Astfel, partea îndreptată în prezent către vizualizator va fi pe planul ecranului la z = 0, iar imaginea frontală, care nu este supusă perspectivei scurtării, va fi la dimensiunea sa normală 2D. d Litera din imagine reprezintă valoarea proprietății perspective CSS.

Construirea geometriei caruselului

În această secțiune vă voi arăta reguli cheie CSS pe care îl voi parcurge pas cu pas.

În următoarele fragmente de cod, câteva variabile Sass sunt folosite pentru a face componenta mai personalizabilă. Voi folosi $n pentru a indica numărul de imagini din carusel și $item-width pentru a indica lățimea imaginii.

Elementul este fereastra care conține prima imagine și elementul de referință în jurul căruia vor fi poziționate și transformate celelalte imagini.
Să presupunem că pe acest moment că caruselul avea doar o imagine de prezentat, pot începe cu dimensionarea și alinierea:

Carusel ( display: flex; flex-direction: coloană; align-items: center; > * ( flex: 0 0 auto; ) .figure ( width: $ item-width; transform-style: preserve-3d; img ( width: ) 100%; &:not(:first-of-type) (afișare: niciunul /* Doar pentru moment */ ) ) ) )

Elementul are lățimea dată a elementului carusel și are aceeași înălțime a imaginilor (pot avea diferite dimensiuni, dar trebuie să aibă același raport de aspect). În acest fel, înălțimea recipientului carusel se adaptează la înălțimea imaginii. In afara de asta,

centrat orizontal în containerul carusel.

Prima imagine nu are nevoie de transformări suplimentare, deoarece este deja în poziția țintă, adică pe partea din față a caruselului.

Caruselul poate fi rotit în spațiul 3D prin aplicarea unei transformări de rotație

element. Această rotație trebuie să fie în jurul centrului poligonului, așa că voi schimba originea inițială a transformării

:

Cifra carusel (transformare-origine: 50% 50% (-$apothem); )

Această valoare este anulată deoarece în CSS direcția pozitivă este axa z este în afara ecranului, către privitor. Parantezele sunt necesare pentru a evita erorile de sintaxă Sass. Calculul poligonului apotem va fi explicat mai târziu.

Prin traducerea sistemului de referință

element, întregul carusel se poate roti cu rotație pe (noua) axă y:

Cifra carusel (transforma: rotițiY(/* o sumă aici */rad); )

Voi reveni la detaliile acestei ture mai târziu.

Să trecem la transformări pentru alte imagini. La poziționare absolută imaginile se stivuiesc înăuntru

:

Figura carusel img:not(:primul tip) (poziție: absolut; stânga: 0; sus: 0; )

Aceste valori ale indicelui z sunt ignorate deoarece acesta este doar un pas preliminar pentru următoarele transformări. De fapt, fiecare imagine poate fi acum rotită de-a lungul axei y a caruselului printr-un unghi de rotație care depinde de latura poligonului căreia este alocată imaginea. În primul rând, cum se face

element, modifică originea implicită a imaginilor prin mutarea acesteia în centrul poligonului:

Img:not(:first-of-type) ( originea transformării: 50% 50% (-$apothem); )

Imaginile pot fi apoi rotite pe noua lor axă y cu valoarea dată de ($i - 1) * $theta radiani, unde $i index (începând de la unul) al imaginii și $theta = 2 * $PI / $n, $PI reprezentând o constantă matematică pi. Prin urmare, a doua imagine va fi rotită $theta al treilea 2 * $theta, și așa mai departe, până la ultima imagine care trebuie rotită ($n - 1) * $theta.

Această poziție relativă a imaginilor va fi păstrată în timpul rotațiilor caruselului (adică rotații în jurul axei y modificate

) datorită naturii ierarhice a transformărilor CSS imbricate.

Această cantitate de rotație a fiecărei imagini poate fi atribuită folosind @pentru directive de control Sass:

Figura carusel img ( @pentru $i de la 2 la $n ( &:nth-child(#($i)) ( transform: rotateY(#(($i - 1) * $theta)rad); ) ) )

Aceasta folosește construcția for...through mai degrabă decât for...to, deoarece în loc de for...la ultima valoare atribuită variabilei index $i, va fi n-1în loc de n.

Observați două exemple de sintaxă de interpolare #() Sass. În primul caz, este folosit pentru index:nth-child() al selectorului;
În al doilea caz, este folosit pentru a seta valoarea proprietății de rotație.

Calculul apotemului

Calculul apotemului unui poligon depinde de numărul de laturi și de lățimea laturii, adică de $nși $articol-latime variabile.
Formulă:

$image-width / (2 * bronz($PI/$n))

Unde bronzat()- funcţie trigonometrică tangentă.

Această formulă poate fi obținută cu ceva geometrie și trigonometrie. În sursa stiloului, această formulă nu este implementată așa cum este scrisă, deoarece funcția tangențială nu este disponibilă în Sass, deci este folosită o valoare hard. În schimb, formula va fi implementată complet în demonstrația JavaScript.

Distanța dintre elementele caruselului

În acest moment, imaginile carusel sunt cusute una lângă alta, formând forma poligonală necesară. Dar aici sunt strâns împachetate și adesea în carusele 3D există spațiu între ele. Această distanță mărește percepția spațiului 3D deoarece vă permite să vedeți imagini inversate pe spatele caruselului.

Puteți adăuga în continuare această distanță între imagini prin introducerea unei alte variabile de configurare $item-separation și folosind-o ca umplutură orizontală pentru fiecare element. Mai precis, luând jumătate din această valoare pentru umplutura din stânga și din dreapta:

Figura carusel img ( umplutură: 0 $articol-separare / 2; )

Imaginile sunt translucide cu o proprietate de opacitate pentru a ilustra mai bine structura caruselului, iar un aspect flexibil pe elementul rădăcină a caruselului a fost folosit pentru a centrare verticală acesta în fereastra de vizualizare.

Rotirea caruselului

Pentru a facilita testarea rotației caruselului, voi adăuga un control interfața cu utilizatorul pentru a vă deplasa între imagini. Consultați demonstrația CodePen pentru HTML, CSS și JavaScript care implementează acest control; Aici voi descrie doar codul legat de rotație.

Folosim currImage o variabilă întreagă care indică ce imagine se află în fața caruselului. Când utilizatorul interacționează cu butoanele anterior/următorul, această variabilă este incrementată sau decrementată cu unu.

După actualizarea currImage , rotirea caruselului se face cu:

Figure.style.transform = `rotateY($(currImage * -theta)rad)`;

(Aici și în următoarele fragmente, literalele șablonului ES6 sunt folosite pentru a interpola expresii în șiruri, nu ezitați să utilizați operatorul tradițional de concatenare „+”, dacă preferați)

Unde teta la fel ca înainte:

NumImages = figure.childElementCount; theta = 2 * Math.PI / numImagini;

Rotația are loc teta deoarece este necesară rotația în sens invers acelor de ceasornic pentru a trece la articolul următor, iar astfel de valori de rotație sunt negative în transformările CSS.

Rețineți că valoarea currImage nu este limitată la un interval, ci poate crește la infinit, atât în ​​direcții pozitive, cât și negative. De fapt, dacă imaginea din față este ultima (deci currImage== n-1) și utilizatorul dă clic butonul următor dacă resetam currImage la 0 pentru a merge la prima imagine a caruselului, acesta va merge de la (n-1)*theta la 0 și va roti caruselul în direcția opusă peste toate imaginile anterioare. O problemă similară poate apărea atunci când apăsați butonul prev când prima imagine este prima.

Ca să fiu pretențios, ar trebui chiar să verific eventualele debordări imagine curentă, deoarece tipul de date Number nu poate lua valori arbitrar de mari. Aceste verificări nu sunt implementate în codul demonstrativ.

văzând baza css, care stă la baza caruselului, JavaScript poate fi acum utilizat pentru a îmbunătăți componenta în mai multe moduri, cum ar fi:

• Număr arbitrar de imagini
• Imagini cu lățime procentuală
• Mai multe cazuri de carusel pe pagină
• Configurații în funcție de instanță, cum ar fi dimensiunea spațiului și vizibilitatea pe spate
• Configurare folosind atribute de date HTML5*

În primul rând, elimin variabilele și regulile legate de originea transformării și rotațiilor din foaia de stil, deoarece acest lucru se va face folosind JavaScript:

$articol-latime: 40%; // Acum putem folosi procente $item-separation: 0px; // Acesta este acum setat cu Js $viewer-distance: 500px; .carusel ( padding: 20px; perspective: $viewer-distance; overflow: hidden; display: flex; flex-direction: column; align-items: center; > * ( flex: 0 0 auto; ) figure ( margin: 0; lățime: $articol-lățime; transform-style: preserve-3d; tranziție: transform 0,5s; img ( lățime: 100%; dimensiunea casetei: chenar-box; umplutură: 0 $item-separation / 2; &:not( :primul tip) (poziție: absolut; stânga: 0; sus: 0; ) ) ) )

Funcția carusel(rădăcină) ( // în curând... )

rădăcină Argumentul se referă la elementul DOM care conține caruselul.

De obicei, această funcție va fi un constructor pentru a genera câte un obiect pentru fiecare carusel de pe pagină, dar nu scriu aici o bibliotecă de carusel, așa că o funcție simplă este suficientă.

Pentru a crea mai multe componente pe aceeași pagină, codul așteaptă ca toate imaginile să fie încărcate prin înregistrarea unui ascultător pe obiectul fereastră pentru evenimentul de încărcare și apoi apelând carusel() pentru fiecare element cu o clasă carusel:

Window.addEventListener("load", () => ( var carusele = document.querySelectorAll(".carusel"); for (var i = 0; i< carousels.length; i++) { carousel(carousels[i]); } });

carusel()Îndeplinește trei sarcini principale:

• Configurarea navigației.
• Stabilirea transformărilor
• Înregistrați un ascultător de redimensionare a ferestrei pentru a menține caruselul responsiv, adaptându-l la noua dimensiune a ferestrei de vizualizare

Înainte de a analiza codul de configurare a transformării, voi analiza câteva variabile cheie și modul în care sunt inițializate pe baza configurației instanței:

Var figure = root.querySelector("figure"), images = figure.children, n = images.length, gap = root.dataset.gap || 0, bfc = "bfc" în root.dataset ;

Numărul de imagini (n) initializat in functie de numarul de elemente copil

element. Separarea între diapozitive (decalaj), inițializat din atributul HTML5 data-gap, dacă este setat. Steagul de vizibilitate din spate (bfc) este citit folosind API-ul setului de date HTML5. Acesta va fi folosit mai târziu pentru a determina dacă imaginile de pe spatele caruselului ar trebui să fie vizibile sau nu.

Personalizarea transformărilor CSS

Codul care stabilește proprietățile legate de transformările CSS este încapsulat în setupCarousel(). Această funcție imbricată ia două argumente. Primul este numărul de articole din carusel, care este variabila n introdusă mai sus. Al doilea parametru s este lungimea laturii poligonului carusel. După cum am menționat mai devreme, aceasta este egală cu lățimea imaginilor, astfel încât să puteți citi lățimea curentă a uneia dintre ele getComputedStyle():

SetupCarousel(n, parseFloat(getComputedStyle(images).width));

Astfel, lățimea unei imagini poate fi specificată folosind valori procentuale.

Window.addEventListener("resize", () => ( setupCarousel(n, parseFloat(getComputedStyle(images).width)); ));

Pentru simplitate, nu înțeleg ascultătorul redimensionat.

Primul lucru setupCarousel() ceea ce trebuie să faceți este să calculați apotema poligonului folosind parametrii trecuți și formula discutată anterior:

Apothem = s / (2 * Math.tan(Math.PI / n));

Această valoare este apoi folosită pentru a modifica începutul transformării elementului ondulat pentru a obține noua axă de rotație a caruselului:

Figure.style.transformOrigin = `50% 50% $(-apothem)px`;

Apoi se aplică stilurile de imagine:

Pentru (var i = 0; i< n; i++) { images[i].style.padding = `${gap}px`; } for (i = 1; i < n; i++) { images[i].style.transformOrigin = `50% 50% ${- apothem}px`; images[i].style.transform = `rotateY(${i * theta}rad)`; } if (bfc) { for (i = 0; i < n; i++) { images[i].style.backfaceVisibility = "hidden"; } }

Prima buclă atribuie un spațiu pentru spațiul dintre elementele carusel. A doua buclă configurează transformările 3D. Ultima buclă procesează fețele din spate dacă a fost specificat indicatorul corespunzător în configurația carusel.

In cele din urma, rotateCarusel() chemat pentru a aduce imaginea curentă în prim-plan. Aceasta este o mică funcție de ajutor care, având în vedere indexul imaginii randate, rotește elementul ondulat de-a lungul axei Y pentru a muta imaginea țintă înainte. De asemenea, este folosit de codul de navigare pentru a naviga înainte și înapoi:

Funcția rotateCarousel(imageIndex) ( figure.style.transform = `rotateY($(imageIndex * -theta)rad)`; )

Iată rezultatul final, un demo care creează mai multe carusele, fiecare cu o configurație diferită.

11.01.15 308976

În prezent, un glisor carusel este o funcționalitate care este pur și simplu necesară pe un site web de afaceri, un site web de portofoliu sau orice altă resursă. Împreună cu glisoarele pentru imagini pe ecran complet, glisoarele orizontale carusel se potrivesc bine în orice design web.

Uneori, glisorul trebuie să ocupe o treime din pagina site-ului. Aici glisorul carusel este folosit cu efecte de tranziție și cu machete receptive. Site-urile de comerț electronic folosesc un glisor carusel pentru a prezenta mai multe fotografii în postări sau pagini separate. Codul glisor este liber de utilizat și modificat în funcție de nevoile dvs.

Folosind jQuery împreună cu HTML5 și CSS3, vă puteți face paginile mai interesante cu efecte unice și puteți atrage atenția vizitatorilor asupra unei anumite zone a site-ului.

Slick - plugin-ul glisor carusel modern

Slick este un plugin jQuery gratuit ai cărui dezvoltatori susțin că soluția lor va satisface toate cerințele dvs. de glisare. Glisor receptiv - caruselul poate funcționa în modul „tigle” pentru dispozitivele mobile și în modul „glisare și plasare” pentru versiunea desktop.

Conține efectul de tranziție „fade out”, oportunitate interesantă„mod în centru”, încărcare leneșă a imaginilor cu defilare automată. Funcționalitatea actualizată include adăugarea de diapozitive și a unui filtru de diapozitive. Totul pentru ca dvs. să personalizați pluginul în funcție de cerințele dvs.

Modul demonstrativ | Descarca

Owl Carousel 2.0 - plugin jQuery pentru dispozitive tactile

În arsenalul acestui plugin se află un set mare de funcții, potrivite atât pentru începători, cât și pentru utilizatorii avansați. dezvoltatori experimentați. Aceasta este o versiune actualizată a glisorului carusel. Predecesorul său avea același nume.

Glisorul are câteva plugin-uri încorporate pentru a îmbunătăți funcționalitatea generală. Animația, redarea video, redarea automată a glisantei, încărcarea leneșă, reglarea automată a înălțimii sunt principalele caracteristici ale Owl Carousel 2.0.

Suport pentru funcții tragere și plasare drop este inclus pentru a facilita utilizarea pluginului pe dispozitivele mobile.
Pluginul este perfect pentru afișarea imaginilor mari chiar și pe ecrane mici ale dispozitivelor mobile.

Exemple | Descarca

Pluginul jQuery Silver Track

Un plugin jquery destul de mic, dar bogat, care vă permite să plasați un glisor carusel pe pagină, care are un nucleu mic și nu consumă multe resurse ale site-ului. Plugin-ul poate fi folosit pentru a afișa glisoare verticale și orizontale, cu animație și pentru a crea seturi de imagini din galerie.

Exemple | Descarca

AnoSlide - Slider jQuery ultra compact, receptiv

Ultra compact Slider jQuery- un carusel, a cărui funcționalitate este mult mai mult decât cea a unui glisor convențional. Include previzualizare o singură imagine, afișând mai multe imagini într-un carusel și slider bazat pe titluri.

Exemple | Descarca

Owl Carusel - slider jquery - carusel

Owl Carusel este un glisor de glisare și plasare activat prin atingere care poate fi încorporat cu ușurință în codul HTML. Pluginul este unul dintre cele mai bune glisoare, care vă permit să creați carusele frumoase fără nici un marcaj special pregătit.

Exemple | Descarca

Galerie 3D - carusel

Utilizează tranziții 3D bazate pe stiluri CSS și ceva cod Javascript.

Exemple | Descarca

Carusel 3D folosind TweenMax.js și jQuery

Carusel 3D superb. Se pare că este încă o versiune beta, pentru că tocmai acum am găsit câteva probleme cu ea. Dacă sunteți interesat să testați și să vă creați propriile glisoare, acest carusel vă va fi de mare ajutor.

Exemple | Descarca

Carusel folosind bootstrap

Glisor carusel receptiv, folosind tehnologia bootstrap, potrivit pentru noul dvs. site web.

Exemple | Descarca

Glisor bazat pe bootstrap - Carusel Moving Box

Cele mai căutate pe site-urile de portofoliu și de afaceri. Un tip similar de glisor - carusel se găsește adesea pe site-uri de orice tip.

Exemple | Descarca

Tiny Circleslider

Acest glisor de dimensiuni mici este gata să funcționeze pe dispozitive cu orice rezoluție de ecran. Glisorul poate funcționa atât în ​​modul circular, cât și în modul carusel. Cercul minuscul este prezentat ca o alternativă la alte glisoare de acest tip. Are suport încorporat sisteme de operare IOS și Android.

În modul circular, glisorul arată destul de interesant. Suportul pentru metoda drag and drop și sistemul automat de defilare a diapozitivelor sunt bine implementate.

Exemple | Descarca

Slider de conținut Thumbelina

Glisorul puternic, adaptiv, de tip carusel este perfect pentru un site modern. Funcționează corect pe orice dispozitiv. Are moduri orizontale și verticale. Dimensiunea sa este redusă la doar 1 KB. Plug-in-ul ultra compact are tranziții excelente excelente.

Exemple | Descarca

wow slider carusel

Conține peste 50 de efecte care vă pot ajuta să creați un glisor original pentru site-ul dvs.

Exemple | Descarca

Slider de conținut jQuery receptiv bxSlider

Redimensionați fereastra browserului pentru a vedea cum se adaptează glisorul. Bxslider vine cu peste 50 de opțiuni de personalizare și își prezintă caracteristicile cu diverse efecte de tranziție.

Exemple | Descarca

jCarusel

jCarousel este un plugin jQuery care vă va ajuta să vă organizați vizualizările imaginii. Veți putea crea cu ușurință carusele de imagini personalizate din cadrul prezentat în exemplu. Glisorul este receptiv și optimizat pentru platformele mobile.

Exemple | Descarca

ScrollBox - Plugin jQuery

Scrollbox este un plugin compact pentru crearea unui glisor - carusel sau linie de rulare text. Caracteristicile cheie includ un efect de defilare verticală și orizontală cu o pauză la trecerea mouse-ului.

Exemple | Descarca

dbpasCarusel

Un glisor simplu carusel. Dacă aveți nevoie de un plugin rapid, acesta este 100% potrivit. Vine cu doar caracteristicile de bază necesare pentru ca glisorul să funcționeze.

Exemple | Descarca

Flexisel: Plugin JQuery Carousel Slider receptiv

Creatorii Flexisel s-au inspirat din pluginul jCarousel de școală veche, făcând o copie a acestuia care se concentrează pe funcționarea corectă a glisorului pe dispozitivele mobile și tablete.

Aspectul receptiv al Flexisel, atunci când rulează pe dispozitive mobile, diferă de aspectul orientat spre dimensiunea ferestrei browserului. Flexisel este perfect adaptat pentru a lucra pe ecrane, atât de joasă, cât și de înaltă rezoluție.

Exemple | Descarca

Elastislide - Glisor carusel receptiv

Elastislide se adaptează perfect la dimensiunea ecranului dispozitivului. Puteți seta numărul minim de imagini de afișat la o anumită rezoluție. Funcționează bine ca un glisor carusel cu galerii de imagini folosind un înveliș fix împreună cu un efect de defilare verticală.

Exemplu | Descarca

Flex Slider 2

Slider gratuit de la Woothemes. Este pe bună dreptate considerat unul dintre cele mai bune glisante receptive. Pluginul conține mai multe șabloane și va fi util atât pentru utilizatorii începători, cât și pentru experți.

Exemplu | Descarca

Carusel uimitor

Carusel uimitor - glisor adaptiv Imagini jQuery. Suportă multe sisteme de gestionare a conținutului, cum ar fi WordPress, Drupal și Joomla. Suportă, de asemenea, Android și IOS și opțiuni pentru desktop sisteme de operare fără probleme de compatibilitate. Șabloanele de carusel uimitoare încorporate vă permit să utilizați glisorul în modurile vertical, orizontal și circular.