Carusel cu bufnițe - plugin jQuery cu suport tactil, permițându-vă să creați un glisor (carusel) receptiv (responsiv). Este foarte convenabil, simplu și plugin responsive pentru a crea glisoare, carusele etc. În acest articol voi încerca să explic și să vă arăt cum funcționează.
Instalarea pluginului Owl Carousel În primul rând, trebuie să descarcăm arhiva cu pluginul
Mai jos voi arăta un exemplu de instalare a unui plugin în șablonul DataLife Engine.
După ce am descărcat arhiva, deschideți-o și distribuiți fișierele după cum urmează: Fişier bufniță.carusel.cssși bufniță.tranziții.csspune în dosarstil deci sau css. Fişier bufniță.carusel.jspuneți în folderul js
Acum trebuie să conectăm aceste fișiere pentru ca ele să funcționeze în șablonul nostru. Deschiderea fișierului principal.tpl a înainte de linie noi intram următoarele rânduri:
Pliant css schimbați-l pe cel în care aveți css stiluri! Apoi, în partea de jos, înainte de linie
introducem urmatoarea linie: Deci asta este tot! Am terminat cu instalarea.
Acum trebuie să inserăm și să configuram glisorul în sine. Voi arăta cu un exemplu știri de top acestea va afișa știri populare prin caruselul nostru de bufnițe.
Pagina de documentație descrie toate opțiunile, demonstrațiile și modul de utilizare a pluginului nostru Owl Carousel. Urmați linkul și selectați orice glisor care vă place. Pentru ai noștri știri de top Am ales-o pe prima cu nume Imagini.În fila javascript, copiați aceste rânduri: $ (document) .gata (funcție () ($ ("# bufniță-demo"). owlCarousel (( redare automată: 3000, articole: 4, articoleDesktop:, articoleDesktopSmall:));));și introduceți-le în fișier principal.tplînainte de linie
Apoi, în fila CSS, copiați liniile: # owl-demo .item (marja: 3px;) # owl-demo .item img (afișare: bloc; lățime: 100%; înălțime: auto;) și includeți-le în orice css dosar sau dosar principal.tplînainte de linie
dar după linie
! Acum vom analiza codul nostru HTML și îl vom conecta la știri de top.În dosar principal.tpl introduceți eticheta în locul potrivit (știri de top) care, la rândul său, afișează o listă de știri populare, aspect care poate fi configurat în fișier topenews.tpl, mai multe despre asta mai jos .
Codul nostru etichetat ar trebui să arate astfel:
(știri de top)
Ei bine, acum ne rămâne să configuram știrile în sine. Deschiderea fișierului topnews.tpl si la inceput intram:
la final închidem atributul
Dacă utilizați unul dintre șabloanele mele cu Bootstrap, atunci, ca opțiune, puteți utiliza următoarele rânduri în fișier topnews.tpl:
(limita titlului = "55")
(limită text = „100”)
Citit
Știrile vor fi afișate după cum urmează
Acest plugin poate fi folosit aproape oriunde, precum și folosind eticheta (categoria personalizata) Poate înlocui și galeria DLE standard, voi publica un articol separat despre asta. Foloseste-l pentru sanatate ;)
Salutări, admin. DescarcaAtenție: limita de descărcare a fost atinsă. Vino maine =)
În prezent, un slider - un carusel - funcționalitate pe care trebuie doar să o ai pe un site web pentru o afacere, un site web - un 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 ar trebui să ocupe o treime din pagina site-ului. Aici glisorul carusel este folosit cu efecte de tranziție și machete receptive. Site-urile de comerț electronic folosesc un glisor carusel pentru a prezenta mai multe fotografii în postări sau pagini individuale. Codul glisor poate fi folosit liber și modificat în funcție de nevoile dvs.
Folosind jQuery împreună cu HTML5 și CSS3, vă puteți face paginile mai interesante, oferindu-le efecte unice și atrageți atenția vizitatorilor asupra unei anumite zone a site-ului.
Slick - plugin glisor modern - carusel
Slick este un plugin jquery gratuit ai cărui dezvoltatori susțin că soluția lor va satisface toate cerințele dvs. de glisare. Glisorul carusel receptiv poate funcționa în modul tile pentru dispozitivele mobile și în modul glisare și plasare pentru versiunea desktop.
Conține un efect de tranziție „fade”, o caracteristică 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, astfel încât să puteți personaliza pluginul în funcție de cerințele dvs.
Modul Demo | Descarca
Owl Carousel 2.0 - jQuery - plugin pentru atingere
Acest plugin are o gamă largă de funcții în arsenalul său, potrivite atât pentru începători, cât și pentru dezvoltatorii experimentați. aceasta versiune actualizata glisor - carusel. Predecesorul său a fost numit exact la fel.
Glisorul conține câteva plugin-uri încorporate pentru a îmbunătăți funcționalitatea generală. Animație, redare video, redare automată cu glisor, încărcare leneșă, corectare automatăînălțimi - principalele caracteristici ale Owl Carousel 2.0.
Trageți suport și picătură inclus pentru o utilizare mai convenabilă a pluginului dispozitive mobile. Pluginul este perfect pentru afișarea imaginilor mari chiar și pe ecrane mici ale dispozitivelor mobile.
Exemple | Descarca
Pluginul jQuery Silver Track
Destul de mic, dar bogat în funcționalități plugin jquery care vă permite să plasați un glisor pe pagină - un carusel care are un nucleu mic și nu consumă multe resurse ale site-ului. Pluginul poate fi folosit pentru a afișa glisoare verticale și orizontale, animații și pentru a crea seturi de imagini din galerie.
Exemple | Descarca
AnoSlide - Slider jQuery ultra compact, receptiv
Ultra compact Slider jQuery- carusel, a cărui funcționalitate este mult mai mult decât cea a unui glisor obișnuit. Ei includ previzualizare o singură imagine, afișați mai multe imagini într-un carusel și un glisor bazat pe titlu.
Exemple | Descarca
Owl Carusel - Slider Jquery - Carusel
Carusel bufniță - glisor cu suport ecrane tactileși tehnologia dragși drop, ușor de încorporat în codul HTML. Pluginul este unul dintre cele mai bune glisoare care vă permite 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
Excelent carusel 3D. Se pare că aceasta este încă o versiune beta, deoarece am descoperit câteva probleme cu ea chiar acum. 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
Bazat pe Bootstrap - cadrul glisor carusel Moving Box
Cele mai solicitate pe site-uri de portofoliu și afaceri. Acest tip de glisor carusel se găsește adesea pe orice tip de site.
Exemple | Descarca
Tiny Circleslider
Acest glisor mic 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 mic este prezentat ca o alternativă la alte tipuri similare de glisoare. Există suport încorporat sisteme de operare IOS și Android.
Glisorul arată destul de interesant în modul circular. Suportul de glisare și plasare și sistemul automat de defilare a diapozitivelor sunt implementate excelent.
Exemple | Descarca
Slider de conținut Thumbelina
Glisorul carusel puternic, receptiv, este perfect pentru un site web modern. Funcționează corect pe orice dispozitiv. Are moduri orizontale și verticale. Dimensiunea sa este redusă la doar 1 KB. Pluginul ultra compact are, de asemenea, tranziții excelente excelente.
Exemple | Descarca
Wow - glisor - carusel
Conține peste 50 de efecte care vă pot ajuta să creați un glisor original pentru site-ul dvs. web.
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 previzualizarea imaginii. Puteți crea cu ușurință imagini de carusel personalizate din cadrul prezentat în exemplu. Glisorul este receptiv și optimizat pentru a funcționa pe platforme mobile.
Exemple | Descarca
Scrollbox - plugin jQuery
Scrollbox este un plugin compact pentru crearea unui glisor - carusel sau linie de defilare a textului. Caracteristicile cheie includ defilarea verticală și orizontală cu pauză pe mouse-ul deasupra.
Exemple | Descarca
dbpasCarusel
Glisor simplu - carusel. Dacă doriți un plugin rapid, acesta este 100% bun. Vine doar cu funcțiile de bază necesare pentru ca glisorul să funcționeze.
Exemple | Descarca
Flexisel: Plugin JQuery Slider receptiv - Carusel
Creatorii Flexisel s-au inspirat din pluginul jCarousel de școală veche, făcând o copie a acestuia axată pe funcționarea corectă a glisorului pe dispozitivele mobile și tablete.
Aspectul receptiv al Flexisel, atunci când lucrați pe dispozitive mobile, diferă de aspectul orientat la 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 receptiv - carusel
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 glisor de carusel pentru galerie de imagini, folosind un înveliș fix împreună cu un efect de defilare verticală.
Exemplu | Descarca
FlexSlider 2
Glisor redistribuibil de la Woothemes. Este 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 receptiv imagini cu jQuery. Suportă multe sisteme de gestionare a site-urilor, cum ar fi WordPress, Drupal și Joomla. De asemenea, acceptă versiunile Android și IOS și desktop ale sistemelor de operare fără nicio problemă de compatibilitate. Șabloanele uimitoare de carusel încorporate vă permit să utilizați glisorul în modurile vertical, orizontal și circular.
Exemple | Descarca
/ * Aici începe caruselul nostru. Blocul .carusel-wrapper este poziționat relativ, elementul .carusel este poziționat absolut. ... * / .carusel-wrapper (poziție: relativă; / * Casetele poziționate absolut obțin înălțimea și lățimea de la părinte. Le-am făcut transparente în mod implicit, iar apoi se vor estompa când se vor face clic pe link-urile .arrow-prev și.arrow- următorul. * / .articol-carusel (poziție: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; umplutură: 25px50px; opacitate: 0; tranziție: all0.5sease-in-out; / * Notă umplutura din stânga și dreapta cu 50 px? În acest fel ne putem poziționa link-urile! Fiecare va avea 50 px lățime. De asemenea, folosesc link-uri goale cu model de fundalîn așa fel încât legăturile să arate ca săgeți. Verificați dacă v-ați schimbat Adresa URL a linkului cu URL-ul original, astfel încât linkurile 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: rgba (0,0,0,0); fundal: url ( „/carousel-arrow-dark.png”)50%50%/20pxno-repeat; / * Să ne aducem săgeata înapoi la stânga. * / & .arrow-prev (stânga: 0;) / * Și a doua la dreapta. Deoarece folosesc aceeași imagine pentru săgeată, o rotesc cu 180 de grade. * / & .arrow-next (dreapta: 0; -webkit-transform: rotiți (180deg); transform: rotiți (180deg);) ) / * Sunt foarte asemănător cu felul în care arată caruselul fundal întunecat iar dacă blocul .carusel-item este de clasa „light”, îi vom schimba textul în alb și vom folosi săgeți albe în loc de cele gri. Verificați din nou dacă calea către imaginea săgeții este corectă * / & .light (culoare: alb; .arrow (fundal: url ("/ carousel-arrow-light.png") 50% 50% / 20pxno-repeat;)) / * Scrieți o interogare media pentru a redimensiona săgețile pe dispozitive mai mici * / @media (lățimea maximă: 480px) (.săgeată și. Light.arrow (dimensiunea fundalului: 10px; poziția fundalului: 10px50% ;))) / * Setați ținta pentru afișarea linkurilor: niciuna; Astfel, scăpăm de saltul constant al browserului până în partea de sus a caruselului cu fiecare clic pe săgeți. Această proprietate este valabilă pentru orice articol al cărui identificator începe cu „articol-țintă”. * / (afișare: niciunul;) / * Mai sus, am făcut toate diapozitivele noastre carusel transparente, ceea ce înseamnă că atunci când caruselul se încarcă, vom primi în schimb un câmp mare gol. Schimbați valoarea transparenței pentru primul diapozitiv la 1 pentru afișare. De asemenea, setați indexul z la 2, poziționându-l deasupra restului diapozitivelor. * / .item-1 (z-index: 2; opacitate: 1;) / * Dar nu dorim ca primul diapozitiv să aibă întotdeauna opacitate: 1; altfel trebuie să ne străduim drumul prin acest diapozitiv în timp ce ceilalți se rotesc. * / *: target ~ .item-1 (opacitate: 0;) / * .. dar dacă # target-item-1 are focus și vrem să arătăm primul diapozitiv, apoi selectați-l cu pictograma ~ și setați opacitatea înapoi la 1 :-) * / # target-item-1: target ~ .item-1 (opacitate: 1;) / * Dacă alte elemente-țintă- # sunt focalizate, selectați-le folosind selectorul ~, afișați-le fără probleme , și plasați-le deasupra folosind z-index: 3. Aici puteți adăuga intervale suplimentare cu ID-ul articolului țintă dacă aveți mai mult de trei. Poate adăuga 10 articole simultan .. * / # target-item-2: target ~ .item-2, # target-item-3: target ~ .item-3 (z-index: 3; opacitate: 1;))
Da, subiectul este destul de complicat. Dar totuși, este adesea dificil să găsești ceea ce ai nevoie cu adevărat. Toate oferă scripturi extrem de sofisticate, cu o mulțime de funcționalități inutile. Și, de obicei, acestea sunt deja pluginuri comprimate.
Așa că o voi oferi pe a mea Opțiune alternativă un carusel jQuery foarte simplu.
Poate fi folosit ca un carusel de imagini, precum și ca un carusel de știri sau orice alt conținut =)
Singurele clopoței și fluiere pe care mi le-am permis au fost umbra de la blocul carusel.
UPD: 07/06/2014
Va arata cam asa: Descărcați DEMO
Structura va lua următoarea formă:
TJ carusel adaptiv simplu
Să descriem stilurile:
Carusel (lățime maximă: 1080px; / * lățime a întregului bloc * / margine: 50px automat; lățime: 100%;). Carusel-wrapper (marja: 10px 30px; / * umplutură pentru săgeți * / overflow: ascuns; / * ascunde conținutul în afara zonei principale * / poziție: relativ;). elemente-carusel (lățime: 10000px; / * setați o lățime mai mare pentru setul de articole * / poziție: relativ; / * poziționați caseta în raport cu caruselul principal zona * /). carusel -bloc (float: stânga; / * aranjați toate elementele carusel într-un rând * / lățime: 250px; / * setați lățimea fiecărui element * / padding: 10px 10px 10px 0px; / * faceți spații astfel încât ca elementele să nu se îmbine * /) .carusel -block img (display: block;) / *********** BUTONE *********** / .carusel-button -stânga a, .carusel-button-right a ( lățime: 25px; înălțime: 36px; poziție: relativ; sus: 80px; cursor: pointer; text-decor: niciunul;) .carusel-button-left a (float: stânga) ; fundal: url (../ imagini / carusel- stânga.png);) .carusel-button-dreapta a (float: dreapta; fundal: url (../ imagini / carusel-right.png); ) / *********** SHADOW *********** / .shadow (box-shadow: 0px 0px 10px rgba (0, 0, 0, 0.6);)
În consecință, umbra poate fi îndepărtată. Și pentru utilizare, trebuie doar să înlocuiți dimensiunea blocului principal și a blocurilor de „defilare” imbricate în css. De asemenea, este foarte ușor să faci bucla acest proces, astfel încât să se deruleze automat (în în acest caz, doar decomentați apelul la funcția auto_right). Adică, puteți face totul din această galerie simplă de care aveți nevoie în cadrul sarcinii!
De asemenea, trebuie remarcat faptul că atunci când exemplul dat este adaptiv, adică dimensiunea caruselului este adaptată în funcție de dimensiunea ecranului și va fi afișată corect atât pe ecranul unui computer sau laptop, cât și pe ecranele tabletelor și smartphone-urilor.
1.jInterogare faceți clic pe Carusel
Un bloc cu anunțuri de știri care se derulează. Săgețile stânga/dreapta sunt folosite pentru a derula prin blocuri. Arhiva conține un carusel în două stiluri: deschis și întunecat.
1.jQuery plugin carusel „carouFredSel”
Un carusel de imagini jQuery 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ă atașați acest carusel la site-ul dvs.
Plugin Slider Kit, carusel ușor cu căi diferite defilare.
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 asupra hoverului miniaturilor și a derulării cu rotița mouse-ului.
9. Carusel ușor
10. Carusel din blocurile Easy Paginate
Plugin jQuery „Easy Paginate”. Fiecare bloc dreptunghiular reprezintă un element obișnuit de listă li, 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”, „înapoi” și folosind butoanele de navigare de la fundul).
11. Rotator vertical „Vertical Ticker”
Rotator vertical JQuery: defilare automată a conținutului pe o pagină. Sunt furnizate butoane de navigare, precum și posibilitatea de a opri rotația și de a o reporni. Când treceți cu mouse-ul, mișcarea se oprește. La nivelul de marcare HTML, blocurile de defilare sunt reprezentate de elemente obișnuite din listă li.
12.javascript css zonă derulabilă
Soluție javascript „TinyScroller” pentru a crea o zonă derulabilă înfășurată într-un container DIV.
13. Pluginul jQuery „Smooth Div Scroll”
Plugin pentru implementarea derulării orizontale a conținutului într-o anumită zonă. Când treceți cursorul mouse-ului peste marginea din stânga sau din dreapta zonei, începe derularea.
Navigarea între diapozitivele de conținut se poate face folosind săgeți sau făcând clic pe o miniatură. În partea de jos există un buton „Afișare” care vă permite să ascundeți/afișați miniaturile sau Descriere completa diapozitiv.
15. Rotatorul de conținut „Carusel de conținut circular”
17. Scroller
Un bloc cu un scroller care apare la hover. Puteți derula prin conținut folosind fie bara de defilare, fie rotița mouse-ului.
Această soluție 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 din orice categorie 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 rotației 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 un site.
Acest plugin convertește elementele din listă (ul li) în elemente jQuery carusel.
26. carusel javascript ImageFlow
Imaginile sunt ușor de defilat cu rotița mouse-ului.
27. Derularea conținutului
Un bloc compact cu anunțul celor mai noi materiale pe site sau știri. Coloana din stânga afișează o listă paginată cu anunțuri scurte cu cele mai recente știri. Când selectați una dintre ele, 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 foarte bine pe pagina
