Posuvník s popisem v jquery. Vytvoření jednoduchého posuvníku pomocí jQuery

Potřebujeme jednoduchý posuvník s automatickým rolováním. Začněme...

Popis toho, jak posuvník funguje.

Snímky se zarovnají a po určité době se budou posouvat.

Červený rámeček ukazuje viditelnou část posuvníku.

Na konci posuvníku musíte duplikovat první snímek. To je nezbytné pro zajištění rolování ze třetího snímku na první. Musíte také přidat poslední snímek na začátek, abyste mohli posouvat zpět od prvního snímku ke třetímu. Níže je znázorněno, jak posuvník funguje ve směru dopředu.

Když posuvník dosáhne konce, jeho kopie ze začátku posuvníku se okamžitě umístí na místo posledního snímku. Poté se cyklus znovu opakuje. To vytváří iluzi nekonečného posuvníku.

HTML značení

Nejprve si udělejme jednoduchý posuvník s automatickým rolováním. K provozu jsou potřeba dva kontejnery. První nastaví velikost viditelné oblasti posuvníku a druhá je potřeba k umístění posuvníků do ní. Rozložení posuvníku bude vypadat takto:

Styly posuvníku .slider-box( šířka : 320px ; výška : 210px ; přetečení : skryté ; ) .slider( pozice : relativní ; šířka : 10000px ; výška : 210px ; ) .posuvník img( plovoucí : vlevo ; z-index; . )

Container.slider-box určuje rozměry posuvníku. Pomocí vlastnosti overflow:hidden se skryjí všechny prvky, které nejsou zahrnuty v oblasti uvnitř prvku.

Container.slider je nastaven na velkou šířku. To je nutné, aby se všechna sklíčka vešla do linky.

Snímky jsou zarovnány pomocí vlastnosti float:left.

Níže je schematické rozložení posuvných bloků.

Skript

Pohyb snímků bude prováděn plynulou změnou vlastnosti margin-left kontejneru.slider.

