Galerie v jquery pro portfolio. Výběr citlivých posuvníků. Flexisel: Responzivní plugin JQuery Carousel Slider

Protože obvykle ty nejlepší galerie vznikají v jQuery, zaměřili jsme se hlavně na posuvníky typu jQuery, ale existuje i několik jednoduchých galerií CSS.

Tato sbírka byla uspořádána do pěti hlavních kategorií, takže můžete snadno přepnout na preferovanou sekci. Než začneme, chtěli jsme vám říci, že je jen na vás, zda zvolíte bezplatné nebo prémiové řešení.

Našli jsme několik bezplatných řešení pro kvalitní obrázky, která se vám budou líbit. Samozřejmě, s prémiovými zdroji – byly zde některé galerie, které nás prostě uchvátily.

Stačí si projít kolekci a najít to nejlepší řešení obrazu pro vaše potřeby. Pokud se jedná o osobní projekt, jistě nebudete chtít utrácet žádné peníze. Ale na druhou stranu, pokud se jedná o práci na volné noze, možná stojí za to utratit trochu peněz, abyste na svého klienta skutečně zapůsobili a zároveň ušetřili spoustu času!

Myslím, že to, co navrhuji, je vždy se podívat na to, kolik času vám zabere úprava, instalace nebo nastavení bezplatného řešení. Pokud nejste tak zruční nebo je to časově náročné, rozhodně se podívejte na předem připravený kód a levné, ale vysoce kvalitní nástroje, jako jsou tyto.

Prezentace obrázků jQuery

Níže najdete všechny nejlepší prezentace jQuery. Obvykle se v horní části webové stránky používají prezentace, které představují nejdůležitější části nejmódnějším způsobem.

1.AviaSlider

5. Sekvenční JS (zdarma)

Sequence je posuvník JavaScriptu založený na frameworku CSS.

8. Prezentace 2 (zdarma)

Slideshow 2 galerie obrázků

Slideshow 2 je třída JavaScriptu pro Mootools 1.2 pro streamování a animaci prezentace obrázků na vašem webu. Úplný seznam funkcí naleznete na jejich webových stránkách.

9. JavaScript TinySlideshow (zdarma)

Velmi jednoduché řešení posuvníku obrázků.

Tato dynamická JavaScriptová prezentace je lehký (5 kB) a bezplatný skript pro obrázkovou galerii / slideshow.

Můžete jej snadno nastavit na automatické zobrazení obrázků, nastavit rychlost posouvání, neprůhlednost náhledů nebo deaktivovat posuvník náhledů. Chtěl jsem ho zahrnout do této kolekce, protože je tak lehký. Kliknutím sem stáhnete tuto prezentaci a zobrazíte živý náhled.

Galerie obrázků jQuery

V této sekci najdete galerie obrázků. Nejlépe se hodí do portfolií, ale najdou uplatnění i v blozích. Pojďme se tedy rýpat.

10. Galerie

12 Visual Lightbox

16 Galerie Unite

17. Automatické generování galerie

18. HighSlideJS

19. Plochá galerie Polaroid

Posuvníky obrázků jQuery

Tato sekce je věnována všem nejlepším a nejkrásnějším sliderům, stánkovým prémiovým a zdarma. Dělají podobnou práci jako Prezentace, ale mohou zdůraznit držáky obsahu.

20. Stiskněte možnost Enabled RoyalSlider

21. Posuvník vrstev

LayerSlider Responzivní plugin jQuery Slider.

22. Posuvník Uno

23. Hlavní posuvník

Master Slider – jQuery Touch Swipe Slider

26. Posuvník na akordeon

Accordion Slider – nejlepší jQuery akordeonový slider na trhu.

Je to jednoduchý způsob, jak ukázat své obrázky nebo obrázky, ale dostatečně výkonný, aby vás strhl. Použití je zdarma. Koukni na to.

28. Posuvník vše v jednom

29. Posuvník obrázku Borůvka

Posuvník obrázků Blueberry jQuery

Blueberry image slider je plugin jQuery, který byl vyvinut speciálně pro responzivní web design. Blueberry image slider je open-source projekt založený na 1140px mřížkovém systému z cssgrid.net. Je to jednoduché a zároveň vynikající bezplatná možnost.

