Owl Carusel. - plugin JQuery cu suport tactil, permițându-vă să creați un cursor receptiv (adaptiv) (carusel).
Este foarte confortabil, plugin simplu și adaptiv pentru a crea glisante, caruseluri etc.
În acest articol voi încerca să vă explic și să vă arăt cum funcționează.

Instalarea pluginului de carusel OWL
În primul rând, trebuie să descărcați arhiva cu pluginul

Mai jos, voi afișa un exemplu de instalare a unui plug-in la modelul motorului DataLife.

După ce am descărcat arhiva, deschideți-l și distribuiți fișiere după cum urmează:
Fişier owl.Carousel.Css. și OWL.TRANITIONS.CSS. loc în dosar stil. așa sau css.
Fişier owl.carousel.js. am pus în dosarul JS

Acum avem nevoie de aceste fișiere pentru a vă conecta la locul de muncă în șablonul nostru.
Deschideți fișierul main.tpl. Ajungat șir introduce următoarele rânduri:
Pliant css. Schimbați unul în care aveți css. Stiluri!
Apoi, în partea de jos în fața șirului introduceți un astfel de șir:
Asta este! Am terminat cu instalare.

Acum trebuie să introducem și să configuram cursorul în sine.
Vă voi arăta despre exemplu topnews.acestea voi retrage știri populare prin caruselul nostru owl.