$(function () ( var width= $(".slider-box" ) .width () ; // Šířka posuvníku. interval = 4000 ; // Interval změny snímku. $(".slider img:last" ) .clone () .prependTo (.slider" ); // Kopie posledního snímku je umístěna na začátek. $() .eq (1) .clone () .appendTo ( "posuvník" ) ; // Kopie první snímek je umístěn na konec. // Container.slider je posunut doleva o šířku jednoho snímku setInterval("animation()" , interval) ; // Funkce animation() je spuštěna pro změnu snímků. ) ); function animation() ( var margin = parseInt($(".slider") .css ("marginLeft" ) ) ; // Aktuální offset bloku.slider width= $(".slider-box" ) .width () , / / Šířka posuvníku. slidersAmount= $(".slider" ) .children () .length ; // Počet snímků v posuvníku. if (margin!= (- width* (slidersAmount- 1) ) ) // Pokud je aktuální snímek není poslední , ( margin= šířka- šířka; // pak se hodnota okraje zmenší o šířku snímku. ) else ( // Pokud je zobrazen poslední snímek, $(.slider" ) .css ( "margin-left" , - width) ; // pak se vrátí block.slider začáteční pozice, okraj=- šířka* 2 ; ) $(".slider") .animate (( marginLeft: margin) , 1000 ) ; // Block.slider je posunut doleva o 1 snímek. );

Výsledkem byl jednoduchý posuvník s nekonečným automatickým rolováním.

Dobrý den, milí čtenáři blogu. Dnes vám představím užitečný výběr zdarma posuvník jQuery ov 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. Všechny posuvníky navíc obsahují příklady a každý z nich si můžete vyzkoušet v akci. Obecně vás nebudu rozptylovat, vyberte si :-)

Jednoduchý posuvník obrázků jQuery

Nejběžnější a malý posuvník miniatur na vašem webu.

Posuvník miniatur v JQuery

Velmi jednoduchý a zajímavý posuvník s náhledy, který se hodí téměř ke každému designu.

Krásný posuvník pro web

Velký a velmi krásný posuvník obrázků se zajímavým posouváním textu.

Běžný posuvník jQuery

Nejběžnější a nejjednodušší posuvník pro váš zdroj

Velký posuvník s popisem

Velkolepý slider, který je nemožné projít kolem.

Posuvník a popis obrázku JQuery

Počkejte a stylový posuvník textu s obrázky a s krásným efektem převrácení.

Posouvání obrázků s radami

Zajímavé rolování obrázků, které roluje plynule a plynule. Ve výchozím nastavení jsou obrázky různých druhů ovoce, které si můžete změnit za své.

Posuvník jQuery s velkými šipkami

Zajímavý posuvník s velkými růžovými šipkami, které mění velikost zvětšením obrázku.

Adaptivní, nebo chcete-li responzivní webdesign již není jen dalším designovým trendem, je již určitým standardem pro tvorbu webových stránek, zajišťující univerzálnost webových stránek a harmonické vizuální vnímání na obrazovkách různých uživatelských zařízení. V poslední době během vývoje adaptivní šablona, musel jsem čelit různým potížím při integraci určitých posuvníků a galerií obrázků, aniž bych narušil celkový styl designu. Nyní je vše mnohem jednodušší, na internetu je obrovské množství hotových řešení a potěší především to, že většina z nich je volně dostupná, otevřená zdrojový kód.

Vzhledem k rozmanitosti nabízených nástrojů jsem sestavil krátký přehled nejpozoruhodnějších vývojů responzivních jQuery image sliderů, které se v poslední době objevily a jsou distribuovány bez jakýchkoli omezení, tzn. zcela zdarma.

Posuvník WOW

Responzivní posuvník obrázků jQuery se skvělou sadou vizuálních efektů (rotace, rozbalení, rozostření, spirály, rolety atd...) a mnoha připravenými šablonami. S vestavěným průvodcem vkládání stránek WOW Slider můžete snadno a bez námahy vytvářet ohromující prezentace během několika minut. Web vývojáře obsahuje veškerou potřebnou dokumentaci pro nastavení a používání pluginu v ruštině a také vynikající živé příklady fungování pluginu. Ke stažení je také k dispozici samostatný plugin pro Wordpress a modul pro Joomla. Jsem si jistý, že se tento nádherný slider bude líbit mnoha začátečníkům i zkušeným webmasterům.

HiSlider

HiSlider - HTML5, posuvník Jquery a galerie obrázků, absolutně bezplatný plugin pro osobní použití na stránkách s populárními systémy - WordPress, Joomla, Drupal. S pomocí tohoto jednoduchého, ale docela funkčního nástroje můžete snadno vytvářet úžasné a živé prezentace, velkolepé prezentace a oznámení o nových zprávách na stránkách vašich webových stránek. Několik předpřipravených šablon a vzhledů pro posuvník, úžasné efekty přechodu (změny) obsahu, výstup různého multimediálního obsahu: videa z YouTube a Vimeo, flexibilní vlastní nastavení atd...

Nivo Slider

Nivo Slider je starý dobrý, všem znalým dobře známý, jeden z nejkrásnějších a nejsnadněji použitelných jezdců obrázků. Plugin JQuery Nivo Slider je zdarma ke stažení a použití a je licencován pod licencí MIT. Existuje i samostatný plugin pro WordPress, ale ten je již bohužel placený a za jednu licenci budete muset zaplatit 29 dolarů. Je lepší trochu kouzlit se soubory motivů WP a připojit bezplatnou verzi jQuery pluginu Nivo Slider na svůj blog, protože na internetu je spousta informací, jak to udělat.
Co se týče funkčnosti, tak je vše v pořádku v naprostém pořádku. K práci se používá knihovna jQuery v1.7+, krásné efekty přechody, jednoduché a velmi flexibilní nastavení, adaptivní rozložení, automatické ořezávání obrázků a mnoho dalšího.

Myšlenka slideru byla inspirována vývojáři, kteří jsou dobře známí svým stylem prezentace Apple produkty, kde se několik malých objektů (obrázků) změní kliknutím na vybranou kategorii s jednoduchým animačním efektem. Codrops vám nabízí podrobnou lekci, jak vytvořit tento posuvník, kompletní rozložení značek Html, sadu CSS pravidla a spustitelný plugin jQuery, stejně jako nádherný živý příklad použití posuvníku.

Štěrbinový posuvník

Posuvník obrázků na celé obrazovce pomocí JQuery a CSS3 + podrobný návod na integraci pluginu do webových stránek. Cílem je rozdělit otevřený aktuální snímek na určitý obsah při přechodu na další nebo předchozí obsah. Pomocí JQuery a CSS animace můžete vytvářet jedinečné přechody mezi snímky. Responzivní rozložení posuvníku zajišťuje, že vypadá stejně dobře na všech obrazovkách různé typy uživatelská zařízení.

Posuvník elastického obsahu

Posuvník obsahu, který se automaticky nastavuje na šířku a výšku v závislosti na velikosti nadřazeného kontejneru, ve kterém se nachází. Docela jednoduché na implementaci a flexibilní v nastavení, posuvník běží na JQuery, s navigací ve spodní části, při změně velikosti obrazovky směrem dolů se navigace zobrazuje ve formě ikon. Velmi podrobná dokumentace (tutoriál tvorby) a živé příklady použití.

Posuvník 3D zásobníku

Experimentální verze posuvníku, který ukazuje obrázky s přechody z 3D roviny. Obrázky jsou rozděleny do dvou vodorovných sloupců, přičemž pomocí navigačních šipek lze každý následující obrázek změnit a převést do stavu prohlížení. Obecně nic zvláštního, ale samotný nápad a technika provedení jsou docela zajímavé.

Velmi jednoduchý, 100% citlivý a celoobrazovkový posuvník obrázků jQuery. Funkce posuvníku je založena na přechodech CSS (vlastnost přechodu) ve spojení s kouzlem jQuery. Hodnota max. šířky je standardně nastavena na 100 %, takže velikost obrázků se bude měnit v závislosti na změnách velikosti obrazovky. V designu nejsou žádné speciální animační efekty nebo ozdoby, vše je jednoduché a navržené pro bezproblémový provoz.

Minimální snímky

Název mluví sám za sebe, je to možná jeden z nejlehčích a nejminimalističtějších posuvníků obrázků jQuery, se kterými jsem se setkal (1kb plugin). ResponsiveSlides.js je malý plugin JQuery, který vytváří prezentace pomocí prvků uvnitř kontejneru. Funguje se širokou škálou prohlížečů, včetně všech verzí IE - slavné brzdy pokroku, od IE6 a vyšších. Práce využívá pro spolehlivost přechody CSS3 ve spojení s javascriptem. Jednoduché použití značek neuspořádaný seznam, nastavení přechodů a časových intervalů, automatické a ruční ovládání přepínání snímků a také podpora několika prezentací najednou. Tady je takové hravé „dítě“.

Fotoaparát

Camera je bezplatný plugin JQuery pro organizování prezentací na webových stránkách, lehký posuvník s mnoha přechodovými efekty, 100% responzivní rozložení a velmi jednoduché nastavení. Dokonale se hodí na obrazovky všech uživatelských zařízení (PC monitory, tablety, chytré telefony a Mobily). Možnost předvedení vloženého videa. Automatická změna snímku a ruční ovládání pomocí tlačítek a bloku miniatur obrázků. Téměř kompletní galerie obrázků v kompaktním provedení.

bxSlider jQuery

Další poměrně jednoduchý responzivní posuvník v jQuery. Na své snímky můžete umístit libovolný obsah, video, obrázky, text a další prvky. Rozšířená podpora dotykové obrazovky. Použití přechodových animací CSS. Velké množství různých variací prezentací a kompaktních obrazových galerií. Automatické i manuální ovládání. Přepínejte snímky pomocí tlačítek a výběrem miniatur. Malá velikost zdrojový soubor, velmi snadno se konfiguruje a implementuje.

FlexSlider 2

FlexSlider 2 – Aktualizovaná verze stejnojmenného posuvníku s vylepšenou odezvou, minifikací skriptu a minimalizací přeformátování/překreslování. Plugin obsahuje základní posuvník, posuvné ovládání s náhledy, vestavěné šipky doleva a doprava a spodní navigační lištu v podobě tlačítek. Možnost zobrazení videa ve snímcích (vimeo), flexibilní nastavení (přechody, design, časový interval), plně adaptivní rozložení.

Galleria

Dobře známý a poměrně oblíbený responzivní plugin jQuery pro vytváření vysoce kvalitních galerií obrázků a posuvníků. Rozhraní posuvníku díky ovládacímu panelu vizuálně připomíná známý přehrávač videa, plugin obsahuje několik různých designových témat. Podpora pro vložená videa a obrázky z oblíbených služeb: Flickr, Vimeo, YouTube a další. Podrobná dokumentace k nastavení a použití.

Borůvka

Jednoduchý bezplatný posuvník obrázků jQuery napsaný speciálně pro responzivní webový design. Blueberry je experimentální open source plugin jQuery. Minimalistický design, žádné efekty, pouze plynule vyskakující obrázky, které se po určité době nahrazují. Vše je velmi jednoduché, nainstalujte, připojte a jeďte...

jQuery popeye 2.1

Velmi kompaktní posuvník obrázků jQuery s prvky Lightbox. Díky flexibilním rozměrům se velmi snadno integruje do libovolného kontejneru, do jediného zadání v podobě náhledů se při najetí kurzorem myši nebo kliknutí na ně aktivuje lightbox se zvětšeným obrázkem a ovládacími prvky. Je vhodné umístit takový posuvník do bočních panelů pro prezentaci produktů nebo oznámení o novinkách. Vynikající řešení pro stránky s velkým množstvím informací.

Sekvence

Zdarma responzivní posuvník s pokročilými přechody CSS3. Minimalistický styl, 3 motivy designu, Každý snímek se posouvá vodorovně, zobrazuje se uprostřed, obrázek jde doleva, podpis vpravo, miniatury jsou duplikovány v pravém dolním rohu. Stránkování pohledů na produkty k zobrazení v každém snímku. Součástí ovládacích prvků jsou také tlačítka zpět a vpřed. Podpora od všech moderní prohlížeče.

Výpad

Funkčně i nastavením velmi jednoduchý posuvník obrázků, mezi nastaveními je změna rychlosti výměny snímků, aktivace manuálního režimu (aktivují se ovládací tlačítka), plynulé promítání snímků. Tento posuvník má právo na existenci a zaujal mě jen proto, že existuje; nenašel jsem v tomto vývoji nic zvlášť zajímavého, možná jsem to nehledal dobře)))