Jsem si jistý, že se vám bude líbit stejně jako mně. Zkontrolujte možnost živého náhledu a stahování.

30. RhinoSlider

Posuvník Rhinoslider- Nejflexibilnější posuvník

37. Portfolio Cube – Responzivní plugin jQuery Grid

38.Slideme

prezentace jQuery

Tento plugin jQuery je skvělý pro horní část webu, kde můžete prezentovat vaši práci nebo o vás říci více.

Slideme má úplnou dokumentaci a návod, jak nastavit posuvník, pro každý typ zařízení zvlášť. Design je plně citlivý s animacemi CSS3. Snadno se nastavuje a poskytuje veřejné API.

Slideme je zdarma k použití a rozhodně stojí za zhlédnutí. Podívejte se na demo zde.

39.PgwSlider

Posuvník Pgw je posuvník jQuery,\ který je určen k předvádění vašich obrázků. Tento posuvník je plně citlivý. Je lehký a kompatibilní se všemi prohlížeči. Posuvník Pgw je také přátelský k SEO.

Tento posuvník je velmi vhodný pro zpravodajské nebo blogovací weby, protože může zobrazit váš nejnovější příspěvek nebo články.

40. Posuvník All Around Content

41. Posuvník objektivu

Lens Slider jQuery a plugin WordPress

Lens Slider je projekt s otevřeným zdrojovým kódem, a proto je plně přizpůsobitelný. Slider používá velmi jednoduché HTML značení neuspořádaného seznamu. Obrázky jsou zobrazeny tak, jak můžete vidět na snímku obrazovky. Žádná jiná možnost není k dispozici. Lens Slider je také k dispozici jako plugin WordPress a je zdarma k použití.

Nejvhodnější použití by bylo pro produkty, služby nebo týmovou prezentaci.

Podívejte se na to zde.

42. Mřížka

Gridder jQuery a plugin Ajax

Gridder je úžasný posuvník pro předvedení vaší práce. Gridder napodobuje vyhledávání obrázků Google. Pro zobrazení většího obrázku klikněte na miniaturu a ta se rozbalí. Je to skvělý způsob, jak zobrazit velké množství obrázků současně.

Gridder je k dispozici jako náhled miniatur jQuery nebo Ajax. Je to úžasné bezplatné řešení pro váš další projekt portfolia.

Živý náhled jQuery naleznete zde. Pokud chcete Ajax, klikněte sem.

43. Prezentace kasáren 0.3

Barack JS - JavaScript slideshow

Barack Slideshow je elegantní, lehká prezentace napsaná v JavaScriptu. Tato prezentace může pracovat se svislými, vodorovnými a nepravidelnými seznamy. Obrázky jsou předem načteny pomocí MooTool Assets. Aby byl váš kód čistý, měli byste zkontrolovat kód CSS. To znamená v případě potřeby vyměnit některé díly.

Barack Slideshow lze použít jako prezentaci portfolia, seznam produktů nebo dokonce pro seznam vašich klientů.

Zde můžete najít demo a vyzkoušet různé možnosti.

44. Evoluce jQZoom

JQ Zoom Evolution

JQZoom je JavaScriptová lupa obrázků, postavená na populárním rámci jQuery JavaScript. jQZoom je skvělý a opravdu snadno použitelný skript pro zvětšení částí vašeho obrázku.

Tato lupa obrazu je nejvhodnější pro nabídky internetových obchodů a restaurací.

Dokumentaci a demo najdete zde.

45. Multimediální portfolio 2

Multimediální portfolio 2 - posuvník jQuery

Multimedia Portfolio 2 je plugin jQuery, který dokáže automaticky detekovat příponu každého mediálního souboru a použít příslušný přehrávač. Podporuje obrázky a videa. Multimediální portfolio používá jednoduché HTML značky a snadno se používá.

Tento posuvník je nejvhodnější pro předvádění produktů, služeb a dokonce i zpráv.

46. ​​Virtuální prohlídka jQuery

virtuální prohlídka jQuery