Pe pagina de documentare descrie toți parametrii, demo-urile și modalitățile de utilizare a pluginului nostru de carusel Owl.
Mergeți pe link și alegeți orice glisor care vă place.
Pentru a noastră topnews. Am ales prima dată numită Imagini.În fila JavaScript, copiați aceste linii:
$ (Document) .Ready (Funcție () ($ (# Owl-demo "). Owlcarousel (AutoPlay: 3000, articole: 4, articoleSktop:, articoleSktopsmall :));)); și introduceți-le în fișier main.tpl. În fața șirului

Apoi, în fila CSS Copiați rândurile:
# Owl-Democitem (Margin: 3px;) # Owl-Democitem IMG (afișaj: bloc; lățime: 100%; înălțime: auto;) și conectați-le la oricare css. fișier fie la fișier main.tpl. În fața șirului Dar după șir !
Acum vom analiza codul nostru HTML și vom conecta la topnews.În dosar main.tpl. Introduceți eticheta în locul potrivit (Topnews) care, la rândul său, afișează o listă de știri populare, aspect care pot fi configurate în fișier topenews.tpl,despre asta chiar mai jos .
Codul nostru cu eticheta ar trebui să arate astfel:

Ei bine, acum am plecat să personalizăm știrile.
Deschideți fișierul T.opnews.tpl.Și la început se potrivește:

Dacă utilizați unul dintre șabloanele mele cu bootstrap, atunci ca o opțiune puteți utiliza următoarele linii în fișier topnews.tpl:

Știrile vor fi afișate în acest formular.

Acest plugin poate fi folosit aproape oriunde, precum și utilizarea etichetei (Categoria personalizată)
De asemenea, pot înlocui galeria standard Dle, voi publica un articol separat despre acest lucru. Utilizarea asupra sănătății;)

Respect admin. descarca ATENȚIE: Se realizează o limită de descărcare. Veni mâine \u003d)

1. JQuery "Clickcarousel" Carusel

Bloc cu anunțuri de știri derulare. Pentru blocurile de derulare, se utilizează săgețile stânga / dreapta. În caruselul de arhivă din două modele stilizate: luminoase și întunecate.

1. JQuery Carusel, plugin "caroufredsel"

Caruselul proaspăt proaspăt de imagini pe jQuery.

4. JQUERY Plugin: carusel elastislide

5. Plug "TinyCarousel"

Glisoare excelente de conținut sub forma unui carusel de imagine folosind jQuery. Pagina demo descrie modul de fixare a acestui carusel pe site-ul dvs.

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

7. Carusel JavaScript

8. Plugin JQuery "Grid Navigation Effects"

Navigarea originală între miniaturile imaginii. Pentru a vizualiza efectul din partea dreaptă a paginii demo, faceți clic pe butoanele sus și jos. Această soluție jQuery asigură, de asemenea, efectul atunci când deplasați cursorul pe miniatură și derulați cu roata mouse-ului.

9. Carusel ușor

10. Carusel din blocuri "Easy Paginat"

plugin jQuery "Easy Paginat". Fiecare bloc dreptunghiular este elementul de listă Li obișnuit, cu elementele mai mult de trei, pentru a le vizualiza tot ce trebuie să utilizați navigația, similară cu glisorul (folosind săgețile "Redirecționare" și utilizând butoanele de navigare la fund).

11. Rotator vertical "Ticker vertical"

Rotator vertical pe jQuery: derularea automată a conținutului pe pagină. Butoanele de navigare sunt furnizate, precum și capacitatea de a opri rotirea și de a rula din nou. Când depuneți mișcările cursorului mouse-ului. La nivelul HTML de marcare, blocurile de derulare sunt reprezentate de elementele liste convenționale Li.

12. Zona de derulare JavaScript CSS

soluția JavaScript "Tinyscrll" pentru a crea o zonă de derulare plasată în containerul DIV.

13. pluginul "Smooth Div Scroll"

Plugin pentru a implementa defilarea orizontală a conținutului într-o anumită zonă. Când deplasați cursorul mouse-ului pe marginea stângă sau dreaptă a zonei, începe derularea.

Navigarea între diapozitivele de conținut poate fi efectuată utilizând săgețile sau apăsând miniatura. Mai jos există un buton "Afișare", permițând ascunde / afișa miniaturi sau descriere completa Glisați.

15. Conținutul rotorului "Caruselul de conținut circular"

17. Scroller.

Un bloc cu un scroller care apare când se află cursorul. Puteți derula conținutul utilizând bara de defilare și utilizând roata mouse-ului.

O soluție de jQuery similară a fost făcută sub impresia unui astfel de efect asupra Apple. Dezvoltatorii acestei corporații au găsit întotdeauna decizii interesante pe care le-a inspirat maestrul din întreaga lume. Pentru a demonstra pluginul, selectați dintr-o categorie din listă.

19. Slider uimitor

Glisorul este generat automat. Datele cu numele bunurilor, descrierii, link-ului și adresa de imagine sunt preluate din fișierul Slider.db.txt. Tehnologii folosite: CSS, PHP, JQuery.

20. Rotația blocurilor utilizând jQuery

Pentru a vedea efectul de rotație al blocurilor, apăsați unul dintre mici dreptunghiuri de pe pagina demo.

Pluginul pentru conținutul de defilare, de exemplu, poate fi utilizat pentru a afișa cele mai recente știri sau pentru a afișa Twitter pe site.

22. Blocul dinamic "Comentariile clienților"

Rotirea automată a conținutului blocului. Tehnologii folosite: PHP, XML, CSS, JQuery.

Acest plugin copiază elementele listei (ul Li) în elementele jQuery ale caruselului.

26. JavaScript carusel "Imageflow"

Imaginile derulați cu ușurință prin roata mouse-ului.

27. Derolarea conținutului.

Blocul compact cu anunțarea celor mai recente materiale pe site sau știri. În coloana din stânga afișează o listă ruptă de anunțuri scurte ale celor mai recente știri. Când alegeți unul dintre ele în coloana din dreapta afișează mai mult descriere detaliata și referire la citirea textului integral al publicației. Implementat cu jQuery.

Imaginile cu referințe sunt derulate, când deplasați mouse-ul, opriți opririle și apare bara de navigare. Când deplasați mouse-ul, este afișat și numele său între butoanele de control. Arata foarte frumos pe pagina

33. Scroll Conținut, MOOTOOLS Plugin "Scrollbar"

Derularea se efectuează atât folosind bara de defilare și utilizând roata mouse-ului.

Da, subiectul lui Davuch-Tacked. Dar totuși, găsiți ceea ce este cu adevărat necesar este adesea dificil. Toate oferă scripturi puternic sofisticate, cu multe funcționale inutile. Și de obicei pluginurile deja comprimate.

Prin urmare, voi oferi propria mea opțiune alternativă Carusel foarte simplu pe jquery.

Poate fi folosit atât imagini de carusel cât și un ziar al știrilor sau al oricărui alt conținut \u003d)