Responzivní jezdec obrázku

Takový krásný, adaptivní posuvník obrázků od Vladimíra Kudinova, soudruzi. Solidní, dobře navržený nástroj s jasnými příklady a podrobné pokyny o vytvoření, instalaci a použití. Adaptivní design, pěkná tlačítka a zelené šipky, vše je celkem pěkné a klidné, bez tlaku.

FractionSlider

Zdarma JQuery slider plugin s efektem paralaxy pro obrázky a textové snímky. Animace snímků mají více hodnot zobrazení s plnou kontrolou v každém nastavení časování a animace. Schopnost animovat několik prvků na snímku najednou. Můžete nainstalovat různé metody animace, blednutí snímků nebo přechody z určitého směru. Automatické zobrazení a ruční ovládání pomocí navigačních šipek, které vyskočí, když najedete na obrázek. 10 typů efektů animace snímků a mnohem více...

Recenze se ukázala být poměrně obsáhlá, ale kvůli tomu nedostatečně informativní velké množství dotyčné produkty. Všechny podrobnosti a podrobné popisy funkčnost toho či onoho pluginu se dozvíte přímo na stránkách vývojářů. Mohu jen doufat, že jsem někomu usnadnil nalezení onoho velmi potřebného nástroje pro vytváření barevných posuvníků obrázků na stránkách jejich webových stránek.