jQuery Virtual tour je rozšířením jednoduchého prohlížeče panoramat. Tato virtuální prohlídka jQuery vám umožňuje přeměnit některé panoramatické pohledy na virtuální prohlídku! Je to skvělý plugin, který stojí za to se na něj podívat.

47. Posuvník vertikálních zpráv jQuery

Posuvník Vertical News – plugin jQuery

Posuvník jQuery Vertical News je velmi užitečný pro weby, které chtějí na svých stránkách zobrazovat nějaké novinky nebo marketingové kampaně. Je citlivý a používá animace CSS3. Posuvník Vertical News také umožňuje plně přizpůsobit styl posuvníku.

48. Posuvník pro více položek

Galerie založené na CSS

Přišli jsme do naší poslední sekce, kde najdete ty nejlepší čistě CSS založené galerie. Možná nejsou tak populární, ale rozhodně stojí za vyzkoušení. Podívejte se na to sami.

49. Galerie obrázků HoverBox

Galerie obrázků HoverBox

Galerie obrázků HoverBox je v podstatě super lehká (8 kb) fotogalerie s převrácením, která nepoužívá nic jiného než CSS. Pro rychlejší načítání používá pouze jeden obrázek pro miniaturu a náhled po přejetí myší. Podporovány jsou všechny hlavní prohlížeče. Galerie obrázků HoverBox je zdarma k použití pro vaše vlastní projekty.

Nejlépe se používá jako fotografická prezentace pro fotografy, jakýkoli typ portfolia a menu restaurací.

50. Posuvník obrázků CSS s 3D přechody

51. CSS3 Galerie animovaných obrázků

53. Čistá galerie obrázků CSS3

Čistá galerie obrázků CSS3

Toto je jednoduchá galerie obrázků CSS3, která po kliknutí na obrázek vytvoří efekt vyskakovacího okna. Je vhodný pro prezentaci portfolií na webových stránkách. Pokud máte zájem, můžete se také řídit návodem a vyrobit si to sami.

Podívejte se na živý náhled.

54. Galerie obrázků CSS Lightbox

CSS Lightbox image Galerie-čisté CSS

Tato galerie obrázků je další čistě CSS galerie. Po kliknutí se obrázky oddálí. Můžete si stáhnout zdrojový kód, nebo pokud máte chuť, projděte si tutoriál..

Galerie obrázků CSS Lightbox by se měla používat na neposouvatelném webu. To však lze přepsat pomocí jediného řádku JavaScriptu, který je uveden na konci výukového programu. Nejvhodnějším využitím by byla výkladní skříň portfolia.

55. Slidea

Slidea – chytřeji reagující posuvný plugin

A tady je klenot této kolekce, Slidea . Slidea je víceúčelový posuvník obsahu. Tento posuvný plugin byl postaven na animačních rámcích jQuery, VelocityJS a Animus. S Slidea nejsou žádná omezení animace – můžete s ní tolik úžasnosti!

Mohu se pokusit popsat, jak je to skvělé, ale podívejte se na ukázku níže a pochopíte, proč se mi to tak líbí!

Závěr

Musím říct, že jsem si opravdu užil zkoumání těchto pluginů. Našli jsme úžasné posuvníky, které vám, doufejme, pomohou pracovat na vašem dalším projektu efektivněji. Pro každou situaci se tu něco najde.

Existuje tolik úžasných sliderů a prezentací, že je těžké se rozhodnout, co přesně označit. Ale podle mého názoru byste se měli rozhodně podívat na posuvník Gridder, protože je opravdu úžasné, co dokáže, zvláště zdarma, takže je to oboustranně výhodná situace.

A rozhodně byste neměli zapomenout na Slidea. Ano, je to prémiový posuvník, ale má takovou hodnotu, že se do něj vyplatí investovat!

Pokud se vám náš článek líbil, okomentujte ho, sdílejte ho se svými přáteli a řekněte nám, zda jsme vynechali váš oblíbený posuvník.

Jaký je váš oblíbený plugin do galerie? Rádi bychom slyšeli vaše zkušenosti!

Náš kreativní zpravodaj

Přihlaste se k odběru našeho oblíbeného zpravodaje a získejte nejnovější zprávy a zdroje webdesignu přímo do vaší schránky.