Singurul transport mic pe care mi-am permis-o este o umbră din blocul de carusel.

UPD: 07.07.2014.

Va arăta așa:
Demo descărcare

Structura va lua forma următoare:

Descriim stiluri:

Carusel (max lățime: 1080px; / * lățimea întregului bloc * / margine: 50px auto; lățime: 100%;) Conținut, care depășește zona principală * / poziție: rudă;) .Carousel-elemente (lățime: 10000px; / * instalați o lățime mare pentru set de elemente * / poziție: rudă; / * poziționați unitatea față de zona principală a caruselului * /) / * Faceți o schiță, astfel încât elementele să nu îmbină * /) .Carousel -block img (afișaj: bloc;) / *********** butoane *********** / .Carousel-buton-stânga a,. carusel-buton-dreapta A (lățime: 25px; înălțime: 36px; poziție: rudă; Top: 80px; cursor: pointer; text-decorare: Nici unul;) A (float: stânga; fundal: URL (../ Imagini / carusel stânga.png);). Carusel-buton-dreapta a (float: Dreapta; Fundal: URL (/ Imagini / Carusel-dreapta.png); ) / *********** Umbra *********** / .SHADOW (Box-umbra: 0px 0px 10px RGBA (0, 0, 0, 0.6);)

Și în cele din urmă, cum ar trebui să funcționeze:

// procesare Faceți clic pe săgeată dreapta $ (Document) .on ("faceți clic", ".Carusel-buton-dreapta", funcția () (Var Carusel \u003d $ (Acest) ("carusel"); dreapta_carusel ( Carusel); întoarce false;)); // procesare Faceți clic pe săgeata stânga $ (Document) .on ("faceți clic", "Carusel-buton-stânga", funcția () (VAR Carousel \u003d $ (Acest) ("carusel"); stânga_carusel ( Carusel); întoarce falsă;)); Funcție stânga_carusel (Carusel) (Carusel) .find ("carusel-bloc"). Outerwidth (); $ (carusel) .find ("articolele carusel-bloc-bloc"). Eq (- 1) .Clone ( ). Prependto ($ (Carusel) .find ("obiecte de carusel")); $ (carusel) .find ("obiecte de carusel"). CSS ("stânga": "-" + bloc_width + "px "); $ (Carusel) .find (" obiecte de carusel-obiecte. Carusel-bloc "). EQ (-1) .Remove (); $ (carusel) .find (" carusel-elemente ") .nimate ( (Stânga: "0px"), 200);) Funcție dreapta_carusel (carusel) (VAR Block_Width \u003d $ (carusel) .find ("carusel-bloc"). Outerwidth (); $ (carusel) .find ("carusel -Items "). Animate ((stânga:" - "+ bloc_width +" px "), 200, funcția () (carusel) .find (" articolele carusel-bloc-bloc "). Eq (0) .Clone (). Anexa ($ (Carusel) .find ("obiecte de carusel")); $ (carusel) .find ("obiecte de carusel-carusel-bloc"). Eq (0) .Remove (); Carusel) .find ("articolele de carusel"). CSS ("stânga": "0px"));)))));));) . Carusel: primul ");)) // auto Funcție Auto_right (Funcție (dacă (dacă (CARLELEL) .is ("hover")) dreapta_carusel (Carusel); ), 3000)) // cursorul pe caruselul $ ("Document) .on (" MouseInter "," .Carousel ", funcția () ($ (Acest )Addclass (" hover ")) // a eliminat Cursor din carusel $ (document) .on ("mouseLleave", ".Carousel", funcția () ($ (Acest )Removeclass ("hover"))

În consecință, pucul poate fi îndepărtat. Și pentru utilizare, trebuie doar să înlocuiți dimensiunea unității principale și blocuri imbricate de "decupare". De asemenea, este foarte ușor să slăbiți acest proces pentru a fi automat (în acest caz, Este suficient să ridicați apelul la funcția Auto_right). Adică, este posibil să faceți din această galerie simplă, tot ce aveți nevoie în cadrul sarcinii!