Napadlo vás někdy, že by bylo hezké umět pracovat s ruskojazyčnými šablonami? Jen o tom chvíli přemýšlejte. Neztrácejte čas prací s anglicky psanými šablonami. Spěcháme vás potěšit, že ji nyní můžete najít na trhu TemplateMonster. Text ke každému z nich byl napsán ručně. A samozřejmě všechna hotová řešení se neuvěřitelně snadno používají.

Se vší úctou, Andrew

Pokud potřebujete na svůj web přidat kvalitní slider obrázků jQuery, pak v tomto článku najdete popis požadované pluginy. I když JQuery značně usnadnil práci s JavaScriptem, stále potřebujeme pluginy, které urychlí proces návrhu webu.

Můžeme provést změny v některých z těchto pluginů a vytvořit nové posuvníky, které jsou mnohem vhodnější pro účely našich stránek.

U ostatních posuvníků jednoduše přidáte názvy, obrázky a vyberete přechodové efekty snímků, které se dodávají s posuvníkem. Všechny tyto pluginy jsou doprovázeny podrobnou dokumentací, takže přidání nových efektů nebo funkcí k nim nebude složité. Pokud jste zkušený programátor JQuery, můžete dokonce změnit spouštěče založené na událostech.

Nejnovější trendy jako responzivní design jsou pro webové projekty velmi důležité, ať už implementujete plugin nebo skript. Všechny tyto prvky činí každý z těchto pluginů velmi flexibilní. V tomto seznamu je zahrnuto vše, co vyšlo v roce 2014.

