Responsive sau, dacă doriți, designul web receptiv nu este acum doar o altă tendință de proiectare, este deja un fel de standard de dezvoltare a site-ului web care asigură universalitatea site-urilor web, o percepție vizuală armonioasă pe ecranele diferitelor dispozitive ale utilizatorilor. Mai recent, în curs de dezvoltare șablon receptiv, A trebuit să fac față diferitelor dificultăți de integrare a anumitor glisoare și galerii de imagini fără a rupe stilul general de proiectare. Acum totul este mult mai simplu, există un număr mare de soluții gata făcute pe rețea și ceea ce este deosebit de plăcut, majoritatea sunt disponibile gratuit, open source.
Datorită varietății de instrumente oferite, am compilat o mică imagine de ansamblu asupra celor mai notabile evoluții în materie de adaptare glisor jQuery cele mai recente imagini și sunt distribuite fără restricții, adică. absolut gratuit.
Wow glisor
Glisor de imagine jQuery receptiv cu set excelent efecte vizuale(viraje, plecări, estompare, spirale, jaluzele, etc ...) și multe șabloane gata făcute. Cu ajutorul expertului de inserare a paginii încorporat WOW Slider, puteți crea cu ușurință și cu ușurință prezentări uimitoare în câteva minute. Site-ul dezvoltatorului conține toată documentația necesară pentru configurarea și utilizarea pluginului în limba rusă, exemple live excelente ale activității pluginului. De asemenea, este disponibil pentru descărcare separat plugin wordpressși un modul pentru Joomla. Sunt sigur că mulți vor dori acest glisor minunat, atât pentru începători, cât și pentru webmasteri cu experiență.
HiSlider
HiSlider - HTML5, glisor Jquery și galerie de imagini, absolut plugin gratuit pentru uz personal pe site-uri care rulează sisteme populare - WordPress, Joomla, Drupal. Cu ajutorul acestui instrument simplu, dar destul de funcțional, puteți crea cu ușurință diapozitive uimitoare și vii, prezentări eficiente și anunțuri de mesaje noi pe paginile site-urilor dvs. Mai multe șabloane și skin-uri gata făcute pentru glisor, efecte de tranziție uimitoare (schimbare) ale conținutului, ieșirea diverselor conținuturi multimedia: videoclipuri de pe YouTube și Vimeo, setări flexibile ale utilizatorului etc.
Glisor Nivo
Nivo Slider este un vechi bun, bine cunoscut pentru toată lumea din subiect, unul dintre cele mai frumoase și ușor de utilizat glisor de imagine. Pluginul jQuery Nivo Slider este gratuit pentru descărcare și utilizare, distribuit sub licența MIT. Există, de asemenea, un plugin separat pentru WordPress, dar, din păcate, este deja plătit și va trebui să plătiți 29 USD pentru o licență. Este mai bine să faceți puțină magie cu fișierele tematice WP și să atașați versiunea gratuită jQuery a pluginului Nivo Slider pe blogul dvs., deoarece există suficiente informații despre cum să faceți acest lucru pe web.
În ceea ce privește funcționalitatea, totul este în regulă cu asta. Pentru lucru, se utilizează biblioteca jQuery v1.7 +, efecte de tranziție frumoase, setări simple și foarte flexibile, aspect receptiv, decupare automată a imaginilor și multe altele.
Ideea glisorului a fost inspirată de dezvoltatorii care sunt bine-cunoscuți pentru stilul de prezentare a produselor Apple, unde mai multe obiecte mici (imagini) se schimbă făcând clic pe categoria selectată cu un efect de animație simplu. Codrops vă oferă un tutorial detaliat despre cum să creați acest glisor, un aspect HTML complet, un set de reguli CSS și un plugin executabil jQuery, precum și un minunat exemplu live de utilizare a glisorului.
Slit Slider
Glisor de imagine pe ecran complet în jQuery și CSS3 + un tutorial detaliat despre integrarea pluginului în paginile site-ului. Ideea este să deschideți diapozitivul curent cu conținut specific atunci când navigați la conținutul următor sau anterior. DIN folosind jQueryși animații CSS puteți crea tranziții unice între diapozitive. Aspectul glisor receptiv asigură aspectul la fel de bun pe ecrane tipuri diferite dispozitivele utilizatorului.
Glisor de conținut elastic
Glisor de conținut, care se reglează automat în lățime și înălțime în funcție de dimensiunea containerului părinte în care se află. Destul de simplu în execuție și flexibil în setarea glisorului alimentat de jQuery, cu navigare în partea de jos, când dimensiunea ecranului este modificată în jos, navigarea este afișată sub formă de pictograme. Documentație foarte detaliată (tutorial despre creație) și exemple live de utilizare.
Slider 3D Stack
Un glisor experimental care arată imagini cu tranziții din planul 3D. Imaginile sunt împărțite în două grămezi orizontale, săgețile de navigare sunt folosite pentru a schimba și trece fiecare imagine ulterioară la starea de vizionare. În general, nimic special, dar ideea în sine și tehnica de execuție sunt destul de interesante.
Un glisor de imagine jQuery foarte simplu, 100% receptiv și cu ecran complet. Glisorul se bazează pe tranziții CSS (proprietatea de tranziție) împreună cu magia jQuery. Lățimea maximă este setată la 100% în mod implicit, astfel încât dimensiunea imaginilor se va schimba în funcție de modificările dimensiunii ecranului. Nu există efecte de animație speciale și delicatese în design, totul este simplu și ascuțit pentru o funcționare lină.
Diapozitive minime
Numele vorbește de la sine, acesta este probabil unul dintre cele mai ușoare și minimaliste glisoare de imagine jQuery pe care le-am întâlnit (plugin în 1kb). ResponsiveSlides.js este un mic plugin jQuery care creează prezentări de diapozitive folosind elemente din interiorul unui container. Funcționează cu o gamă largă de browsere, inclusiv toate versiunile de IE, faimoasa frână de progres, de la IE6 și în sus. Lucrarea folosește tranziții CSS3 împreună cu javascript, pentru fiabilitate. Marcare simplă utilizând o listă neordonată, personalizând tranzițiile și calendarul, automat și control manual comutarea diapozitivelor, precum și suport pentru mai multe prezentări simultan. Iată un „copil” atât de jucăuș.
aparat foto
Aparat foto - jQuery gratuit plugin pentru organizarea de prezentări de diapozitive pe paginile site-ului, glisor ușor cu multe efecte de tranziție, cu aspect 100% receptiv și foarte setări simple... Se potrivește perfect pe ecranele oricărui dispozitiv de utilizator (monitoare PC, tablete, smartphone-uri și Celulare). Capacitatea de a demonstra videoclipuri încorporate. Schimbarea automată a diapozitivelor și controlul manual folosind butoane și un bloc de miniaturi de imagini. O galerie de imagini aproape completă într-un design compact.
bxSlider jQuery
Un alt glisor jQuery receptiv destul de simplu. Orice conținut, videoclip, imagini, text și alte elemente pot fi plasate în diapozitive. Suport extins ecranele tactile... Utilizarea animațiilor de tranziție CSS. Un număr mare de variații diferite ale prezentării de prezentări de diapozitive și galerii de imagini compacte. Control automat și manual. Comutarea diapozitivelor folosind butoane și selectând miniaturi. Dimensiune mică a fișierului sursă, foarte ușor de configurat și implementat.
FlexSlider 2
FlexSlider 2 - Versiune actualizata glisor cu același nume, cu o reacție îmbunătățită, reducerea scriptului și reducerea redimensionării / desenării. Pluginul include un glisor de bază, control al diapozitivelor cu miniaturi, săgeți încorporate stânga-dreapta și o bară de navigare de jos sub formă de butoane. Capacitatea de a afișa videoclipuri în diapozitive (vimeo), setări flexibile ale parametrilor (tranziții, decorare, interval de timp), aspect complet receptiv.
Galleria
Bine cunoscut și destul de popular, plugin jQuery receptiv pentru crearea de galerii de imagini și glisoare de înaltă calitate. Interfața glisantă, datorită panoului său de control seamănă vizual cu un player video familiar, pluginul include mai multe teme diferite. Suport pentru video și imagini încorporate de la servicii populare: Flickr, Vimeo, YouTube și altele. Documentație detaliată la configurare și utilizare.
Coacăze
Un glisor de imagini jQuery gratuit, fără clopote și fluiere, scris special pentru designul web receptiv. Blueberry este un plugin experimental jQuery open source. Design minimalist, fără efecte, doar imagini pop-up care se înlocuiesc reciproc după o anumită perioadă de timp. Totul este foarte simplu, configurați-l, conectați-l și mergeți ...
jQuery popeye 2.1
Un glisor de imagine jQuery foarte compact cu elemente Lightbox. Datorită dimensiunii sale flexibile, este foarte ușor de încorporat în orice container, într-o singură intrare sub formă de miniaturi, atunci când plasați cursorul mouse-ului sau faceți clic pe care este activată o casetă cu o imagine mărită și comenzi. Este convenabil să plasați un astfel de glisor în bare laterale pentru a prezenta produse sau anunțuri de știri. O soluție excelentă pentru site-urile cu o cantitate mare de informații.
Secvenţă
Slider cu receptivitate gratuită cu tranziții CSS3 avansate. Stil minimalist, 3 teme de design, fiecare cadru alunecă orizontal, apare în centru, imaginea merge în stânga, subtitrarea în dreapta, miniaturile sunt duplicate în colțul din dreapta jos. Paginarea prezentărilor produselor pentru vizualizare în fiecare cadru. Comenzile includ, de asemenea, butoane înapoi și înainte. Sprijin de către toți browsere moderne.
Beţivan
Un glisor foarte simplu de imagini atât în ceea ce privește funcționalitatea, cât și setările, din setări există o modificare a vitezei de schimbare a diapozitivelor, conectarea unui mod manual (butoanele de control sunt activate), o prezentare continuă. Acest glisor are dreptul să fie și m-a atras doar prin faptul că este, nu am găsit nimic deosebit de interesant în această dezvoltare, poate că arătam prost)))
Glisor de imagine receptiv
Un glisor de imagine atât de frumos, adaptabil de la Vladimir Kudinov și însoțitori. Un instrument solid, bine dezvoltat, furnizat cu exemple ilustrative și instrucțiuni detaliate cu privire la crearea, instalarea și utilizarea. Design adaptiv, butoane frumoase și săgeți în verde, totul este destul de frumos și calm, fără presiune.
FractionSlider
Plugin jQuery paralax gratuit pentru imagini și diapozitive text. Animația de diapozitive are mai multe valori de spectacol cu control complet în fiecare setare de sincronizare și animație. Capacitatea de a anima mai multe elemente dintr-o diapozitivă simultan. Puteți instala diferite metode animații, diapozitive care dispar sau tranziții dintr-o anumită direcție. Afișaj automat și control manual cu săgeți de navigare care apar atunci când treceți cu mouse-ul peste o imagine. 10 tipuri de efecte de animație pentru apariția diapozitivelor și multe altele ...
Revizuirea sa dovedit a fi destul de extinsă, dar nu suficient de informativă din cauza numărului mare de produse luate în considerare. Toate detaliile și descrierile detaliate funcționalitate a unui anumit plugin, puteți afla direct pe paginile dezvoltatorilor. Nu pot decât să sper că cineva a făcut mai ușor pentru cineva să găsească acel instrument foarte necesar pentru a crea glisoare colorate pentru imagini pe paginile site-urilor lor.
V-ați întrebat vreodată dacă ar fi frumos să puteți lucra cu șabloane rusificate? Gândește-te doar un minut. Nu a fost pierdut timp lucrând cu șabloane în limba engleză. Ne grăbim să vă mulțumim cu faptul că acum puteți găsi pe piața TemplateMonster. Textul pentru fiecare dintre ele a fost scris de mână. Și, desigur, toate soluțiile gata făcute sunt incredibil de ușor de utilizat.
Cu tot respectul, Andrew
Cu ceva timp în urmă, am început să stăpânesc jQuery. Cred că toată lumea știe că acesta este numele celei mai populare biblioteci pentru dezvoltarea și crearea de scripturi (scripturi) în JavaScript. Cu ajutorul său, este foarte ușor să creați elemente de site web eficiente și interactive.
În acest articol, vreau să vă spun cum să creați un glisor universal simplu folosind jQuery. De fapt, rețeaua este foarte un numar mare de o varietate de glisoare gata făcute, care uneori par foarte tentante și sunt destul de funcționale, dar o vom face de la zero.
Deci, ce caracteristici ale glisorului nostru jQuery (pe care l-am numit HWSlider) pot fi remarcate?
- Ușurința de utilizare și design - am vrut să creez un script simplu fără clopote și fluiere, prin urmare, nu am folosit animații în CSS3, iar codul sa dovedit a fi foarte versatil și ușor de înțeles.
- Posibilitatea de a insera atât imagini, cât și orice cod HTML în diapozitive.
- Abilitatea de a derula prin diapozitive atât în ordine (înainte - înapoi), cât și de a selecta fiecare diapozitiv (1,2,3,4 ...)
- Linkuri generate automat (anterior - următor și cu numere de diapozitive). Trebuie doar să introduceți numărul necesar de divs, iar restul va fi calculat de la sine. Ei bine, se poate observa că numărul de diapozitive este nelimitat.
Scriptul este compatibil cu toate browserele moderne: IE, Opera, Firefox, Safari, Chrome (deoarece glisorul nu folosește CSS3).
Să începem cu marcarea HTML. În locul potrivit pagina html sau trebuie introdus un șablon.
Totul este simplu aici, după cum puteți vedea, puteți insera câte diapozitive doriți, creând noi divs. Orice poate fi introdus în interiorul lor. cod html, de exemplu o imagine sau un bloc de text. Nu uitați să includeți biblioteca jQuery în sine împreună cu toate scripturile js. Dacă nu știi cum, vezi exemplul.
# slider-wrap (/ * Slider și butoane wrap * / width: 660px;) #slider (/ * Slider wrap * / width: 640px; înălțime: 360px; overflow: ascuns; border: #eee solid 10px; poziție: relativă; ) .slide (/ * Slide * / width: 100%; înălțime: 100%;) .sli-links (/ * Butoane slide * / margin-top: 10px; text-align: center;) .sli-links. control -slide (margine: 2px; afișare: bloc în linie; lățime: 16px; înălțime: 16px; depășire: ascuns; text-indent: -9999px; fundal: url (radioBg.png) centru jos fără repetare;) .sli - links .control-slide: hover (cursor: pointer; background-position: center center;) .sli-links .control-slide.active (background-position: center top;) #prewbutton, #nextbutton (/ * Link "Next și Anterior * / afișare: bloc; lățime: 15 px; înălțime: 100%; poziție: absolut; sus: 0; depășire: ascuns; text-indent: -999px; fundal: url (săgeatăBg.png) centru stânga fără repetare; opacitate: 0,8; index z: 3; contur: niciunul! important;) #prewbutton (stânga: 10px;) #nebuton (dreapta: 10px; fundal : url (arrowBg.png) centru dreapta fără repetare;) #prewbutton: hover, #nextbutton: hover (opacitate: 1;)
Să aruncăm o privire mai atentă la el. În primul rând, oferim casetei principale cu id-ul „slider-wrap” lățimea dorită. Deoarece toate celelalte blocuri sunt inserate în el, înălțimea nu poate fi setată, aceasta va depinde de ceea ce este în interior. Apoi, trebuie să setăm dimensiunile containerului în care vor fi amplasate lamele. Acesta este # slider. Să-i dăm o lățime și o înălțime, precum și, de exemplu, o margine de 10 pixeli. Aici lățimea este de 640 px, care este mai mică decât lățimea părintelui, deoarece adăugăm margini late de 10 px la dreapta și la stânga. Lățimea acestui div afectează și lățimea diapozitivelor (.slide).
Și ultimul lucru: trebuie să fim siguri că setăm poziția: relativă pentru containerul de diapozitive, deoarece diapozitivele din interior sunt cu poziționare absolută. Pentru diapozitive în sine, numai lățimea și înălțimea sunt specificate în CSS. Restul proprietăților sunt setate deja în scriptul jQuery.
Selectorul.sli-links este un bloc care va conține butoanele pentru navigarea la diapozitivul dorit. Aceste butoane sunt elemente simple ale formularului , care vor fi inserate automat în numărul dorit, împreună cu sli-linkurile părinte. Pentru butoane, setăm vedere frumoasăși anume, facem fiecare buton pătrat, le aliniez pe toate la centru și, de asemenea, datorită overflow: ascuns și text-indent: -9999px, eliminăm textul, lăsând doar pictogramele de fundal, care se schimbă și când cursorul este în plan peste acest element. Pentru comoditate, am folosit sprite, care au redus numărul de imagini.
Apoi este făcut buton activ... Schimbăm doar poziția fundalului. Apoi vom reproiecta linkurile pentru a merge la diapozitivele următoare și anterioare. Le puteți oferi orice decor, la fel ca butoanele. Aceste legături sunt inserate automat în interiorul #glisorului. Dar pentru a le arăta, le-am dat poziționare absolută și un strat superior (z-index: 3), astfel încât să apară deasupra diapozitivelor. Cred că totul este clar și simplu cu CSS: puteți schimba aproape toate proprietățile pentru a proiecta glisorul după cum aveți nevoie.
Să aruncăm acum o privire asupra scenariului în sine:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = adevărat; $ (document). ready (funcția (e) ($ (". slide"). css (("poziția": "absolut", "sus": "0", "stânga": "0")). ascunde () .eq (0) .show (); var slideNum = 0; var slideTime; slideCount = $ ("# slider .slide"). size (); var animSlide = funcție (săgeată) (clearTimeout (slideTime); $ (".slide"). eq (slideNum) .fadeOut (hwSlideSpeed); if (arrow == "next") (if (slideNum == (slideCount-1)) (slideNum = 0;) else (slideNum ++) ) else if (săgeată == "prew") (if (slideNum == 0) (slideNum = slideCount-1;) else (slideNum- = 1)) else (slideNum = săgeată)) $ (". slide"). eq (slideNum) .fadeIn (hwSlideSpeed, rotator); $ (". control-slide.active"). removeClass ("active"); $ (". control-slide"). eq (slideNum) .addClass ("active ");) if (hwNeedLinks) (var $ linkArrow = $ (" ") .prependTo (" # slider "); $ (" # nextbutton "). click (function () (animSlide (" next ");)) $ ("#prewbutton"). click (function () (animSlide ("prew");))) var $ adderSpan = ""; $ (". slide"). each (function (index) ($ adderSpan + = " "; }); $("
Mai întâi, setările sunt salvate în variabilele: hwSlideSpeed - viteza diapozitivelor, hwTimeOut - timpul după care are loc schimbarea automată a diapozitivelor, hwNeedLinks - controlează legăturile „Next” și „Previous” - dacă valoarea acestui variabila este adevărată, atunci aceste link-uri vor fi afișate și, dacă sunt false, atunci, în consecință, nu vor fi (ca în pagina principala blogul meu).
Apoi, instalăm necesarul Proprietăți CSS pentru diapozitive folosind metoda .css (). Punem blocurile cu diapozitive unele peste altele folosind poziționarea absolută, apoi le ascundem cu .hide () și apoi afișăm doar primul. Variabila slideNum este numărul diapozitivului activ, adică al contorului.
Principala logică din spatele glisorului nostru jQuery este funcția animSlide. Este nevoie de un parametru. Dacă îi trecem șirurile „next” sau „prew”, atunci operatorii condiționali vor fi declanșați și respectiv diapozitivul următor sau anterior va fi afișat. Dacă trimitem un număr ca valoare, atunci acest număr va deveni diapozitiv activ și va fi afișat.
Deci, această funcție ascunde divul curent, calculează una nouă și o arată.
Observați că metodei .fadeIn (), care face vizibilă diapozitivul activ, primește un al doilea argument. Aceasta este așa-numita funcție de apel invers. Se execută când diapozitivul este complet afișat. ÎN acest caz aceasta este pentru a oferi defilare automată a diapozitivelor. Funcția rotator, definită mai jos, apelează din nou funcția animSlide pentru a trece la următoarea diapozitivă la intervalul de care avem nevoie: obținem o închidere care oferă derulare constantă.
Totul funcționează bine, dar trebuie să oprim execuția automată dacă utilizatorul mută cursorul pe glisor sau apasă butoanele. Pentru aceasta a fost creată variabila de pauză. Dacă valoarea sa este pozitivă - adevărată, atunci comutare automată Nu va fi. Cu metoda .hover (), specificăm: ștergeți temporizatorul dacă rulează - clearTimeout (slideTime) și setați pause = true. Și după ce ați mutat cursorul, opriți pauza și porniți închiderea rotatorului ().
În plus, trebuie să creăm elemente noi pe pagină și să le plasăm în locul potrivit. Folosind fiecare buclă () pentru fiecare diapozitiv (div cu class.slide), creați un element span în interiorul căruia va exista un număr - numărul diapozitivului. Acest număr este utilizat în funcția de animație pentru a trece la diapozitivul cu acel număr. Să înfășurăm totul într-un div cu clasele necesare și, ca rezultat, obținem următorul markup:
S-ar părea, de ce creăm markup în script, și nu în cod HTML? Faptul este că, de exemplu, dacă un utilizator are scripturile dezactivate, nu va vedea elemente care nu vor funcționa și acest lucru nu îl va deruta. De asemenea, simplifică codul, ceea ce este bun pentru SEO.
Ca rezultat, marcajul glisor va arăta cam așa (am folosit imagini ca diapozitive și am instalat 5 piese):
Mai jos puteți vedea cum funcționează glisorul nostru jQuery pe pagina demonstrativă și puteți descărca toate sursele necesare.
În cele din urmă, câteva puncte despre integrarea acestui glisor cu Drupal. Puteți adăuga acest cod într-un fișier șablon, de exemplu, page.tpl.php și atașați scriptul în fișiere js separate la temă. Jquery în Drupal este activat în mod implicit, dar funcționează în modul quirks (). Există două opțiuni de îmbunătățire. Sau înfășurați întregul cod js:
(funcție ($) (// Tot codul tău ...)) (jQuery);
sau înlocuiți $ caracterele din întregul script cu jQuery. Ca aceasta:
JQuery (document). Ready (funcție (e) (jQuery (". Slide"). Css (("poziție": "absolut", "sus": "0", "stânga": "0")). Ascundeți () .eq (0) .show (); var slideNum = 0; var slideTime; slideCount = jQuery ("# slider .slide"). size (); var animSlide = function (sageata) (// etc. ...
Exemplul a implementat deja prima metodă.
Mulțumesc pentru lectură! Lasă comentarii, vino din nou. De asemenea, vă puteți abona la RSS pentru a fi primul care primește actualizări de blog!
Adăugat: Asta nu e tot. Citiți mai departe. Acolo vom adăuga noi caracteristici acestui script.
1. Prezentare excelentă de jQuery
O prezentare spectaculoasă mare, utilizând tehnologiile jQuery
2. plugin jQuery „Scale Carusel”
Prezentare de diapozitive scalabilă utilizând jQuery. Veți putea seta dimensiunile pentru prezentarea de diapozitive care vi se potrivește cel mai bine.
3. pluginul jQuery „slideJS”
Glisor imagine cu descriere text.
4. Pluginul "JSliderNews"
5. Glisor CSS3 jQuery
Când treceți cu mouse-ul peste săgețile de navigare, apare o miniatură circulară a diapozitivului următor.
6. Slider frumos Ciclul de prezentare jQuery
Slider jQuery cu indicator de încărcare a imaginii. Există o schimbare automată a diapozitivelor.
7. jQuery "Parallax Slider" plugin
Glisor cu efect de fundal 3D. Punctul culminant al acestui glisor se află în mișcarea de fundal, care constă din mai multe straturi, fiecare dintre care derulează cu viteză diferită... Rezultatul este o imitație a efectului volumetric. Arată foarte frumos, poți vedea singur. Efectul este afișat mai ușor în browsere precum: Opera, Google Chrome, IE.
8. Slider jQuery proaspăt și ușor "bxSlider 3.0"
Pe pagina demo din secțiunea „exemple” puteți găsi linkuri către toți opțiuni posibile folosind acest plugin.
9.JQuery Image Slider, plugin "slideJS"
Sliderul jQuery elegant va fi cu siguranță capabil să vă decoreze proiectul.
10. Prezentare de diapozitive plug-in jQuery „Diapozitive ușoare” v1.1
Plugin jQuery ușor de utilizat pentru crearea de prezentări.
11. Plugin „jQuery Slidy”
Plugin jQuery ușor în diferite modele. Există o schimbare automată a diapozitivelor.
12. jQuery Galerie CSS cu schimbător automat de diapozitive
Dacă vizitatorul nu face clic pe săgețile „Înainte” sau „Înapoi” într-o anumită perioadă de timp, galeria va începe să deruleze automat.
13. jQuery Nivo Slider
Plugin ușor de calitate foarte profesională cu cod valid... Există multe efecte diferite de tranziție a diapozitivelor.
14. jQuery glisor „MobilySlider”
Slider proaspăt. Slider jQuery cu diverse efecte de schimbare a imaginii.
15. Plugin jQuery Slider²
Glisor ușor cu schimbare automată a diapozitivelor.
16. Slider javascript proaspăt
Glisor cu schimbare automată a imaginii.
Plugin pentru implementarea prezentării de diapozitive cu schimbarea automată a diapozitivelor. Este posibil să controlați afișajul folosind imagini în miniatură.
jQuery CSS glisor imagine folosind pluginul NivoSlider.
19. Slider jQuery jShowOff
Plugin pentru rotația conținutului. Trei cazuri de utilizare: fără navigare (cu schimbare automată în format de prezentare), cu navigare sub formă de butoane, cu navigare sub formă de miniaturi.
20. Plugin "Portofoliu cu efecte de declanșare"
Plugin jQuery proaspăt pentru portofolii de fotografie. Galeria are un efect interesant de schimbare a imaginilor. Fotografiile se alternează cu efectul obturatorului.
21. Slider javascript CSS ușor „TinySlider 2”
Implementarea unui glisor de imagine cu folosind javascriptși CSS.
22. Slider minunat „Tinycircleslider”
Glisor rotund elegant. Tranziția între imagini se realizează prin glisarea de-a lungul circumferinței glisorului sub forma unui cerc roșu. Se va încadra perfect în site-ul dvs. dacă utilizați elemente rotunde în design.
23. glisor imagine jQuery
Trusă slider ușoară. Glisorul este prezentat în diferite versiuni: verticală și orizontală. De asemenea, sunt implementate diferite tipuri de navigare între imagini: folosind butoanele „Înainte” și „Înapoi”, folosind rotița mouse-ului, folosind un clic al mouse-ului pe diapozitiv.
24. Galerie cu miniaturi "Slider Kit"
Galeria „Slider Kit”. Derularea miniaturilor se realizează atât pe verticală, cât și pe orizontală. Tranziția între imagini se realizează folosind: rotița mouse-ului, clicul mouse-ului sau trecând deasupra miniaturii.
25. jQuery Slider Kit Slider pentru conținut
Glisor de conținut vertical și orizontal JQuery.
26. Prezentare diapozitivă pentru jQuery Slider Kit
Slideshow cu schimbarea automată a slide-urilor.
27. Slider CSS3 profesional cu javascript ușor
Un slider jQuery și CSS3 îngrijit creat în 2011.
jQuery miniatură slideshow.
29. Un simplu slideshow jQuery
Slideshow cu butoane de navigare.
30. Prezentare minunată de diapozitive jQuery "Skitter"
Plugin jQuery „Skitter” pentru crearea de prezentări uimitoare. Plugin-ul acceptă 22 (!) De diferite tipuri de efecte de animație la schimbarea imaginilor. Poate funcționa cu două opțiuni de navigare cu diapozitive: numere de diapozitive și miniaturi. Asigurați-vă că urmăriți demonstrația, o descoperire de foarte înaltă calitate. Tehnologii utilizate: CSS, HTML, jQuery, PHP.
31. Slideshow „Stângaci”
Prezentare de diapozitive funcțională. Sub formă de diapozitive pot fi: imagini simple, imagini cu subtitrări, imagini cu sfaturi de instrumente, clipuri video. Puteți naviga folosind săgețile, linkurile numerice ale diapozitivelor și tastele stânga / dreapta de pe tastatură. Prezentarea de diapozitive este realizată în mai multe versiuni: cu și fără miniaturi. Pentru a vedea toate opțiunile, urmați linkurile Demo # 1 - Demo # 6 situate în partea de sus a paginii demo.
Design foarte original al glisorului de imagine, care amintește de un ventilator. Schimbare de diapozitive animate. Navigarea între imagini se efectuează folosind săgeți. Există, de asemenea, o comutare automată, care poate fi activată și dezactivată folosind butonul Redare / Pauză situat în partea de sus.
Slider jQuery animat. Imaginile de fundal sunt redimensionate automat atunci când fereastra browserului este redimensionată. Pentru fiecare imagine, apare un bloc cu o descriere.
34. Glisorul „Flux Slider” în jQuery și CSS3
Nou glisor jQuery. Mai multe efecte animate interesante la schimbarea diapozitivelor.
35. jQuery jSwitch plugin
Galerie jQuery animată.
Prezentare de diapozitive ușoară în jQuery cu schimbare automată a diapozitivelor.
37. Noua versiune a pluginului „SlideDeck 1.2.2”
Glisor de conținut profesional. Există opțiuni cu schimbarea automată a diapozitivelor, precum și o opțiune care utilizează rotița mouse-ului pentru a vă deplasa între diapozitive.
38. jQuery Sudo Slider
Glisor de imagine ușor în jQuery. Există o mulțime de opțiuni de implementare: schimbarea orizontală și verticală a imaginii, cu și fără referințe la numărul diapozitivului, cu și fără subtitrări de imagine, diverse efecte de modificare a imaginii. Există o funcție de schimbare automată a diapozitivelor. Link-uri către toate exemplele de implementare pot fi găsite pe pagina demonstrativă.
39. prezentare de diapozitive jQuery CSS3
Prezentarea de miniaturi acceptă modul automat de schimbare a diapozitivelor.
40. jQuery Flux Slider
Slider cu multe efecte pentru schimbarea imaginilor.
41. Slider jQuery simplu
Slider elegant pentru imagine jQuery.
Avem nevoie de un glisor simplu cu derulare automată. Să începem ...
Descrierea muncii glisorului.
Diapozitivele vor fi aliniate și derulate după o anumită perioadă de timp.
Cadrul roșu arată partea vizibilă a glisorului.
La sfârșitul glisorului, trebuie să copiați primul slide. Acest lucru este necesar pentru a asigura derularea de la al treilea diapozitiv la primul. De asemenea, trebuie să adăugați ultimul diapozitiv la început pentru a putea derula până la direcție inversă de la prima diapozitivă la a treia. Mai jos este prezentat modul în care glisorul funcționează în direcția înainte.
Când glisorul ajunge la sfârșit, o copie de la începutul glisorului este plasată instantaneu în locul ultimei diapozitive. Apoi ciclul se repetă din nou. Acest lucru creează iluzia unui glisor interminabil.
Marcare HTML
În primul rând, să facem un simplu glisor de derulare automată. Are nevoie de două containere pentru a funcționa. Primul va seta dimensiunea zonei vizibile a glisorului, iar al doilea este necesar pentru a plasa glisoarele în el. Marcajul glisor va arăta astfel:
Stiluri glisante
.slider-box (lățime: 320px; înălțime: 210px; depășire: ascuns;). slider (poziție: relativă; lățime: 10000px; înălțime: 210px;) .slider img (float: stânga; index z: 0;)Containerul.slider-box setează dimensiunile glisorului. Debordarea: proprietatea ascunsă ascunde toate elementele care nu se încadrează în zona din interiorul elementului.
Containerul glisant este setat la o lățime mare. Acest lucru este necesar pentru ca toate diapozitivele să se încadreze în el.
Diapozitivele sunt aliniate utilizând proprietatea float: left.
Mai jos este un aspect schematic al blocurilor glisante.
Script
Mișcarea diapozitivelor se va efectua folosind schimbare lină proprietățile marginii-stânga ale containerului.slider.
$ (function () (var width = $ (". slider-box") .width (); // Lățimea glisorului. interval = 4000; // Interval pentru schimbarea diapozitivelor.$ (". slider img: last") .clone () .prependTo (".slider"); // O copie a ultimei diapozitive este plasată la început.$ () .eq (1) .clone () .appendTo (".slider"); // O copie a primului diapozitiv este plasată la sfârșit. // Container.slider este deplasat la lățimea diapozitivului din stânga. setInterval ("animație ()", interval); // Funcția animație () este executată pentru a schimba diapozitivele.)); funcția animație () (var margin = parseInt ($ (". glisor") .css ("marginLeft")); // Decalajul curent al glisorului de bloc width = $ (". slider-box") .width (), // Lățimea glisorului. slidersAmount = $ (". slider") .children () .length; // Numărul de diapozitive din glisor. if (margin! = (- width * (slidersAmount- 1)))) // Dacă diapozitivul curent nu este ultimul,(margine = margine- lățime; // atunci valoarea marginii este redusă cu lățimea diapozitivului.) altceva ( // Dacă este afișat ultimul diapozitiv,$ (". glisor") .css ("margine-stânga", - lățime); // apoi blocul glisor revine la poziția inițială, margine = - lățime * 2; ) $ (". glisor") .animate ((marginLeft: margin), 1000); // Blocul glisor este deplasat spre stânga cu 1 diapozitiv. } ;Rezultatul este un glisor simplu cu derulare automată infinită.
Slider simplu, ușor (21Kb comprimat) scris în Javascript pur, fără dependențe, adică funcționează fără jQuery.
Testat în următoarele browsere:
- Chrome 26.0
- Firefox 20.0
- Safari 5.1.7
- IE 10
- Opera 16.0
Există suport incomplet pentru IE8 / 9 (fără efecte).
Caracteristici ale
- Puteți adăuga un număr nelimitat de glisante la pagină, chiar așezați unul în celălalt.
- Redimensionează în funcție de conținut, dar poate fi dezactivat.
- Navigare tastatură - Când cursorul se află pe glisor, puteți comuta glisierele săgeată.
- Suport pentru evenimente tactile mobile.
Conexiune
Înainte de eticheta de închidere