De asemenea, trebuie remarcat atunci când exemplul exemplului este adaptiv, adică dimensiunea caruselului este adaptată în funcție de dimensiunea ecranului și va fi afișată corect atât pe ecranul computerului, fie pe ecranul laptopului, cât și pe ecranele comprimatelor și smartphone-urilor.

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

Uneori, glisorul trebuie să ocupe o treime din pagina site-ului. Aici glisorul - caruselul este utilizat cu efectele tranzițiilor și cu machete adaptive. Site-urile de comerț electronic Utilizați un cursor - carusel pentru a demonstra o varietate de fotografii în publicații separate sau în pagini. Codul cursorului poate fi utilizat liber și modificat în conformitate cu nevoile.

Folosind jQuery împreună cu HTML5 și CSS3, puteți face paginile dvs. mai interesante oferindu-le efecte unice și atrage vizitatorii în zona specifică a site-ului.

SLICK - Pluginul de glisor modern - Carusel

SLICK este distribuit gratuit JQuery - plugin, dezvoltatorii care susțin că decizia lor va satisface toate cerințele dvs. pentru cursor. Sliderul adaptiv - caruselul poate lucra în modul "Placi" pentru dispozitivele mobile și, în modul "Draging" pentru versiunea desktop.

Conține efectul tranziției "atenuării", posibilitatea interesantă de "mod în centru", încărcarea leneș a imaginilor cu o autostradă. Funcționalitatea actualizată include adăugarea de diapozitive și un filtru de diapozitive. Toate astfel încât să configurați pluginul în conformitate cu cerințele dvs.

Modul demo | Descarca

OWL Carusel 2.0 - JQuery - plugin cu abilitatea de a utiliza dispozitivele touch

În arsenalul acestui plugin - un set mare de funcții potrivite atât pentru noii veniți, cât și pentru dezvoltatorii experimentați. aceasta versiune actualizata Slider - Carusel. Predecesorul său a fost chemat doar.

Sliderul are unele pluginuri încorporate pentru a îmbunătăți funcțional total. Animație, Redare video, Slider Autorun, Loading leneș, ajustarea automată Înălțimile sunt principalele caracteristici ale caruselului Owl 2.0.

Susținerea caracteristicilor de drag și drop este inclusă pentru utilizarea mai convenabilă a plug-in-ului dispozitive mobile.
Pluginul este perfect pentru afișarea imaginilor mari, chiar și pe ecrane mici de dispozitive mobile.

Exemple | Descarca

jQuery Plugin Silver Track

Destul de mic, dar bogat în funcționalitatea pluginului JQuery, care vă permite să plasați cursorul pe pagină - un carusel cu un miez mic și nu consumă multe resurse ale site-ului. Pluginul poate fi utilizat pentru a afișa glisoare verticale și orizontale, cu animație și crearea seturilor de imagini din galerie.

Exemple | Descarca

ANOSLIDE - Slider jquery adaptiv ultra compact

Ultra compact jQuery Slider. - Carusel, a cărui funcționalitate este mult mai mare decât cea a unui cursor convențional. Include previzualizare O imagine, cartografiază mai multe imagini sub forma unui cursor bazat pe carusel și titluri.

Exemple | Descarca

Owl Carusel - JQuery Slider - Carusel

Owl Carusel - Glisor cu suport pentru ecrane touch și tehnologie de drag și drop, ușor de construit în cod HTML. Pluginul este unul dintre cele mai bune glisoare care vă permit să creați carusel frumos fără nici un marcaj special preparat.

Exemple | Descarca

Galeria 3D - Carusel

Utilizează 3D - tranziții bazate pe stiluri CSS și un cod JavaScript mic.

Exemple | Descarca

Carusel 3D folosind Tweenmax.js și JQuery

Minunat carusel 3D. Se pare că aceasta este încă versiunea beta, pentru că am găsit câteva probleme cu ea literalmente acum. Dacă sunteți interesat de testarea și crearea propriilor glisante - acest carusel va fi un mare ajutor.

Exemple | Descarca

Carusel folosind bootstrap.

