Čas se nezastaví a s ním i pokrok. To ovlivnilo i internet. Už je vidět změna vzhled stránky, zvláště oblíbené adaptivní design. A ve výsledku mnoho nových responzivní posuvníky jquery, galerie, karusely nebo podobné pluginy.
1. Citlivý posuvník horizontálních sloupků
Responzivní horizontální karusel s podrobný návod instalací. Je vyrobena v jednoduchém stylu, ale můžete si ji upravit podle sebe.
2. Posuvník na Glide.js
Tento posuvník je vhodný pro jakýkoli web. Toto používá Glide.js s open source. Barvy posuvníku lze snadno změnit.
3. Prezentace s nakloněným obsahem
Responzivní posuvník obsahu. Vrcholem tohoto posuvníku je 3D efekt obrázků, stejně jako různé animace náhodného vzhledu.
4. Posuvník pomocí plátna HTML5
Velmi krásný a působivý posuvník s interaktivními částicemi. Vytvořeno na plátně HTML5
5. Posuvník Morphing Image
Posuvník s efektem morfování (hladká transformace z jednoho objektu na druhý). V tento příklad slider se dobře hodí pro portfolio webového vývojáře nebo webového studia ve formě portfolia.
6. Kruhový posuvník
Posuvník v podobě kruhu s efektem převrácení obrázku.
7. Posuvník rozmazané pozadí
Responzivní posuvník s přepínáním a rozostřením pozadí.
8. Responzivní módní posuvník
Jednoduché, lehké a adaptivní posuvník pro web.
9. Slicebox - posuvník 3D obrazu jQuery(AKTUALIZOVÁNO)
Aktualizovaná verze posuvníku Slicebox s opravami a novými funkcemi.
10. Zdarma animovaná responzivní mřížka obrázků
Plugin jQuery pro vytváření flexibilní mřížky obrázků, která bude přepínat záběry pomocí různých animací a časování. To může vypadat dobře jako pozadí nebo dekorativní prvek na webu, protože můžeme nastavit selektivní vzhled nových obrázků a jejich přechody. Plugin se vyrábí v několika verzích.
11.Posuvník Flex
Univerzální bezplatný plugin pro váš web. Tento plugin je k dispozici v několika možnostech posuvníku a karuselu.
12. Fotorámeček
Fotorama je univerzální plugin. Má mnoho nastavení, vše funguje rychle a jednoduše, je možné prohlížet snímky na celou obrazovku. Posuvník lze použít v pevné velikosti i adaptivní, s miniaturami i bez nich, s kruhovým posouváním i bez něj a mnoho dalšího.
P.S.Posuvník jsem dal několikrát a myslím, že je jeden z nejlepších
13. Zdarma a responzivní posuvník galerie 3D miniatur.
Experimentální galerie posuvníků 3DPanelLayout s mřížkou a zajímavými animačními efekty.
14. Posuvník na css3
Responzivní posuvník vytvořený pomocí css3 s hladkým vzhledem obsahu a světelnou animací.
15. Posuvník WOW
Posuvník WOW je posuvník obrázků s úžasnými vizuálními efekty.
17.Elastický
Elastický posuvník s plnou odezvou a miniaturami snímků.
18. Štěrbina
Toto je celoobrazovkový jezdec s animací css3. Posuvník se vyrábí ve dvou verzích. Animace je udělaná dost neobvykle a krásně.
19. Responzivní fotogalerie plus
Jednoduchá bezplatná galerie posuvníků s nahráním obrázků.
20. Responzivní posuvník pro WordPress
Responzivní bezplatný posuvník pro WP.
21. Posuvník obsahu paralaxy
Posuvník s efektem paralaxy a ovládáním každého prvku pomocí CSS3.
22. Posuvník s hudební vazbou
Posuvník pomocí open source JPlayer. Tento posuvník připomíná prezentaci s hudbou.
23. Posuvník s jmpress.js
Responzivní posuvník je založen na jmpress.js a umožní tedy na snímky aplikovat některé zajímavé 3D efekty.
24. Rychlá prezentace s přechodem
prezentace s rychlé přepínání diapozitivy. Snímky se přepínají při vznášení.
25. Obrazový akordeon s CSS3
Obrázek akordeon s css3.
26. Plugin Optimalizovaná galerie dotykem
Toto je responzivní galerie, která je optimalizována pro dotyková zařízení.
27. 3D galerie
Galerie 3D stěn- vytvořeno pro prohlížeč Safari, kde bude viditelný 3D efekt. Při prohlížení v jiném prohlížeči bude funkce v pořádku, ale 3D efekt nebude viditelný.
28. Posuvník se stránkováním
Responzivní posuvník stránkování s posuvníkem uživatelského rozhraní jQuery. myšlenkou je použít jednoduchý navigační koncept. Je možné přetáčet všechny obrázky nebo přepínat mezi snímky.
29. Montáž obrázků pomocí jQuery
Automatické uspořádání obrázků v závislosti na šířce obrazovky. Velmi užitečná věc při vývoji portfoliového webu.
30. 3D galerie
Jednoduchý 3D kruhový posuvník v css3 a jQuery.
31. Režim celé obrazovky s 3D efektem na css3 a jQuery
Posuvník s možností zobrazení obrázků na celé obrazovce s krásným přechodem.
1. Vynikající prezentace jQuery
Skvělá velkolepá prezentace využívající technologii jQuery.
2. plugin jQuery "Scale Carousel"
Zoomovatelná prezentace pomocí jQuery. Pro prezentaci si můžete nastavit rozměry, které vám nejlépe vyhovují.
3. plugin jQuery "slideJS"
Posuvník obrázku s textovým popisem.
4. Plugin "JSliderNews"
5. CSS3 jQuery Slider
Když najedete na navigační šipky, zobrazí se kulatá miniatura dalšího snímku.
6. Posuvník Pretty jQuery „Presentation Cycle“.
Posuvník jQuery s indikátorem načítání obrázku. K dispozici je automatická výměna sklíčka.
7. Plugin jQuery Parallax Slider
Posuvník s efektem 3D pozadí. Vrcholem tohoto posuvníku je pohyb pozadí, které se skládá z několika vrstev, z nichž každá se posouvá jinou rychlostí. Výsledkem je imitace objemového efektu. Vypadá to moc pěkně, můžete se sami přesvědčit. Efekt se zobrazuje plynuleji v prohlížečích, jako jsou: Opera, Google Chrome.TJ.
8. Svěží, lehký posuvník jQuery „bxSlider 3.0“
Na demo stránce v sekci "příklady" najdete odkazy na všechny možné možnosti pomocí tohoto pluginu.
9. Plugin jQuery Image Slider "slideJS"
Stylový posuvník jQuery jistě dokáže ozdobit váš projekt.
10. jQuery slideshow plugin "Easy Slides" v1.1
Snadno pomocí jQuery slideshow plugin.
11. Plugin "jQuery Slides"
Světlo plugin jQuery v různém výkonu. K dispozici je automatická výměna sklíčka.
12. Galerie CSS jQuery s automatickým přechodem mezi snímky
Pokud návštěvník do určité doby neklikne na šipku vpřed nebo zpět, galerie se začne automaticky posouvat.
13. Posuvník jQuery Nivo
Velmi profesionální kvalitní lehký plugin s platný kód. Existuje mnoho různých přechodových efektů snímků.
14. jQuery Mobile Slider
Svěží posuvník. Posuvník jQuery s různými efekty přechodu obrázků.
15. Plugin jQuery Slider²
Lehký posuvník s automatickou výměnou smyku.
16. Čerstvý javascriptový posuvník
Posuvník s automatickou změnou obrazu.
Plugin pro implementaci prezentace s automatickou změnou snímku. Displej je možné ovládat pomocí náhledů obrázků.
Posuvník obrázků jQuery CSS pomocí pluginu NivoSlider.
19. Posuvník jQuery "jShowOff".
Plugin pro otáčení obsahu. Tři případy použití: žádná navigace (s automatickou změnou formátu prezentace), navigace pomocí tlačítek, navigace v náhledech obrázků.
20. Plugin portfolia efektů závěrky
Čerstvý plugin jQuery pro návrh portfolia fotografa. Implementováno v galerii zajímavý efekt změna obrazu. Fotografie na sebe navazují s efektem podobným činnosti závěrky objektivu.
21. Lehký javascriptový CSS posuvník "TinySlider 2"
Implementace jezdce obrázku s pomocí javascriptu a CSS.
22. Úžasný posuvník "Tinycircleslider"
Stylový kulatý posuvník. Přechod mezi obrázky se provádí tažením posuvníku ve tvaru červeného kruhu po obvodu. Dokonale zapadne do vašeho webu, pokud ve svém návrhu použijete oblé prvky.
23. Posuvník obrázku jQuery
Sada lehkého posuvníku. Posuvník je prezentován v různých verzích: vertikální a horizontální. Také implementováno různé druhy navigace mezi obrázky: pomocí tlačítek "Vpřed" a "Zpět", pomocí kolečka myši, pomocí kliknutí myší na snímek.
24. Galerie miniatur sady posuvníků
Galerie sady posuvníků. Miniatury se posouvají svisle i vodorovně. Přechod mezi obrázky se provádí pomocí: kolečka myši, kliknutí myší nebo najetí myší na náhled.
25. Posuvník obsahu jQuery „Slider Kit“
vertikální a horizontální posuvník obsahu jQuery.
26. Prezentace sady jQuery Slider Kit
Prezentace s automatickou změnou snímku.
27. Lehký profesionální javascriptový posuvník CSS3
Úhledný posuvník jQuery a CSS3 vytvořený v roce 2011.
Prezentace miniatur jQuery.
29. Jednoduchá prezentace jQuery
Prezentace s navigačními tlačítky.
30. Úžasná prezentace jQuery Skitter
Plugin jQuery "Skitter" pro vytváření úžasných prezentací. Plugin podporuje 22 (!) typů různých animačních efektů při změně obrázků. Může pracovat se dvěma možnostmi navigace snímků: pomocí čísel snímků a pomocí miniatur. Nezapomeňte se podívat na demo, velmi kvalitní nález. Použité technologie: CSS, HTML, jQuery, PHP.
31. Trapná prezentace
Funkční prezentace. Snímky mohou být: jednoduché obrázky, obrázky s titulky, obrázky s popisky, videa. K navigaci můžete používat šipky, číselné odkazy a pravé/levé klávesy na klávesnici. Prezentace se vyrábí v několika verzích: s náhledy a bez nich. Chcete-li zobrazit všechny možnosti, klikněte na odkazy Demo #1 - Demo #6 umístěné v horní části stránky s ukázkou.
Velmi originální design jezdce obrazu, připomínající ventilátor. Animovaný přechod mezi snímky. Navigace mezi snímky se provádí pomocí šipek. Nechybí ani automatická změna, kterou lze zapnout a vypnout pomocí tlačítka Přehrát / Pozastavit na horní straně.
Animovaný posuvník jQuery. Obrázky na pozadí se automaticky změní při změně velikosti okna prohlížeče. U každého obrázku vyskočí blok s popisem.
34. Posuvník "Flux Slider" na jQuery a CSS3
Nový posuvník jQuery. Několik skvělých animovaných efektů při výměně snímků.
35. Plugin jQuery "jSwitch"
Animovaná galerie jQuery.
Jednoduchá prezentace jQuery s automatickou změnou snímku.
37. Nová verze pluginu "SlideDeck 1.2.2"
Profesionální posuvník obsahu. Existují možnosti s automatickou změnou snímku a také možnost pomocí kolečka myši se pohybovat mezi snímky.
38. Posuvník jQuery Sudo
Lehký posuvník obrázků jQuery. Možností implementace je spousta: horizontální a vertikální změna obrázků, s odkazy na číslo snímku i bez nich, s popisky obrázků i bez nich, různé efekty změny obrázku. K dispozici je funkce automatické výměny snímku. Odkazy na všechny příklady implementace naleznete na stránce demo.
39. Prezentace jQuery CSS3
Prezentace s miniaturami podporuje režim automatického přechodu mezi snímky.
40. Posuvník toku jQuery
Posuvník s mnoha efekty změny obrazu.
41. Jednoduchý posuvník jQuery
Stylový posuvník obrázků jQuery.
Ahoj milí čtenáři blogu. Dnes vám představuji užitečnou věc výběr bezplatných posuvníků jQuery s příklady. Pokud se přesto rozhodnete umístit na svůj zdroj posuvník obrázků, bude pro vás tento výběr velmi užitečný a věřte mi, že máte z čeho vybírat. Navíc všechny posuvníky s příklady a každý z nich si můžete vyzkoušet v akci. Obecně nebudu rozptylovat, vybírejte :-)
Jednoduchý posuvník obrázků jQuery
Nejběžnější a nevelký posuvník miniatur na vašem webu.
Posuvník miniatur jQuery
Velmi jednoduché a zajímavý posuvník s miniaturami, který je vhodný pro téměř jakýkoli design.
Krásný webový posuvník
Velký a velmi krásný posuvník obrázků se zajímavým posouváním textu.
Základní posuvník jQuery
Nejběžnější a nejjednodušší posuvník pro váš zdroj
Velký posuvník s popisem
Velkolepý slider, kterým je nereálné projít.
Posuvník a popis obrázku jQuery
Postavte se a stylový posuvník textu s obrázky a s krásný efekt překlápění.
Posouvání obrázků s radami
Zajímavé rolovací obrázky, které rolují plynule a plynule. Ve výchozím nastavení jsou obrázky různých druhů ovoce, které můžete změnit na své vlastní.
jQuery velká šipka posuvník
Zajímavý posuvník s velkými růžovými šipkami, které mění velikost přiblížením obrázku.
Musíte přidat tlačítka "vpřed" a "zpět".
Chcete-li to provést, musíte doplnit kód napsaný dříve.
HTML kód pro nový posuvník
Celá struktura posuvníku zůstane stejná. K označení budou přidány dva kontejnery, které budou fungovat jako tlačítka.
Styly posuvníků
Tlačítka zaujmou své místo díky absolutní umístění vzhledem ke kontejneru.slider-box
Slider-box( position : relativní ; width : 320px ; height : 210px ; overflow : hidden ; ) .slider( position : relativní ; width : 10000px ; height : 210px ; ) .slider img( float : left; ) .slider .prev , .slider-box .next( position : absolute ; top : 100px ; display : block ; width : 29px ; height : 29px ; cursor : pointer ; ) .slider-box .prev( left : 10px ; background : url ( ../images/slider_controls.png ) no-repeat 0 0 ; ) .slider-box .next ( right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px 0 ; )
Skript
Posuvník se posouvá automaticky. Ve výchozím nastavení jde pohyb zleva doprava, ale v případě potřeby můžete změnit směr jeho pohybu pomocí proměnné kurzu. Při změně hodnoty proměnné z 1 na -1 se změní směr posuvníku.
Obrázky v posuvníku by se neměly měnit, když je kurzor uvnitř posuvníku. K čemu to je? Všechno je jednoduché. Pokud je kurzor myši umístěn na posuvníku, znamená to, že návštěvníka stránky zajímá její obsah. V tuto chvíli neměňte snímky automaticky.
$(function () ( var slider = $(.slider" ) , sliderContent = slider.html () , // Obsah posuvníku slideWidth = $(".slider-box") .outerWidth() , // Šířka posuvníku slideCount = $(".slider img") .length , // Počet snímků prev = $(".slider-box .prev" ) , // tlačítko Zpět další = $(".slider-box .next" ), // Tlačítko vpřed posuvníkInterval = 3300, // Interval pro výměnu snímků animateTime = 1000, // Čas na změnu snímků kurz = 1 // Směr pohybu posuvníku (1 nebo -1) margin = - slideWidth; // Počáteční posun snímků$(".slider img:last" ) .clone () .prependTo (.slider" ) ; // Kopie posledního snímku je umístěna na začátek.$(".slider img" ) .eq (1) .klon () .appendTo (".slider" ) ; // Kopie prvního snímku je umístěna na konec.$(".slider" ) .css ("margin-left" , - slideWidth) ; // Container.slider je posunut doleva o šířku jednoho snímku. funkce nextSlide() ( // Spustí funkci animation() k provedení přechodu mezi snímky. interval = window.setInterval (animate, sliderInterval) ; ) funkce animate() ( if (margin==- slideCount* slideWidth- slideWidth) ( // Pokud posuvník dosáhl konce slider.css (( "marginLeft" :- slideWidth) ); // pak se block.slider vrátí do své výchozí pozice margin=- slideWidth* 2 ; ) else if (margin== 0 && kurz==- 1 ) ( // Pokud je posuvník na začátku a je stisknuto tlačítko zpět slider.css (( "marginLeft" :- slideWidth* slideCount) ); // poté se block.slider přesune do konečné pozice margin=- slideWidth* slideCount+ slideWidth; ) jinak ( // Pokud výše uvedené podmínky selžou, margin = margin - slideWidth* (kurz) ; // hodnota okraje je nastavena pro zobrazení dalšího snímku) slider.animate (( "marginLeft" : margin) , animateTime) ; // Block.slider se posune o 1 snímek doleva.) funkce sliderStop() ( // Funkce pro zastavení posuvníku window.clearInterval(interval); )prev.click(function()( // Stisknuto tlačítko Zpět var kurz2 = kurz; kurz = - 1; animate() ; // Volání funkce animate(). kurz = kurz2 ; )); next.click(function()( // Stisknuto tlačítko Zpět if (slider.is (":animated" ) ) ( return false ; ) // Pokud nedojde k žádné animaci var kurz2 = kurz; // Dočasná proměnná pro uložení hodnoty samozřejmě kurz = 1 ; // Nastavení směru posuvníku zprava doleva animate() ; // Volání funkce animate(). kurz = kurz2 ; // Proměnná kurzu se vrátí na svou původní hodnotu)); slider.add(next) .add(prev) .hover(function()( // Pokud je kurzor myši uvnitř posuvníku sliderStop() ; // Funkce sliderStop() je volána k pozastavení posuvníku), další snímek); // Když kurzor opustí posuvník, animace se obnoví. dalsiSlide() ; // Volání funkce nextSlide(). } ) ;Ukázalo se, že takový posuvník s tlačítky „vpřed“ a „zpět“
Od autora: i přes zvěsti o údajné „smrti“ části webových stránek viditelné bez rolování, potřeba dobrého posuvníku nikam nezmizela. Buďme na chvíli upřímní – posuvníky jsou zábavné. Navíc nic jiného, na rozdíl od přesouvání obsahu, nezpůsobuje v uživateli „wow“ efekt. Všechny posuvníky jsou sadou několika snímků, které se navzájem nahrazují, a je nesmírně důležité, aby byl kód posuvníku co nejlehčí. Zde se jQuery hodí.
Podívejte se na 20 posuvníků jQuery z Envato Market a uvidíte, že existují posuvníky, které jsou víc než jen blok posuvníků.
1. RoyalSlider – Galerie obrázků dotykové obrazovky s jQuery
Nyní citlivý posuvník, který je také přátelský k dotykové obrazovce, znamená mnohem více než dříve. RoyalSlider kombinuje obě funkce: přizpůsobivost a práci s dotykovými obrazovkami. Dobrá volba, protože galerie je napsána v HTML5 a CSS3.
Několik zajímavých funkcí:
Jak si vytvořit web sami?
SEO optimalizace
Vysoká přizpůsobitelnost
Více než 10 startovacích šablon
Pro přechody CSS3 existuje záložní řešení
Podle mého názoru je nejlepší funkcí „modulární architektura skriptů“, která vám umožňuje zakázat nepotřebné věci z hlavního souboru JS, čímž se sníží hmotnost. RoyalSlider, galerie obrázků dotykové obrazovky jQuery, je robustní posuvník JavaScriptu, který by měl být nezbytnou součástí každé vývojářské sady nástrojů.
2. Plugin jQuery reagující na revoluci posuvníku
Udělat něco „revolučního“ se sliderem není jednoduché. Pokud jde o posuvníky, existuje tolik funkcí, které k nim můžete přidat. Nicméně Slider Revolution je opravdu dobrý pokus. Mezi posuvníky jQuery tato instance splňuje všechny vaše možné požadavky.
Seznam funkcí posuvníku je tak dlouhý, takže uvedu jen to nejlepší:
Paralaxní efekt a vlastní animace
Neomezené množství vrstev a snímků s odkazy
připravené k použití, hluboce přizpůsobitelné styly
a mnohem víc
Možnost přidat obrázek, vestavěný přehrávač videa a odkazy z sociální sítě dělá z Slider Revolution jednu z nejvíce flexibilních a přizpůsobitelných možností na webu.
3. LayerSlider Responzivní posuvný plugin jQuery
Název „LayerSlider Responsive jQuery Slider Plugin“ tomuto posuvníku opravdu neodpovídá.
200+ 2D a 3D přechodů snímků zatočí hlavou každému.
Několik pozoruhodných funkcí:
13 vzhledů a 3 typy menu
Možnost umístit pevný obrázek na horní část posuvníku
A záložní jQuery
A mnohem víc
Stejně jako u předchozího posuvníku lze přidat téměř jakýkoli obsah, dokonce i rezidentní multimediální obsah HTML5. LayerSlider oživuje posuvníky a je také velmi pěkný.
4. jQuery Banner Rotator / Slideshow
jQuery Banner Rotator / Slideshow je docela jednoduchý posuvník, který neobětuje žádnou ze základních funkcí.
Schopnosti:
Popisky, vkládání textu atd.
Náhled a různé možnosti zobrazení komponent
Časovač se zpožděním pro jeden posuvník nebo pro všechny
Více přechodů pro všechny snímky nebo různé přechody pro každý jednotlivě
jQuery Banner Rotator / Slideshow má ve srovnání s ostatními jQuery slidery pouze základní funkce, ale neměli byste na to zapomínat.
5. All In One Slider – Responzivní plugin jQuery Slider
Jakýkoli posuvník, který se objeví na webu, má svou jedinečnou vizi a řeší jakékoli problémy ve svém oboru. Ale ne tenhle. All In One Slider lze nazvat „all inclusive“.
Myslím, že většina webových vývojářů a designérů má osvědčené řešení, ale stále hledají něco nového. A toto "něco nového" zahrnuje:
Bannerový rotátor
náhled banneru
Banner seznamu videí
Posuvník obsahu
Kolotoč
Všechny typy posuvníků podporují většinu, ne-li všechny funkce požadované posuvníky jQuery. Bude All In One Slider vaším All Inclusive?
6. UnoSlider – citlivý posuvník dotykové obrazovky
Pokud váš posuvník nereaguje a nepodporuje dotykové obrazovky, pak máte špatný posuvník. UnoSlider má pravdu.
Tento posuvník si našel své místo na slunci mezi jednoduchostí a bohatou sadou funkcí. Funkce:
Podpora motivu
12 předem připravených témat
40 přechodů
Podpora IE6+
Všechny funkce se zaměřením na design a styl, díky čemuž je UnoSlider skvělým posuvníkem obsahu s možností přidávat motivy.
7. Hlavní posuvník – posuvník dotykové obrazovky jQuery
Hledáte „jeden posuvník jQuery, který bude vládnout všem“? Vyzkoušejte Master Slider – posuvník dotykové obrazovky jQuery pro různé velikosti obrazovky…
Pokud jde o dobrý design, tento příklad je jedním z nejlepších:
Více než 25 šablon
Hardwarově zrychlené přechody
Podpora dotyku a přejetí
A mnohem víc
Interaktivní přechody, animované vrstvy a aktivní body rozhodně upoutají vaši pozornost. Master Slider je umělecké dílo.
8. TouchCarousel – posuvník a posuvník obsahu jQuery
TouchCarousel láká na bezplatnou podporu a aktualizace. To však nejsou všechny funkce tohoto lehkého posuvného kolotoče jQuery.
Pokud název obsahuje slovo „touch“, můžete hádat, že posuvník je plně citlivý a podporuje dotyk. Další funkce:
SEO optimalizace
Inteligentní automatické přehrávání
Hardwarově akcelerované přechody CSS3
Přizpůsobitelné uživatelské rozhraní a 4 vzhledy pro Photoshop
TouchCarousel je díky svému jedinečnému fyzickému posouvání snímků zcela novou úrovní zážitku na mobilních zařízeních.
9. Advanced Slider – jQuery XML Slider
Posuvníky jQuery lze použít pro více než jen webové stránky. Mohou být také užitečné ve webových aplikacích. Advanced Slider vám to umožní.
Se značkami HTML nebo XML zanechá tento pokročilý posuvník trvalý dojem:
Animované vrstvy a inteligentní video
100+ přechodů a 150+ uživatelských vlastností
15 vzhledů posuvníku, 7 vzhledů posuvníku a nativní podpora lightboxu
Navigace pomocí klávesnice, dotyková podpora a plné přizpůsobení
A mnohem víc
Nicméně nejvíce nejlepší vlastnost je to Advanced Slider - jQuery XML Slider API, díky kterému je posuvník perfektní volbou pro vaši webovou aplikaci.
10. Posuvník jQuery Efekt přiblížení/oddálení Plně reagující
Jeden z těch posuvníků jQuery, díky kterým se budete chtít podívat na ukázku, než začnete číst o jeho funkcích. Chcete jen pochopit, co tento "efekt přiblížení/oddálení" znamená.
Efekt přiblížení je poměrně slabý, ale dodává obrazu pocit kontroly a skutečný dotyk, zatímco zbytek posuvníku je statický. Vlastnosti posuvníku:
Přechody vrstev CSS3
Možnost konce animace pro vrstvy
Možnosti pevné šířky, celé obrazovky a plné šířky
Animovaný text s formátováním HTML a CSS
Většina posuvníků se snaží zabalit co nejvíce efektů a jQuery Slider Efekt přiblížení/oddálení Plně reagující má pouze efekt Ken Burns, ale je dobře implementován.
11. jQuery Carousel Evolution
Stejně jako výše zmíněný Advanced Slider – jQuery XML Slider má jQuery Carousel Evolution své vlastní API, které lze použít k vylepšení funkčnosti nebo k integraci posuvníku do jiného projektu.
Jak si vytvořit web sami?
Jaké technologie a znalosti jsou dnes potřeba k vlastní tvorbě webových stránek? Učte se intenzivně!
S obrázky, značkami HTML, videi YouTube a Vimeo také získáte:
SEO optimalizace
9 stylů kolotoče
Stínové a reflexní efekty
Velikost obrázku lze upravit, přední i zadní
jQuery Carousel Evolution je jednoduchý karusel s mnoha možnostmi využití.
12 Sexy Slider
Sexy Slider už není tak sexy jako dřív. Vzhledem ke svému stáří je však tento posuvník důvěryhodný.
Na první pohled posuvník není příliš působivý, ale pokud je dobře nakonfigurován, dokonale zapadne do vašeho designu. Schopnosti:
Automatické přehrávání snímků
Popisky obrázků
Nepřetržité přehrávání snímků
6 přechodových efektů
Sexy Slider čeká, až odemknete jeho plnou sílu a uvolníte jeho potenciál.
13. jQuery Image & Content Scroller w/ Lightbox
Se všemi těmito návrhy a podporou pro mobilní zařízení dotykové obrazovky rád vidím posuvník jQuery, na který jsem nezapomněl stolní počítače.
jQuery Image & Content Scroller w/ Lightbox podporuje vstup z klávesnice a kolečko myši, mimo jiné:
Horizontální a vertikální orientace
Textové titulky uvnitř nebo vně posuvníku
Možnost nastavit určitý počet viditelných snímků najednou
Vložené obrázky, Flash, iframe, Ajax a vložený obsah
Posuvník má také zabudovaný lightbox. Volitelně v jQuery Image & Content Scroller w/ Lightbox nemůžete spustit samotný posuvník, ale spustit lightbox samostatně.
14. Průhledný - Reagující rotátor / posuvník banneru
Většina posuvníků jQuery má svůj vlastní design. Můžete si to přizpůsobit pro sebe, ale někdy prostě chcete, aby všechno bylo uvnitř posuvníku. Vaši pozornost představuje Translucent.
Posuvník má spoustu předvoleb. Možná budete muset nastavit určitá nastavení a je to. Schopnosti:
4 přechodové efekty
2 přechody přejetím
Přizpůsobitelná tlačítka a štítky
Stejně jako ostatní je i tento posuvník dotykový, citlivý a hardwarově akcelerovaný. Translucent je posuvník s minimálním designem, který staví do popředí samotný obsah.
15. FSS - Full Screen Sliding Website Plugin
Chcete vytvořit web na celou obrazovku se snímky? Pak potřebujete FSS.
Vlastně s pomocí daný jQuery slider je velmi snadné vytvořit web s posuvníkem na celé obrazovce. Schopnosti:
podpora AJAX
Posuvník
Podpora technologie hlubokých odkazů
2 různé přechodové efekty
Za pozornost stojí také podpora klávesnice a 11stránkový průvodce. Skutečným dojmem je však hmotnost FSS, pouhých 5Kb.
16. Zozo Accordion - Citlivý posuvník dotykové obrazovky
Další příklad posuvníku jQuery zaměřeného na styl, který dobře funguje. Zozo Accordion je nutností pro každého, kdo hledá dobrý akordeonový posuvník se schopností měnit styly.
Tato krása animace CSS3 má také docela širokou škálu funkcí:
Horizontální a vertikální akordeon
Sémantické HTML5 a SEO optimalizace
Podpora dotyku, klávesnice a WAI-ARIA
Více než 10 vzhledů a 6 rozložení
A mnohem víc
Zozo akordeon bezplatná podpora a neustálé aktualizace, stejně jako všechny funkce, které chcete vidět v akordeonu jQuery.
17.JQuery responzivní OneByOne Slider Plugin
jQuery Responsive OneByOne Slider Plugin je spíše podobný jednoduchá animace, nikoli na posuvníku. Namísto zobrazení jednoho snímku po druhém tato instance postupně vyplní obrazovku snímky, dokud v oblasti nezůstane místo, než se přesune na další snímek.
Animace CSS3 funguje v rámci Animate.css, je lehká, má více vrstev a je vhodná pro mobilní zařízení. Více funkcí:
K dispozici je také možnost navigace drag and drop pokles. Plugin jQuery Responsive OneByOne Slider Plugin je poháněn karuselem Twitter Bootstrap.
18. Accordionza - jQuery Plugin
Neexistuje jednodušší posuvník jQuery než tento. K práci potřebujete pouze 3 kB posuvníku, díky čemuž je Accordionza nejlehčím posuvníkem typu akordeonu.
Pokud se vám nelíbí tři možnosti stylu, můžete si HTML a CSS upravit sami. Schopnosti:
Navigace pomocí klávesnice
Snadné přizpůsobení efektů a tlačítek
Technika progresivního vylepšování - funguje bez JavaScriptu
Mějte na paměti, že Accordionza může zobrazovat mnoho variací smíšeného obsahu, takže je extrémně flexibilní.
19. strongySlider - Responzivní víceúčelový jezdec
MightySlider je opravdu výkonný slider. Lze jej použít nejen jako jednoduchý posuvník obrázků, ale také jako celoobrazovkový jednosměrný posuvník s navigací v položkách nabídky. S ním můžete vytvořit skvělý jednostránkový web.
Pod kapotou najdete mnoho možností:
Podpora klávesnice, myši a dotyku
Hardwarově akcelerované přechody CSS3
Vyčistěte platné značkování a SEO optimalizaci
Neomezené množství snímků, vrstev titulků a efektů
API je velmi výkonné a přátelské pro vývojáře, což se otevírá různé cesty jeho použití. MightySlider je vynikající progresivní posuvník jQuery s čistým a dobře komentovaným kódem.
20. Parallax Slider – Responzivní plugin jQuery
Parallax Slider funguje jako jQuery Responsive OneByOne Slider Plugin a umožňuje animovat každou vrstvu zvlášť v rámci stejného snímku. Můžete animovat všechny snímky nebo dokonce jen jeden přidáním animace paralaxy.
Dodává se se 4 posuvníky odlišné typy, vše s paralaxovým efektem. Stejně jako ostatní posuvníky jQuery má:
Plná přizpůsobitelnost
Dotyková podpora
Plně responzivní, neomezené vrstvy
Automatické přehrávání, opakování, nastavení výšky a šířky a časovač
Animované vrstvy nejsou jen text nebo obrázky. Můžete také přidat videa z YouTube, Vimeo a HTML5. Parallax Slider - další dobrý příklad jak můžete simulovat efekty Flash ještě lépe než samotný Flash, který je také podporován na všech zařízeních.
Závěr
Je zajímavé sledovat, jak posuvníky jQuery vyrostly z něčeho, co jednoduše nahrazuje jeden obrázek jiným, v obrovskou sadu kreativních nástrojů. Nyní jsou k dispozici 3D posuvníky, posuvníky paralaxy, posuvníky na celou stránku, responzivní posuvníky a ty, které lze zobrazit jak na stolních počítačích, tak na chytrých telefonech.
Pokud se vám nelíbí některý z posuvníků na tomto seznamu, můžete si vždy projít jQuery Code Tutorial na Envato a vyvinout něco zcela nového a jedinečného.
Nebo se podívejte na další posuvníky na Envato Market, ze kterých si můžete vybrat. Jaký je váš oblíbený posuvník jQuery a proč?