JQuery image slidery Jssor Responsive Slider

Nedávno jsem narazil na tento výkonný posuvník JQuery a mohl jsem z první ruky vidět, že svou práci dělá velmi dobře. Obsahuje neomezené možnosti, které lze rozšířit pomocí otevřeného zdrojového kódu posuvníku:

  • Adaptivní design;
  • Více než 15 možností přizpůsobení;
  • Více než 15 efektů změny obrazu;
  • Galerie obrázků, karusel, podpora celé obrazovky;
  • Vertikální rotátor bannerů, seznam snímků;
  • Podpora videa.

Demo | Stažení

PgwSlider - responzivní posuvník založený na JQuery / Zepto

Jediným úkolem tohoto pluginu je zobrazovat snímky obrázků. Je velmi kompaktní, protože soubory JQuery mají velikost pouze 2,5 KB, což umožňuje jeho načítání opravdu rychle:

  • Adaptivní uspořádání;
  • SEO optimalizace;
  • Podpora pro různé prohlížeče;
  • Jednoduché přechody obrázků;
  • Velikost archivu je pouze 2,5 kB.

Demo | Stažení

Vertikální jezdec zpráv Jquery

Flexibilní a užitečný posuvník JQuery určený pro zpravodajské zdroje se seznamem publikací na levé straně a obrázkem zobrazeným napravo:

  • Adaptivní design;
  • Vertikální sloupec pro přepínání zpráv;
  • Rozšířená záhlaví.

Demo | Stažení

Wallop Slider

Tento posuvník neobsahuje jQuery, ale rád bych jej představil, protože je velmi kompaktní a může výrazně zkrátit dobu načítání stránky. Dejte mi vědět, jestli se vám líbí:

  • Adaptivní uspořádání;
  • Jednoduchý design;
  • Různé možnosti výměny snímků;
  • Minimální kód JavaScript;
  • Velikost je pouze 3 KB.

Demo | Stažení

Plochá galerie Polaroid

Galerie ve stylu rozsypaných dokumentů na stole s flexibilním uspořádáním a krásným designem by měla zajímat mnoho z vás. Vhodnější pro tablety a velké displeje:

  • Adaptivní posuvník;
  • Design bytu;
  • Náhodná změna snímku;
  • Plný přístup ke zdrojovému kódu.

Demo | Stažení

A-Slider

Demo | Stažení

HiSlider – HTML5, jQuery a posuvník obrázků WordPress

HiSlider představil nový bezplatný posuvný plugin jQuery, pomocí kterého můžete vytvářet různé galerie obrázků s fantastickými přechody:

  • Adaptivní posuvník;
  • Nevyžaduje znalosti programování;
  • Několik úžasných šablon a vzhledů;
  • Krásné přechodové efekty;
  • Podpora různých platforem;
  • Kompatibilní s WordPress, Joomla, Drupal;
  • Schopnost zobrazovat obsah odlišné typy: snímky, YouTube video a videa Vimeo;
  • Flexibilní nastavení;
  • Užitečné doplňkové funkce;
  • Neomezené množství zobrazeného obsahu.

Demo | Stáhnout

Páni posuvník

WOW Slider je citlivý jezdec obrázků jQuery s úžasnými vizuální efekty(domino, rotace, rozmazání, převrácení a blesk, vylétnutí, rolety) a profesionální šablony.

