Ak sa používajú samostatne, CSS3 a jQuery poskytujú širokú škálu možností. Ale keď sa použijú spolu ... Potom môžu urobiť efekty skutočne pôsobivé. Niekedy nastáva problém, ako lepšie a tvorivejšie usporiadať niekoľko obrázkov alebo fotografií so spoločnou tematikou na jednom mieste. Prípadne môžete vytvoriť posúvač (najmä preto, že ich je veľa). Ale v tomto tutoriáli vytvoríme interaktívnu 3D galériu pomocou CSS3 a jQuery. Pre rýchle pochopenie a použitie posúvača na vašom webe odporúčam stiahnuť si demo verziu (je k dispozícii aj v úplných novinkách) a urobiť to analogicky v príklade.
Skutočný príklad je možné vidieť tu:
Stiahnuť ▼
Časť HTML - Zaujímavý posúvač v jQuery
Kontajner s triedou hlavná sa použije na zobrazenie pozadia. A potom do bloku s identifikátorom immersive_slider môžete pridať toľko snímok, koľko potrebujete. Posuvné navigačné tlačidlá je možné odstrániť, ak ich nepotrebujete:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div class \u003d "main"\u003e
...
<div id \u003d "immersive_slider"\u003e
<< |
časť jQuery
| 1 2 3 4 5 6 7 8 | $ ("# immersive_slider") .immersive_slider ((animácia: "fade", slideSelector: ".slide", container: ".main", cssBlur: false, stránkovanie: true, autoStart: 5000)); |
Ako ste si mohli všimnúť pri prezeraní príkladu posúvačov, existujú rôzne. Všetky nastavenia týchto prechodov sú vo funkcii vyššie. Zvážte tieto nastavenia:
- animácia - hodnota, ktorá určuje, ako sa budú diapozitívy meniť. Prijíma hodnoty „fade“, „slide“ alebo „bounce“. A aby ste mohli vertikálne meniť snímky, musíte zaregistrovať „slideUp“ alebo „bounceUp“.
- slideSelector - selektor, pomocou ktorého vyberáme bloky so snímkami.
- kontajner - táto vlastnosť definuje hlavný kontajner, pre ktorý sa bude meniť pozadie.
- cssBlur Je skúšobná funkcia. Ak nechcete nastaviť rozmazanie, nenastavujte túto vlastnosť.
- stránkovanie - aktivuje navigáciu.
- automatický štart automatické spustenie prezentácie -.
Slider Temdo je výkonný a ľahko použiteľný nástroj na vytváranie krásnych posúvačov pre váš web. Hlavné vlastnosti posúvača:
- Ako pozadie každej snímky si môžete zvoliť ľubovoľný obrázok alebo video
- Dodatočný prekryvný obrázok
- Posúvanie animácie
- Animácia pri zmene snímok
Ak potrebujete vytvoriť nádherný „klasický“ posúvač (pozadie, maximálne dve ďalšie grafické vrstvy, nadpis, podnadpis, text a najviac dve tlačidlá na každej snímke), odporúča sa použiť posúvač Temdo, najmä ak potrebujete posúvače na celú obrazovku a video na pozadí.
Vytvorenie posúvača
Ak chcete vytvoriť nový posúvač, v ľavej ponuke konzoly WordPress Console vyberte položku Posuvník > Pridať novú snímku:
Typ snímky
Základným parametrom snímky je typ pozadia (obrázok alebo video). V závislosti od výberu tejto možnosti sa zmení rozhranie nastavení snímok: keď namiesto skupiny nastavení vyberiete video Statické pozadie skupina Animované pozadie.
Obrázok na pozadí
Vyberte obrázok na pozadí snímky. Pamätajte, že obrázok na pozadí sa roztiahne na celú šírku obrazovky (pri zachovaní pomeru strán). Preto sa odporúča používať obrázky v rozlíšení Full HD (1 920 x 1 080 pixelov). Ak chcete, aby posúvač nezaberal na výšku celú obrazovku, musíte v nastaveniach posúvača nastaviť výšku.
Prekryvný obrázok
Táto voľba slúži na prekrytie ďalšieho obrázka priehľadným alebo polopriehľadným pozadím cez hlavný obrázok pozadia. Prekryvný obrázok sa rozšíri po celej ploche snímky ako textúra.
Animácia na pozadí
Túto možnosť začiarknite, ak chcete animovať obrázok na pozadí. Po zapnutí budú k dispozícii nasledujúce typy animácií:
- Zväčšenie od stredu (predvolené)
- Zväčšenie vzhľadom na ľavý horný roh
- Zväčšenie vzhľadom na pravý horný roh
- Zväčšenie vzhľadom na ľavý dolný roh
- Zväčšenie vzhľadom na pravý dolný roh
Video na pozadí
Posuvník Temdo podporuje video formáty webm, mp4 a ogg.
Ak chcete použiť video ako pozadie, musíte ho najskôr nahrať do mediálnej knižnice svojho webu. Urobíte to tak, že na ľavej table konzoly WordPress Console vyberiete možnosť Mediálne súbory > Pridať nové... Po dokončení sťahovania videa skopírujte jeho adresu do schránky a vráťte sa k úprave snímky. Prilepte cestu k videosúboru zo schránky do príslušnej časti nastavení snímok. Odporúčame vám, aby ste vždy, keď je to možné, používali všetky tri formáty videa, aby ste podporili maximálny počet moderných prehľadávačov.
Vlastnosti snímky
V tejto časti sa nastavujú hlavné parametre snímky:
- Dizajn hlavičky: Môžete si zvoliť svetlý dizajn pre použitie s tmavým pozadím, alebo tmavý dizajn pre kontrastnú hlavičku na svetlom pozadí.
- Farba navigácie: Vyberte farbu šípok sprava-zľava a navigačných bodov v dolnej časti posúvača
- Posunúť do sekcie: zobrazí šípku, ktorá po kliknutí posunie stránku na určené miesto. Zadajte názov kotvy, napríklad „#contact“
- Nezobrazovať nadpis: túto možnosť povoľte, ak nechcete, aby sa nadpis zobrazoval na tejto snímke
- Nezobrazovať tieň titulu: Zakáže zobrazenie tiene titulu pre túto snímku
- Grafická animácia: vyberte pre grafiku snímok jeden z dvoch efektov animácie
- Animácia obsahu: vyberte si jeden z dvoch spôsobov animácie názvu, titulkov, textu a tlačidiel
Prispôsobenie štýlu obsahu snímky
Nastavenia štýlu obsahu textu (titul, podnadpis a text) sa nachádzajú v zodpovedajúcich skupinách nastavení:
- Názov snímky
- Titulky snímok
- Text snímky
V každej z týchto skupín môžete nastaviť písmo, farbu, veľkosť a ďalšie parametre štýlu pre každý z prvkov.
Grafika a grafika SVG
Tu si môžete stiahnuť ďalší grafický prvok () a vektorovú grafiku vo formáte SVG. Pre každý z týchto prvkov môžete nastaviť odkaz, ktorý sa otvorí kliknutím na tento prvok.
Gombíky na snímke
V tejto časti môžete nastaviť parametre pre jedno alebo dve tlačidlá:
- Text tlačidla
- Odkaz
- Animácia umiestnením kurzora myši
- Ikona
Pri rolovaní posúvacia animácia
V tejto časti môžete zapnúť a vypnúť animáciu pri prechádzaní celým obsahom snímky alebo jednotlivými prvkami snímky. Ak chcete (a zručnosť), môžete doladiť animáciu pomocou štýlov CSS.
Uloženie snímky
Pred uložením snímky ju pridajte do jedného alebo viacerých posúvačov začiarknutím príslušných políčok v sekcii „Posuvníky“. Ak ešte nemáte žiadny posúvač, kliknite na odkaz + Pridať nový posúvač:
1. Vynikajúca prezentácia jQuery
Skvelá prezentácia využívajúca technológie jQuery.
2. Doplnok jQuery „Scale Carousel“
Škálovateľná prezentácia pomocou jQuery. Budete mať možnosť nastaviť rozmery prezentácie, ktoré vám najlepšie vyhovujú.
3. Doplnok jQuery „slideJS“
Posuvník obrázkov s textovým popisom.
4. Doplnok „JSliderNews“
5. Posúvač jQuery CSS3
Keď umiestnite kurzor myši nad navigačné šípky, zobrazí sa kruhová miniatúra nasledujúcej snímky.
6. Pekný posúvač jQuery „Presentation Cycle“
jazdec jQuery s indikátorom načítania obrázkov. K dispozícii je automatická zmena snímky.
7. Doplnok jQuery Parallax Slider
Posuvník s trojrozmerným efektom pozadia. Vrcholom tohto posúvača je pohyb na pozadí, ktorý sa skladá z niekoľkých vrstiev, z ktorých každá sa posúva inou rýchlosťou. Výsledkom je napodobenina volumetrického javu. Vyzerá veľmi pekne, sami sa môžete presvedčiť. Efekt sa zobrazuje plynulejšie v prehliadačoch ako: Opera, Google Chrome, IE.
8. Svieži, ľahký posúvač jQuery „bxSlider 3.0“
Na ukážkovej stránke v sekcii „príklady“ nájdete odkazy na všetky možné prípady použitia tohto doplnku.
9. posúvač obrázkov jQuery, doplnok „slideJS“
Štýlový posúvač jQuery bude určite schopný zdobiť váš projekt.
10. Prezentácia doplnku jQuery „Easy Slides“ v1.1
Ľahko použiteľný doplnok jQuery na vytváranie prezentácií.
11. Doplnok „jQuery Slidy“
Ľahký doplnok jQuery v rôznych prevedeniach. K dispozícii je automatická zmena snímky.
Galéria CSS 12.jQuery s automatickým meničom snímok
Pokiaľ návštevník neklikne do určitého času na šípky „Vpred“ alebo „Späť“, galéria sa začne automaticky posúvať.
13. posúvač jQuery „Nivo Slider“
Veľmi profesionálny vysoko kvalitný ľahký doplnok s platným kódom. Existuje veľa rôznych efektov prechodu snímok.
14. posúvač jQuery „MobilySlider“
Svieži posúvač. Jazdec jQuery s rôznymi efektmi na zmenu obrazu.
15. Plugin jQuery Slider²
Ľahký posúvač s automatickou zmenou posúvača.
16. Nový posúvač javascript
Posuvník s automatickou zmenou obrazu.
Doplnok na implementáciu prezentácie s automatickou zmenou prezentácie. Displej je možné ovládať pomocou miniatúr.
posúvač obrázkov jQuery CSS pomocou pluginu NivoSlider.
19. Posúvač jQuery jShowOff
Doplnok na rotáciu obsahu. Tri prípady použitia: žiadna navigácia (s automatickou zmenou vo formáte prezentácie), navigácia vo forme tlačidiel, s navigáciou vo forme miniatúr.
20. Doplnok „Portfólio efektov uzávierky“
Nový doplnok jQuery pre fotografické portfóliá. Galéria má zaujímavý efekt pri zmene obrázkov. Fotografie na seba nadväzujú s efektom podobným činnosti uzávierky objektívu.
21. Ľahký javascriptový jazdec CSS „TinySlider 2“
Implementácia posúvača obrázkov pomocou JavaScriptu a CSS.
22. Úžasný posúvač „Tinycircleslider“
Štýlový okrúhly posúvač. Prechod medzi obrázkami sa uskutočňuje pretiahnutím po obvode posúvača vo forme červeného kruhu. Dokonale zapadne na vaše stránky, ak vo svojom dizajne použijete okrúhle prvky.
23. Posúvač obrázkov jQuery
Ľahká vysúvacia súprava. Posuvník je prezentovaný v rôznych verziách: vertikálna a horizontálna. Realizujú sa tiež rôzne typy navigácie medzi obrázkami: pomocou tlačidiel „Vpred“ a „Späť“, pomocou kolieska myši, kliknutím myši na snímku.
24. Galéria s miniatúrami „Slider Kit“
Galéria „Slider Kit“. Posúvanie miniatúr sa vykonáva vertikálne aj horizontálne. Prechod medzi obrázkami sa vykonáva pomocou: kolieska myši, kliknutia myšou alebo umiestnenia kurzora myši na miniatúru.
25. Posúvač obsahu súpravy jQuery Slider
Posuvník vertikálneho a horizontálneho obsahu JQuery.
26. Sada posúvača jQuery
Prezentácia s automatickou zmenou snímky.
27. Ľahký profesionálny posúvač CSS3 javascript
Elegantný posúvač jQuery a CSS3 vytvorený v roku 2011.
prezentácia jQuery s miniatúrami.
29. Jednoduchá prezentácia jQuery
Prezentácia s navigačnými tlačidlami.
30. Úžasná prezentácia jQuery „Skitter“
"Skitter" doplnok jQuery na vytváranie ohromujúcich prezentácií. Plugin podporuje 22 (!) Druhov rôznych efektov animácie pri zmene obrázkov. Môže pracovať s dvoma možnosťami navigácie na snímke: číslami a miniatúrami snímok. Nezabudnite si pozrieť ukážku, čo je veľmi kvalitný nález. Použité technológie: CSS, HTML, jQuery, PHP.
31. Prezentácia „Trápne“
Funkčná prezentácia. Prezentácie môžu byť: jednoduché obrázky, obrázky s titulkami, obrázky s popismi nástrojov, videoklipy. Môžete sa pohybovať pomocou šípok, posúvacích číselných odkazov a ľavého / pravého klávesu na klávesnici. Prezentácia je vyrobená v niekoľkých verziách: s miniatúrami alebo bez nich. Ak chcete zobraziť všetky možnosti, kliknite na odkazy Demo # 1 - Demo # 6 umiestnené v hornej časti ukážkovej stránky.
Veľmi originálny dizajn posúvača obrazu, ktorý pripomína ventilátor. Animovaná zmena snímky. Navigácia medzi obrázkami sa vykonáva pomocou šípok. K dispozícii je tiež automatické prepínanie, ktoré je možné zapnúť a vypnúť pomocou tlačidla Prehrať / Pozastaviť umiestnené v hornej časti.
Animovaný posúvač jQuery. Pri zmene veľkosti okna prehliadača sa obrázky na pozadí automaticky zmenšia. Pri každom obrázku sa zobrazí blok s popisom.
34. Posuvník „Flux Slider“ v programoch jQuery a CSS3
Nový posúvač jQuery. Niekoľko skvelých animovaných efektov pri zmene snímok.
35. doplnok jQuery „jSwitch“
Animovaná galéria jQuery.
Ľahká prezentácia v jQuery s automatickou zmenou snímky.
37. Nová verzia pluginu „SlideDeck 1.2.2“
Posuvník profesionálneho obsahu. K dispozícii sú možnosti s automatickou zmenou snímky, ako aj možnosť prechádzania medzi snímkami pomocou kolieska myši.
38. Posúvač jQuery Sudo
Ľahký posúvač obrázkov v jQuery. Existuje veľa možností implementácie: horizontálna a vertikálna zmena obrázka, s odkazmi na čísla snímok alebo bez nich, s titulkami obrázkov a bez nich, rôzne efekty zmeny obrázka. K dispozícii je funkcia automatickej zmeny snímky. Odkazy na všetky príklady implementácie nájdete na ukážkovej stránke.
39 prezentácia jQuery CSS3
Prezentácia miniatúr podporuje režim automatickej zmeny snímky.
40. Posúvač jQuery Flux
Posuvník s mnohými efektmi na zmenu obrázkov.
41. Jednoduchý posúvač jQuery
Štýlový posúvač obrázkov jQuery.
Ak potrebujete na svoju stránku pridať kvalitný posúvač obrázkov jQuery, potom v tomto článku nájdete popis potrebných doplnkov. Aj keď jQuery výrazne uľahčuje používanie JavaScriptu, stále potrebujeme doplnky, ktoré by urýchlili proces návrhu webových stránok.
V niektorých z týchto doplnkov môžeme vykonať zmeny a vytvoriť nové posúvače, ktoré oveľa viac zodpovedajú cieľom našej stránky.
U ostatných posúvačov stačí pridať nadpisy, obrázky a vybrať prechodové efekty snímok, ktoré sú s posuvníkom dodávané. Všetky tieto doplnky majú rozsiahlu dokumentáciu, takže pridávanie nových efektov alebo funkcií k nim je jednoduché. Ak ste skúseným programátorom jQuery, môžete dokonca zmeniť spúšťače založené na udalostiach.
Najnovšie trendy, ako je responzívny dizajn, sú pre webové projekty veľmi dôležité, či už implementujete doplnok alebo skript. Vďaka všetkým týmto prvkom je každý z týchto doplnkov veľmi flexibilný. Všetko, čo vyšlo v roku 2014, je zahrnuté v tomto zozname.
Posúvače obrázkov JQuery
Jssor Responzívny posúvač
Nedávno som narazil na tento funkčný posúvač jQuery a na vlastnej koži som videl, že robí svoju prácu veľmi dobre. Obsahuje nekonečné možnosti, ktoré je možné rozšíriť pomocou kódu jazdca otvoreného zdroja:
- Adaptívny dizajn;
- Viac ako 15 možností prispôsobenia;
- Viac ako 15 efektov zmeny obrazu;
- Galéria obrázkov, kolotoče, podpora veľkosti celej obrazovky;
- Vertikálny rotátor bannerov, zoznam snímok;
- Podpora videa.
Ukážka | Stiahnuť ▼
PgwSlider - responzívny jazdec založený na JQuery / Zepto
Jedinou funkciou tohto doplnku je zobrazovanie snímkových snímok. Je veľmi kompaktný, pretože súbory jQuery majú iba 2,5 kB, čo umožňuje rýchle načítanie:
- Citlivé rozloženie;
- SEO optimalizácia;
- Podpora rôznych prehľadávačov;
- Jednoduché prechody obrázkov;
- Veľkosť archívu je iba 2,5 KB.
Ukážka | Stiahnuť ▼
Vertikálny posúvač noviniek Jquery
Flexibilný a užitočný posúvač jQuery pre zdroje správ so zoznamom príspevkov vľavo a obrázkom vpravo:
- Adaptívny dizajn;
- Vertikálny stĺpec na prepínanie správ;
- Rozšírené hlavičky.
Ukážka | Stiahnuť ▼
Posuvník Wallop
Tento posúvač neobsahuje JQuery, ale chcel by som ho predstaviť, pretože je veľmi kompaktný a môže výrazne znížiť časy načítania stránky. Ak sa vám páči, dajte mi vedieť:
- Citlivé rozloženie;
- Jednoduchý dizajn;
- Rôzne možnosti zmeny snímok;
- Minimálny kód JavaScript;
- Veľkosť je iba 3 kB.
Ukážka | Stiahnuť ▼
Galéria Polaroid v plochom štýle
Galéria v štýle dokumentu s flexibilným rozložením a krásnym dizajnom by mala zaujímať mnohých z vás. Vhodnejšie pre tablety a veľké displeje:
- Reagujúci posúvač;
- Plochý dizajn;
- Náhodná zmena snímok;
- Plný prístup k zdrojovému kódu.
Ukážka | Stiahnuť ▼
Posuvník A
Ukážka | Stiahnuť ▼
HiSlider - posúvač obrázkov HTML5, jQuery a WordPress
HiSlider predstavil nový bezplatný zásuvný modul jQuery, ktorý vám umožní vytvárať rôzne galérie obrázkov s fantastickými prechodmi:
- Reagujúci posúvač;
- Nie sú potrebné žiadne znalosti programovania;
- Niekoľko úžasných šablón a vzhľadov;
- Krásne prechodové efekty;
- Podpora rôznych platforiem;
- Kompatibilné s WordPress, Joomla, Drupal;
- Schopnosť zobraziť obsah rôznych typov: obrázky, videá YouTube a videá Vimeo;
- Flexibilné prispôsobenie;
- Užitočné ďalšie funkcie;
- Zobrazuje sa neobmedzený obsah.
Ukážka | Stiahnuť
Páni posúvač
WOW Slider je responzívny posúvač obrázkov jQuery s úžasnými vizuálnymi vlastnosťami ( domino, otočenie, rozmazanie, otočenie a blesk, vyletieť, rolety) a profesionálne šablóny.
WOW Slider je dodávaný s sprievodcom inštaláciou, ktorý vám umožní vytvoriť fantastické posúvače behom niekoľkých sekúnd bez toho, aby ste museli prechádzať kódom a upravovať obrázky. Verzie doplnkov pre Joomla a WordPress sú tiež k dispozícii na stiahnutie:
- Plne citlivý
- Podpora všetkých prehľadávačov a všetkých typov zariadení;
- Podpora dotykových zariadení;
- Ľahká inštalácia na WordPress;
- Flexibilita v prispôsobovaní;
- SEO optimalizované.
Ukážka | Stiahnuť
Nivo Slider je bezplatný doplnok jQuery
Nivo Slider je po celom svete známy ako najkrajší a najľahšie použiteľný posúvač obrázkov. Plugin Nivo Slider je bezplatný a vydaný pod licenciou MIT:
- Vyžaduje JQuery 1.7 alebo vyšší;
- Krásne prechodové efekty;
- Jednoduché a flexibilné pri konfigurácii;
- Kompaktný a prispôsobivý;
- Otvorený zdroj;
- Výkonný a jednoduchý;
- Niekoľko rôznych šablón;
- Automatické orezávanie obrázkov.
Ukážka | Stiahnuť
Jednoduchý posúvač jQuery s technickou dokumentáciou
Myšlienka bola inšpirovaná posúvačmi spoločnosti Apple, v ktorých môže vyletieť niekoľko malých prvkov s rôznymi efektmi animácie. Vývojári sa pokúsili implementovať tento koncept s prihliadnutím na minimálne požiadavky na vytvorenie jednoduchého dizajnu internetového obchodu, v ktorom prvky „vylietavania“ predstavujú rôzne kategórie:
- Citlivé rozloženie;
- Minimalistický dizajn;
- Rôzne efekty prechodu a výpadku.
Ukážka | Stiahnuť
Posuvník obrázkov jQuery v plnej veľkosti
Veľmi jednoduchý posúvač, ktorý zaberá 100% šírky stránky a prispôsobuje sa veľkosti mobilných obrazoviek. Funguje s prechodmi CSS a obrázky sú „naskladané“ pomocou kotiev. Kotvu je možné vymeniť alebo odstrániť, ak nechcete prepojiť odkaz na obrázok.
Po nainštalovaní sa posúvač rozšíri na 100% šírky obrazovky. Môže tiež automaticky zmenšiť veľkosť snímok:
- Jazdec reagujúci jQuery;
- Plná veľkosť;
- Minimalistický dizajn.
Ukážka | Stiahnuť
Výukový program Elastic Content Slider +
Posuvník elastického obsahu automaticky upravuje šírku a výšku na základe rozmerov nadradeného prvku. Toto je jednoduchý posúvač jQuery. Skladá sa z oblasti snímky v hornej časti a dolnej časti navigačnej karty. Posuvník upravuje svoju šírku a výšku tak, aby sa zmestil do nadradeného kontajnera.
Pri zobrazení na uhlopriečne malých obrazovkách sa navigačné karty zmenia na malé ikony:
- Adaptívny dizajn;
- Posúvanie kliknutím myšou.
Ukážka | Stiahnuť
Posuvník 3D Stack zadarmo
Experimentálny posúvač, ktorý listuje obrázkami v 3D. Dva stohy pripomínajú stohy papiera, z ktorých sa pri rolovaní obrázky zobrazia v strede posúvača:
- Adaptívny dizajn;
- Flip-transition;
- 3D efekty.
Ukážka | Stiahnuť
Posuvník na celú obrazovku s výrezom založený na výučbe JQuery a CSS3 +
Tento tutoriál vám ukáže, ako vytvoriť posúvač s otočením: myšlienkou je vystrihnúť a zobraziť aktuálnu snímku pri otvorení nasledujúceho alebo predchádzajúceho obrázka. Pomocou jQuery a CSS animácie môžeme vytvoriť jedinečné prechodové efekty:
- Adaptívny dizajn;
- Rozdelený prechod;
- Posuvník na celú obrazovku.
Ukážka | Stiahnuť
Unislider je veľmi malý posúvač jQuery
Žiadne zbytočné zvončeky a píšťalky a značenie, veľkosť je menšia ako 3 kB. Použite na svoje snímky ľubovoľný kód HTML a rozšírte ich o CSS. Všetko, čo súvisí s Unsliderom, je hostené na GitHub:
- Podpora rôznych prehľadávačov;
- Podpora klávesnice;
- Nastavenie výšky;
- Adaptívny dizajn;
- Podpora dotykového vstupu.
Ukážka | Stiahnuť ▼
Minimálne responzívne snímky
Jednoduchý a kompaktný doplnok ( veľkosť je iba 1 kB), ktorý vytvára citlivý jazdec pomocou prvkov vo vnútri kontajnera. ResponsiveSLides.js pracuje so širokou škálou prehľadávačov vrátane všetkých verzií IE od IE6 a vyšších:
- Plne citlivý
- Veľkosť 1 KB;
- Prechody CSS3 s možnosťou spustenia cez JavaScript;
- Jednoduché označovanie pomocou zoznamu s odrážkami
- Schopnosť prispôsobiť prechodové efekty a trvanie prezerania jednej snímky;
- Podporuje možnosť vytvárania viacerých prezentácií;
- Automatické a manuálne posúvanie.
Ukážka | Stiahnuť
Posuvník jQuery - bez fotoaparátu
Fotoaparát je doplnok s mnohými prechodovými efektmi, responzívnym rozložením. Jednoduché nastavenie, podpora mobilných telefónov:
- Plne responzívny dizajn
- Podpisy;
- Schopnosť pridávať videá;
- 33 rôznych farebných ikon.
Ukážka | Stiahnuť
SlidesJS, responzívny plugin jQuery
SlidesJS je responzívny doplnok jQuery (1.7.1 a vyšší) s prechodmi dotyku a CSS3. Experimentujte s ním, vyskúšajte niektoré pripravené príklady, ktoré vám pomôžu zistiť, ako do projektu pridať SlidesJS:
- Adaptívny dizajn;
- Prechody CSS3;
- Podpora dotykových zariadení;
- Ľahko sa nastavuje.
Ukážka | Stiahnuť ▼
Posuvník BX Jquery
Toto je bezplatný responzívny jazdec jQuery:
- Plne citlivý - prispôsobí sa akémukoľvek zariadeniu;
- Horizontálna, vertikálna zmena snímok;
- Prezentácie môžu obsahovať obrázky, videá alebo obsah HTML;
- Rozšírená podpora pre dotykové zariadenia;
- Používanie prechodov CSS pre animácie snímok ( hardvérová akcelerácia);
- Callback API a plne verejné metódy;
- Malá veľkosť súboru;
- Ľahko implementovateľné.
Ukážka | Stiahnuť
FlexSlider 2
Najlepšie reagujúci posúvač. Nová verzia bola vylepšená, aby sa zvýšila rýchlosť práce, kompaktnosť.
Ukážka | Stiahnuť ▼
Galleria - responzívna fotogaléria založená na JavaScripte
Program Galleria používajú milióny webov na vytváranie vysokokvalitných galérií obrázkov. Počet pozitívnych recenzií na jej prácu je jednoducho mimo rozsahu:
- Úplne zadarmo;
- Zobrazenie na celú obrazovku;
- 100% responzívne;
- Nie sú potrebné žiadne skúsenosti s programovaním;
- Podpora pre iPhone, iPad a ďalšie dotykové zariadenia;
- Flickr, Vimeo, YouTube a ďalšie;
- Niekoľko tém.
Ukážka | Stiahnuť ▼
Blueberry je jednoduchý reagujúci posúvač obrázkov jQuery
Predstavujeme posúvač obrázkov jQuery napísaný špeciálne pre responzívny webový dizajn. Blueberry je experimentálny doplnok na posúvanie obrázkov otvoreného zdroja, ktorý bol vyvinutý špeciálne na prácu s responzívnymi šablónami.