Adaptive Slider - Carusel folosind tehnologia Bootstrap doar pentru noul site web.

Exemple | Descarca

Bazat pe Bootstrap - Slider-cadru - carusel de cutie în mișcare

Cele mai populare pe site-urile de portofoliu și de afaceri. Acest tip de cursor - carusel este adesea găsit pe orice tip de site-uri.

Exemple | Descarca

Tiny Circleder.

Acest glisor mic de dimensiune este gata să funcționeze pe dispozitivele cu orice rezoluție a ecranului. Sliderul poate funcționa atât în \u200b\u200bmodul circular cât și în carusel. Tiny Circle este reprezentat ca o alternativă la alte glisori de acest tip. Există un suport încorporat sisteme de operare IOS și Android.

În modul circular, glisorul arată destul de interesant. Suport perfect implementat pentru metoda de tragere și picătură și sistemul de diapozitive automate de derulare.

Exemple | Descarca

Glisorul de conținut Thumbelina.

Slider puternic, adaptiv, carusel, este perfect pentru un site modern. Funcționează corect pe orice dispozitive. Are moduri orizontale și verticale. Dimensiunea sa este minimizată la numai 1 KB. Pluginul ultra compact la orice altceva are tranziții excelente netede.

Exemple | Descarca

Wow - Slider - Carusel

Conține mai mult de 50 de efecte, care vă pot ajuta să creați un cursor original pentru site-ul dvs.

Exemple | Descarca

Adaptive JQuery BaxLider Glisor de conținut

Modificați dimensiunea ferestrei browserului pentru a vedea cum este adaptat glisorul. BxSlider vine cu mai mult de 50 de opțiuni pentru setări și demonstrează funcțiile sale cu diferite efecte de tranziție.

Exemple | Descarca

jcarousel.

jcarousel - plugin JQuery care va ajuta la organizarea imaginilor dvs. Puteți crea cu ușurință diguri personalizate de imagini din elementele de bază care sunt afișate în exemplul. Glisorul este adaptiv și optimizat pentru a lucra pe platforme mobile.

Exemple | Descarca

Decollbox - plugin jQuery

Plugin compact de scrollbox pentru a crea un șir de șlefuire a caruselului sau a textului. Funcțiile principale includ efectul unei derulări verticale și orizontale, cu o pauză atunci când deplasați cursorul mouse-ului.

Exemple | Descarca

dBPASCARUUSEL.

Simplu Slider - Carusel. Dacă aveți nevoie de un plugin rapid - acest lucru va fi potrivit 100%. Se livrează numai cu funcțiile de bază necesare cursorului.

Exemple | Descarca

Flexisel: Slider Adaptive JQuery Plugin - Carusel

Creatorii Flexisel au fost inspirați de pluginul vechi de școală Jcarousel, făcându-l o copie axată pe funcționarea corectă a cursorului pe dispozitive mobile și tablete.

Layout-ul adaptiv Flexisel, atunci când lucrați pe dispozitivele mobile, diferă de layout-ul orientat spre ferestre al browserului. Flexiselul este perfect adaptat la locul de muncă pe ecrane, atât de rezoluție joasă, cât și înaltă.

Exemple | Descarca

Elastislide - Slider adaptiv - Carusel

Elastislide se adaptează perfect la dimensiunea ecranului dispozitivului. Puteți seta numărul minim de imagini afișate la o anumită rezoluție. Funcționează bine ca un glisor - carusel cu galerii de imagini care utilizează un înveliș fixe împreună cu efectul derulare verticală.

Exemplu | Descarca

FlexSlider 2.

Glisorul distribuit în mod liber din Woothemes. Dreptul este considerat unul dintre cele mai bune glisoare adaptive. Pluginul conține mai multe șabloane și va fi util atât pentru utilizatorii începători, cât și experții.

Exemplu | Descarca

Carusel uimitor.

Caruselul uimitor - slider adaptiv Imagini pe jQuery. Suportă multe sisteme de management al site-urilor, cum ar fi WordPress, Drupal și Joomla. De asemenea, acceptă opțiunile Android și IOS și desktop pentru sistemele de operare fără probleme de compatibilitate. Șabloanele de carusel uimitoare încorporate vă permit să utilizați un cursor în moduri verticale, orizontale și circulare.