WOW Slider přichází s instalačním průvodcem, který vám umožní vytvořit fantastické posuvníky během několika sekund, aniž byste museli rozumět kódu nebo upravovat obrázky. Verze pluginu pro Joomla a WordPress jsou také k dispozici ke stažení:

  • Plně citlivý;
  • Podporuje všechny prohlížeče a všechny typy zařízení;
  • Podpěra, podpora dotyková zařízení;
  • Snadná instalace na WordPress;
  • Flexibilita v konfiguraci;
  • SEO optimalizováno.

Demo | Stáhnout

Nivo Slider – bezplatný plugin jQuery

Nivo Slider je známý po celém světě jako nejkrásnější a snadno použitelný posuvník obrázků. Plugin Nivo Slider je zdarma a je vydán pod licencí MIT:

  • Vyžaduje JQuery 1.7 a vyšší;
  • Krásné přechodové efekty;
  • Jednoduchá a flexibilní konfigurace;
  • Kompaktní a adaptivní;
  • Open source;
  • Výkonný a jednoduchý;
  • Několik různých šablon;
  • Automatické oříznutí obrázku.

Demo | Stáhnout

Jednoduchý posuvník jQuery s technickou dokumentací

Myšlenka byla inspirována posuvníky Apple, ve kterých může několik malých prvků vylétnout s různými animačními efekty. Vývojáři se snažili tento koncept implementovat s ohledem minimální požadavky pro tvoření jednoduchý design internetový obchod, ve kterém „létající“ prvky představují různé kategorie:

  • Adaptivní uspořádání;
  • minimalistický design;
  • Různé efekty vypadnutí a změny snímku.

Demo | Stáhnout

Posuvník obrázků jQuery v plné velikosti

Velmi jednoduchý posuvník, který zabírá 100 % šířky stránky a přizpůsobí se velikosti obrazovky mobilní zařízení. Pracuje s přechody CSS a obrázky jsou „skládány“ spolu s kotvami. Kotvu lze vyměnit nebo odstranit, pokud nechcete k obrázku připojit odkaz.

Po instalaci se posuvník roztáhne na 100 % šířky obrazovky. Může také automaticky zmenšit velikost snímků snímků:

  • Adaptivní posuvník JQuery;
  • Plná velikost;
  • Minimalistický design.

Demo | Stáhnout

Posuvník elastického obsahu + návod

Posuvník elastického obsahu automaticky upraví šířku a výšku na základě rozměrů nadřazeného prvku. Toto je jednoduchý posuvník jQuery. Skládá se z oblasti snímku v horní části a panelu navigačních karet ve spodní části. Posuvník nastavuje svou šířku a výšku podle rozměrů nadřazeného kontejneru.

Při zobrazení na obrazovkách s malou úhlopříčkou se navigační karty změní na malé ikony:

  • Adaptivní design;
  • Posouvání kliknutím myši.

Demo | Stáhnout

Zdarma 3D Stack Slider

Experimentální posuvník, který posouvá obrázky ve 3D. Tyto dva stohy připomínají stohy papíru, ze kterých se při posouvání zobrazují obrázky uprostřed posuvníku:

  • Adaptivní design;
  • Flip - přechod;
  • 3D efekty.

Demo | Stáhnout

Celoobrazovkový Slit Slider založený na JQuery a CSS3 + tutoriálu

Tento tutoriál vám ukáže, jak vytvořit posuvník s otočením: cílem je „oříznout“ a zobrazit aktuální snímek, když otevřete další nebo předchozí obrázek. Pomocí JQuery a animace CSS můžeme vytvořit jedinečné přechodové efekty:

  • Adaptivní design;
  • Dělený přechod;
  • Posuvník na celou obrazovku.

Demo | Stáhnout

Unislider – velmi malý posuvník jQuery

Žádné zbytečné zvonky a píšťalky, velikost menší než 3 KB. Pro snímky použijte libovolný HTML kód, rozšiřte jej o pomocí CSS. Vše, co souvisí s Unsliderem, je hostováno na GitHubu:

  • Podpora pro různé prohlížeče;
  • podpora klávesnice;
  • Nastavení výšky;
  • Adaptivní design;
  • Podpora dotykového vstupu.

Demo | Stažení

Minimálně citlivé snímky