Kompetentně sestavená a vizuálně navržená, v našem případě se jedná o samostatnou stránku, je důležitým prvkem osobního webu nebo blogu každého specialisty, který dosáhl určité úrovně dovedností ve své profesní činnosti.
Stránka portfolia je druh zprávy nebo vizuálního shrnutí, pomocí kterého můžete čtenářům a návštěvníkům webu / blogu jasně ukázat soubor nejúspěšnějších dokončených prací, ať už jde o fotografie, články, publikace. , designové prvky atd.
Takovou stránku nemám a z mé strany je to nešťastné opomenutí, které je potřeba co nejdříve napravit, na čemž aktuálně pracuji.
Na obrovských plochách globální sítě můžete najít obrovské množství hotových šablon stránek pro uspořádání portfolia a rozmanitost takových stránek je skutečně působivá. Takže, kdo se zajímá o všechny spletitosti webdesignu a vývoje, bude vždy schopen najít vhodnou volbu pro sebe. Pro ty, kteří si potrpí na znalosti v oblasti tvorby webových stránek, navrhuji analyzovat příklad adaptivního rozvržení, jednoduchou stránku portfolia, s filtrováním dokončených prací podle kategorií, vyrobených na, zředěných atraktivním přechodovým efektem, s prvky animace.

Rozvržení stránky, spustitelný javascript a některé designové prvky daly „do hor“, skvělý webový designér a vývojář Kevin Liew (queness.com). Při výběru optimálního řešení pro mě bylo důležité, aby se jednalo o jednoduchost provedení, funkčnost pluginu jQuery, správné fungování ve všech moderních prohlížečích a vzhledem ke stále rostoucí oblibě používání různých mobilních zařízení pro surfování po internetu, přizpůsobivost návrhu budoucí stránky. Žádné náročné, designové zvonky a píšťalky a těžké plug-iny.

Základní rozvržení se skládá ze dvou hlavních prvků uživatelského rozhraní, které musíme sestavit, z navigace na kartě pro filtrování kategorií odeslaných prací a ze samotné mřížky miniatur s efektem titulku při najetí.
Pro začátek, aby vše nakonec fungovalo, bude potřeba jQuery alespoň verze 1.7.0. Pokud jste jej ještě nepřipojili, přidejte před značku následující řádek :

Spusťte plugin MixItUp, vložte tento kód za výše uvedené soubory:

Nemá smysl zvažovat všechny možnosti pluginu samostatně, výchozí je docela nejlepší možnost. No, pokud někdo bude experimentovat s parametry, prosím, vše je ve vaší moci.

Chcete-li vytvořit rozvržení stránky a vzhled prvků, připojte k dokumentu několik souborů . , jeden pro základní styly, říkejme mu layout.css a další malý soubor CSS normalize.css , pro lepší konzistenci prohlížeče ve výchozím stylu:

Nyní vše rozebereme v pořádku, pokud možno bez zbytečné vody, přístupným a srozumitelným způsobem, v našem rodném, trpělivém jazyce.

• Všechno
• Aplikace
• vizitky
• ikony
• Logo
• webový design

Na navigační panel umístíme celý seznam děl rozdělený do kategorií. Potřebujeme propojit každou kategorii portfolia prostřednictvím atributu data-cat s jednou nebo jinou položkou navigační lišty v souladu s hodnotou v atributu data-filter. Porovnáním hodnot data-filtru s data-cat budou položky portfolia filtrovány podle kategorie.
K náhledu, prozatím skrytému, navíc přidáme malý panel s názvem díla a názvem kategorie, který vyskočí až po najetí na obrázek. A abychom si usnadnili vytvoření vzhledu celé této struktury v CSS, napíšeme do prvků odpovídající třídy:

Hosting Beget.Ru Logo

.........

Vezměte prosím na vědomí, že můžete přidat odkazy na obrázek nebo přímo na podpis, aby uživatel viděl celou vaši práci v plném rozsahu.

css

Nyní, v tichosti, přejděme k nejzajímavější části, k vytvoření obecných stylů uživatelského rozhraní naší stránky portfolia a její adaptivní verze v CSS. V článku uvedu pouze základní (výchozí) hodnoty, tedy bez jakýchkoli obrázků na pozadí a připojených fontů, to vše, kdo potřebuje, může vidět v demu, případně najít ve zdrojovém archivu.