Exemple | Descarca

Plugin-uri jquery.Schever vă permite să afișați conținutul site-urilor într-o formă mai atractivă. Cu astfel de pluginuri, puteți crea prezentări frumoase direct pe paginile site-urilor și atrage atenția vizitatorilor.

1. Bootstrap Ambilight Glider

Bootstrap ambilight glisor. - Pluginul pentru a crea glisante / caruseluri cu efectul strălucirii înconjurătoare și a funcționalității de bootstrap.

2. JQuery Touchswipe Carusel

jquery.-Plată Touchswipe carusel. Vă permite să determinați ecranul tactil și să imitați apăsarea butonului mouse-ului.

3. PRODUSELIDE.

Articole. reprezintă jquery.-Plată pentru a crea un carusel care va funcționa atât pe desktop, cât și pe dispozitivele senzoriale mobile.

4.

– jquery.-Plată pentru a crea caruseluri adaptive / glisoare.

5.

Plugin complet adaptiv și optimizat jquery.-Alessellers. Pentru animație aici sunt folosite aici. CSS3.-Translată, dar oferă, de asemenea, o opțiune de rezervă pe jquery.. Pluginul suportă un număr nelimitat de diapozitive cu orice tip de conținut. Poate interacționa cu tastatura și, în același timp, funcționează bine în majoritatea browserelor, inclusiv mobile.

6. Silvertrack.

Silvertrack. – jquery.- Planginind cu posibilitatea de expansiune. Constă dintr-un mic nucleu, care poate fi conectat la alegerea pluginurilor convenabile.

7. Owl Carusel 2

Owl Carusel 2. - carusel complet adaptiv pentru jquery / zepto. cu suport pentru ecrane senzoriale.

8. Utilcarousel.

Utilcarousel. - Conecteaza jquery.-crule S. tranziții netedeimplementate de accelerația hardware. El este complet adaptabil. Pluginul suportă ecrane senzoriale și utilizează tridimensional CSS3.- Animație cu accelerație hardware. Datorită acestui lucru, pluginul va arăta bine atât pe PC-urile desktop, cât și pe dispozitivele mobile. A guverna Utilcarousel. Puteți cu ajutorul atingerii, navigației sau a roții mouse-ului.

9. Slick.

Slick. Este adaptabil jquery.Schever, în care există tot ceea ce poate fi necesar.

10. CodingJack 3D Carusel

Acest carusel este susținut de dispozitive ios. și Android și echipate cu o scădere senzorială funcțională. Arată grozav pe tablete și smartphone-uri.

11. Slideshow jquery.

jquery slideshow. Este un carusel și un cursor cu suport pentru controlul gesturilor cu dispozitivele touch. Arhiva pluginului cântărește doar 2 kilobytes.

12. Flimroll.

Flimroll. - miniatura jquery.-Alessel, care concentrează atenția utilizatorului asupra unui obiect specific, plasându-l în centrul ecranului.

13. Tikslus.

Tikslus. reprezintă complet carusel adaptiv pe jquery. Cu multe funcții și proprietăți. Iar adaptabilitatea ridicată a pluginului vă permite să nu specificați dimensiunea imaginilor. În plus, merită să remarcăm suportul de animație arbitrară bazată pe CSS3.- Clase. Tikslus. pot fi utilizate cu plugin-ul JQuery Mobile..

14. Decollbox.

Decollbox. - Simplu, miniatural jquery.- Plagin, care se transformă în liste într-un șir de carusel sau care rulează.

15. Sky Touch Carusel

Sky Touch Carusel. - Conecteaza jquery.- Având în vedere un set bogat de funcții. Pluginul adaptiv, suportă ecrane tactile și, în același timp, funcționează rapid și ușor. Setările vă permit să modificați aspectul caruselului utilizând Css..

16.

- Flexibil jquery.-Plație pentru a crea o prezentare de diapozitive sau carusel. Are multe setări, inclusiv tipuri de tranziție, alinierea imaginii și viteza de schimbare a cadrelor.