Jednoduchý a kompaktní plugin (velikost pouze 1 KB), který pomocí prvků uvnitř kontejneru vytváří responzivní posuvník. ResponsiveSLides.js funguje s velké množství prohlížeče, včetně všech verzí IE od IE6 a vyšší:

  • Plně citlivý;
  • Velikost 1 KB;
  • Přechody CSS3 s možností spouštění přes JavaScript;
  • Jednoduché označování pomocí seznamů s odrážkami;
  • Schopnost přizpůsobit přechodové efekty a dobu sledování jednoho snímku;
  • Podporuje schopnost vytvářet více prezentací;
  • Automatické a ruční rolování.

Demo | Stáhnout

Fotoaparát – bezplatný posuvník jQuery

Fotoaparát je plugin s mnoha přechodovými efekty a citlivým rozložením. Snadné nastavení, podporované mobilními zařízeními:

  • Plně citlivý design;
  • Podpisy;
  • Schopnost přidávat videa;
  • 33 různých barevných ikon.

Demo | Stáhnout

SlidesJS, responzivní plugin jQuery

SlidesJS je responzivní plugin pro JQuery (1.7.1 a vyšší) s podporou pro dotyková zařízení a přechody CSS3. Experimentujte s tím, vyzkoušejte několik hotových příkladů, které vám pomohou zjistit, jak přidat SlidesJS do vašeho projektu:

  • Adaptivní design;
  • CSS3 přechody;
  • Podpora pro dotyková zařízení;
  • Snadné nastavení.

Demo | Stažení

BX Jquery Slider

Toto je bezplatný posuvník jQuery:

  • Plně citlivý - přizpůsobí se jakémukoli zařízení;
  • Horizontální, vertikální změna posuvu;
  • Snímky mohou obsahovat obrázky, videa nebo obsah HTML;
  • Rozšířená podpora pro dotyková zařízení;
  • Použití přechodů CSS pro animaci snímků (hardwarová akcelerace);
  • Callback API a plně veřejné metody;
  • Malá velikost souboru;
  • Snadná implementace.

Demo | Stáhnout

FlexSlider 2

Nejlépe reagující posuvník. Nová verze byl upraven pro zvýšení rychlosti a kompaktnosti.

Demo | Stažení

Galleria - JavaScript-založená citlivá fotogalerie

Galleria se používá na milionech webů k vytváření galerií obrázků vysoká kvalita. Počet pozitivních recenzí na její práci je prostě mimo žebříčky:

  • Zcela zdarma;
  • režim zobrazení na celé obrazovce;
  • 100% adaptivní;
  • Nejsou vyžadovány žádné zkušenosti s programováním;
  • Podpora pro iPhone, iPad a další dotyková zařízení;
  • Flickr, Vimeo, YouTube a další;
  • Několik témat.

Demo | Stažení

Blueberry – jednoduchý responzivní posuvník obrázků jQuery

Představuji vám posuvník obrázků jQuery napsaný speciálně pro responzivní web design. Blueberry je experimentální plugin pro posuvník obrázků s otevřeným zdrojovým kódem, který byl napsán speciálně pro práci s responzivními šablonami.

Posuvník se stal velmi populární relativně nedávno. Přibližně polovina všech šablon obsahuje posuvník.

Posuvník je oblast webu (obvykle střední část hned za záhlavím). Jejím cílem je učinit stránky informativnější, „živější“, pokus popsat výhody firmy nebo produktu na několika obrázcích.

Existuje mnoho možností pro vytvoření posuvníku. Podíváme se na několik nejoblíbenějších. Ke každé metodě budou poskytnuty zdroje.

Možnost 1. Posuvník v JQuery (JavaScript)

Toto je fotografie toho, co získáte s touto možností (zdroj s tímto příkladem je níže)

Aby posuvník fungoval, musíte provést následující:

  • Zahrňte javascript (soubory Java) do značek záhlaví
  • Soubor stylu je opět v hlavičkových značkách
  • V místě, kde potřebujete zobrazit posuvník, vyplňte značku (jako v příkladu výše)
Možnost #2. Posuvník založený na CSS

Aby web nezatěžoval zbytečnými skripty, existují skvělá cesta udělat posuvník založený pouze na CSS (tedy čistě na stylech). Podívejme se na příklad.

Příklad č. 1

Příklad č. 2

Příklad č. 3

Tohle by se mělo stát.