Kontejner ( pozice: relativní; šířka: 960px; okraj: 0 auto; /* Řetěz přechodů uvidíte, když se změní velikost okna prohlížeče */ -webkit-transition: all 1s easy; -moz-transition: all 1s snadnost; -o- přechod: všechny 1s snadné; přechod: všechny 1s snadné; ) #filtry ( margin:1%; padding:0; list-style:none; ) #filters li (plovoucí:left; ) #filtry li span ( display: block; padding:5px 20px; text-decoration:none; color:#666; /* přidat do textu nějaký stín */ text-shadow: 1px 1px #FFFFFF; kurzor: ukazatel; ) /* změnit pozadí kategorie při vznášení */ #filters li span:hover ( pozadí: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* pozadí položky aktivní kategorie */ #filters li span.active ( pozadí: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; color:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box-sizing: border- box; -o-box- velikost: border-box; width:23%; margin:1%; display:none; float:left; overflow:hidden; ) .portfolio-wrapper ( overflow:hidden; poloha: relativní !důležité; pozadí: #666; kurzor:ukazatel; ) .portfolio img ( max-width:100%; position: relativní; ) /* štítky jsou ve výchozím nastavení skryté */ .portfolio .label (position: absolute; width: 100%; height:40px; bottom:-40px; ) . portfolio .label-bg ( pozadí: rgb(62, 151, 221); šířka: 100 %; výška: 100 %; pozice: absolutní; nahoře: 0; vlevo: 0; ) .portfolio .label-text ( barva: # fff; position: relativní; z-index:500; padding:5px 8px; ) .portfolio .text-category ( display:block; font-size:9px; )

V druhé části, přímo ve stejné šabloně stylů, pomocí několika mediálních dotazů vytvoříme alternativní CSS sekce. Aby se rozložení naší stránky správně zobrazovalo na obrazovkách různých mobilních zařízení, přidáme do těchto sekcí alternativní pravidla CSS pro různé obrazovky. Snadno tak přepíšeme jakákoli pravidla dříve nastavená v naší tabulce CSS pro běžné prohlížeče a dosáhneme velmi požadované přizpůsobivosti.

/* Tablet */ @media only obrazovka a (min-width: 768px) a (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobile – Poznámka: Design pro šířku 320px*/ @media only screen and (max-width: 767px) ( .container ( width: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Mobile – Poznámka: Určeno pro šířku 480px */ @media pouze obrazovka a (min. šířka: 480 pixelů) a (maximální šířka: 767 pixelů) ( .container ( šířka: 70 %; ) )

To je vše. Naše úžasná stránka pod velkorysým názvem "Portfolio" je připravena, zbývá ji pouze naplnit vašimi neméně úžasnými a vynikajícími díly a vystavit ji celému světu. Stále můžete být na sebe tiše, skromně hrdí. Hlavní věcí je nepřehánět to v této věci.
Podívejte se znovu na příklad a v případě potřeby vezměte zdrojový kód, ve svém volném čase, v klidném domácím prostředí, můžete toto dílo dovést k dokonalosti.

Při tvorbě lekce byl použit materiál: . Nachází se tam původní, nedotčená, jen z autorova pera, stránka portfolia.

Hodně štěstí všem a s prospěchem těla prožijte zbytek krátkého léta!

V současné době je posuvník karuselu funkcí, kterou je prostě nutné mít na obchodním webu, webu portfolia nebo jakémkoli jiném zdroji. Spolu s posuvníky obrazu na celé obrazovce se horizontální posuvné posuvníky dobře hodí do jakéhokoli návrhu webu.

Někdy musí posuvník zabírat jednu třetinu stránky webu. Zde se posuvník karuselu používá s přechodovými efekty a citlivými rozvrženími. Weby elektronického obchodu používají posuvný posuvník k zobrazení více fotografií v samostatných příspěvcích nebo stránkách. Posuvný kód je zdarma k použití a mění se podle vašich potřeb.

Pomocí jQuery ve spojení s HTML5 a CSS3 můžete udělat své stránky zajímavějšími s jedinečnými efekty a přitáhnout pozornost návštěvníků na konkrétní oblast webu.

Slick - moderní posuvný modul pro kolotoč

Slick je bezplatný plugin jQuery, jehož vývojáři tvrdí, že jejich řešení uspokojí všechny vaše požadavky na slider. Responzivní posuvník – karusel může pracovat v režimu „dlaždice“ pro mobilní zařízení a v režimu „přetažení“ pro desktopovou verzi.

Obsahuje přechodový efekt blednutí, zajímavou funkci „režim uprostřed“, líné načítání obrázků s automatickým rolováním. Aktualizované funkce zahrnují přidávání snímků a filtr snímků. Vše pro vás k přizpůsobení pluginu dle vašich požadavků.

Demo režim | Stažení

Owl Carousel 2.0 - plugin jQuery pro dotyková zařízení

Tento plugin má velkou sadu funkcí, vhodný pro začátečníky i zkušené vývojáře. Toto je aktualizovaná verze posuvníku karuselu. Jeho předchůdce se jmenoval stejně.

Posuvník má některé vestavěné pluginy pro zlepšení celkové funkčnosti. Animace, přehrávání videa, automatické přehrávání posuvníku, líné načítání, automatické nastavení výšky jsou hlavními funkcemi Owl Carousel 2.0.

Pro pohodlnější použití pluginu na mobilních zařízeních je zahrnuta podpora drag and drop.
Plugin je ideální pro zobrazování velkých obrázků i na malých obrazovkách mobilních zařízení.

Příklady | Stažení

Plugin jQuery Silver Track

Poměrně malý, ale bohatý plugin jquery, který umožňuje umístit na stránku posuvník karuselu, který má malé jádro a nespotřebovává mnoho zdrojů webu. Plugin lze použít k zobrazení vertikálních a horizontálních posuvníků, s animací a vytváření sad obrázků z galerie.

Příklady | Stažení

AnoSlide – Ultra kompaktní reagující posuvník jQuery

Ultra kompaktní posuvník jQuery je karusel, který má mnohem více funkcí než běžný posuvník. Zahrnují náhled jednoho obrázku, karusel s více obrázky a posuvník podle názvu.

Příklady | Stažení

Owl Carousel - jquery slider - kolotoč

Owl carousel je dotykový jezdec drag and drop, který lze snadno vložit do kódu HTML. Plugin je jedním z nejlepších posuvníků, které vám umožňují vytvářet krásné kolotoče bez speciálně připraveného označení.

Příklady | Stažení

3D galerie - kolotoč

Používá 3D přechody založené na stylech CSS a některém kódu Javascript.

Příklady | Stažení

3D karusel pomocí TweenMax.js a jQuery

Nádherný 3D kolotoč. Vypadá to, že je to stále beta verze, protože jsem s ní právě teď našel několik problémů. Pokud máte zájem o testování a tvorbu vlastních sliderů, bude vám tento kolotoč velkým pomocníkem.

Příklady | Stažení

Kolotoč pomocí bootstrapu

Responzivní posuvník karuselu využívající technologii bootstrap přesně pro váš nový web.

Příklady | Stažení

Posuvník založený na bootstrapu - kolotoč Moving Box

Nejvyhledávanější na portfoliových a obchodních webech. Podobný typ posuvníku - karusel se často nachází na stránkách jakéhokoli typu.

Příklady | Stažení

Malý kruhový jezdec

Tento malý posuvník je připraven pracovat na zařízeních s jakýmkoli rozlišením obrazovky. Posuvník může pracovat v kruhovém i karuselovém režimu. Malý kruh je prezentován jako alternativa k jiným posuvníkům tohoto typu. Vestavěná je podpora pro operační systémy IOS a Android.

V kruhovém režimu vypadá posuvník docela zajímavě. Podpora metody drag and drop a systém automatického posouvání snímků jsou dobře implementovány.

Příklady | Stažení

Posuvník obsahu Thumbelina

Výkonný, adaptivní posuvník kolotočového typu je ideální pro moderní web. Funguje správně na jakémkoli zařízení. Má horizontální a vertikální režimy. Jeho velikost je minimalizována na pouhý 1 KB. Ultra kompaktní plug-in má vynikající plynulé přechody.

Příklady | Stažení

wow posuvný kolotoč

Obsahuje více než 50 efektů, které vám mohou pomoci vytvořit originální posuvník pro váš web.

Příklady | Stažení

Responzivní posuvník obsahu jQuery bxSlider

Změňte velikost okna prohlížeče, abyste viděli, jak se posuvník přizpůsobí. Bxslider přichází s více než 50 možnostmi přizpůsobení a předvádí své funkce s různými přechodovými efekty.

Příklady | Stažení

jCarousel

jCarousel je plugin jQuery, který vám pomůže uspořádat zobrazení obrázků. Z rámce uvedeného v příkladu budete moci snadno vytvářet vlastní karusely obrázků. Posuvník je citlivý a optimalizovaný pro mobilní platformy.

Příklady | Stažení

ScrollBox - jQuery Plugin

Scrollbox je kompaktní plugin pro vytváření posuvníku - karuselu nebo textové běžící čáry. Mezi klíčové funkce patří efekt vertikálního a horizontálního rolování s pauzou při najetí myší.

Příklady | Stažení

dbpasCarousel

Jednoduchý posuvník kolotoče. Pokud potřebujete rychlý plugin, tento je 100% vhodný. Dodává se pouze se základními funkcemi potřebnými k tomu, aby posuvník fungoval.

Příklady | Stažení

Flexisel: Responzivní plugin JQuery Carousel Slider

Tvůrci Flexiselu se inspirovali oldschoolovým pluginem jCarousel a vytvořili jeho kopii zaměřenou na správné fungování slideru na mobilních zařízeních a tabletech.

Responzivní rozložení Flexisel se při spuštění na mobilních zařízeních liší od rozložení orientovaného na velikost okna prohlížeče. Flexisel je dokonale přizpůsoben pro práci na obrazovkách s nízkým i vysokým rozlišením.

Příklady | Stažení

Elastislide – citlivý posuvník kolotoče

Elastilide se dokonale přizpůsobí velikosti obrazovky zařízení. Můžete nastavit minimální počet obrázků, které se mají zobrazit při určitém rozlišení. Funguje dobře jako posuvník karuselu s galeriemi obrázků pomocí pevného obalu spolu s efektem vertikálního posouvání.

Příklad | Stažení

Flex Slider 2

Freeware slider od Woothemes. Je právem považován za jeden z nejlépe citlivých sliderů. Plugin obsahuje několik šablon a bude užitečný jak pro začínající uživatele, tak pro odborníky.

Příklad | Stažení

Úžasný kolotoč

Amazing Carousel je citlivý posuvník obrázků jQuery. Podporuje mnoho systémů pro správu obsahu, jako je WordPress, Drupal a Joomla. Podporuje také Android a IOS a desktopové verze operačních systémů bez problémů s kompatibilitou. Vestavěné úžasné šablony karuselu vám umožňují používat posuvník ve vertikálním, horizontálním a kruhovém režimu.

Příklady | Stažení

V tomto tutoriálu napíšeme krásné portfolio pomocí jQuery, CSS3 a pluginu Timeline. Časová osa je plugin jquery, který se specializuje na zobrazování časové osy událostí. Do tohoto portfolia můžete vkládat různé typy médií: tweety, videa, mapy, obrázky, příspěvky a pak je uspořádat podle data. Pokud zapracujete na designu, získáte krásné portfolio, které bude odrážet vaše zájmy a práci.

HTML

Ve výchozím nastavení obsahuje plugin Timeline světlé barevné schéma. To je ve většině případů velmi pohodlné a nezbytné. I když pro naše portfolio je tmavé provedení elegantnější. Proto jej optimalizujeme tak, jak se nám líbí.

Nejprve se podívejme na základní html označení stránky:

index.html

V sekci head máme styly pluginů – timeline.css a styles.css – které budou obsahovat naše volby designu. Na konec stránky uvádíme knihovnu jQuery, plugin časové osy a skript scripts.js, který plugin inicializuje.

Když zavoláme plugin, najde blok DIV s ID=časová osa. Uvnitř bloku připojí značku html, po které se stránka změní na následující: