JS Images posuvníky. Příklady volných jQuery jezdců pro obrázky

to adaptivní dotek Posuvník napsaný na jquery. V motoru tohoto pluginu se používají animace CSS3, ale zároveň jsou folds poskytovány pro starší verze prohlížečů. Glide.js je jednoduchý a snadný.

Použitím

1. Připojte jquery.

Jediná závislost plug-in je jQuery, kterou musíme připojit především:

2. Připojte Glide.js.

3. Přidejte HTML.

Připojte základní styly.

Roll přes HTML Struktura posuvníku.

4. Inicializace

Spusťte jezdec s výchozím nastavením ...

... nebo naladit to pod sebe

Nastavení

Seznam dostupných parametrů:

Parametr Výchozí hodnota Typ Popis
automatické přehrávání 4000 int / bool. Automatická smlouva (FALSE pro vypnutí)
hoverPauza. skutečný. bool. Pozastavte auto-smlouvu, když se podíváte myš na jezdci
animace. 500 int. !!! Tato volba funguje, pokud prohlížeč nepodporuje CSS3. Pokud je CSS3 podporován prohlížečem, pak tento parametr musí být změněn souborem v.CSS !!!
šipky. skutečný. bool / String. Zobrazit / skrýt / připojit šipky. Je pravdivé zobrazení šipek v nádobce jezdce. Falešné skrýt. Můžete také zadat název třídy (příklad: ".class-name") pro připojení speciálního html kódu
arrowswrapperClass. slider-šipky. tětiva Třída, která přiřadí kontejner s šipkami
arrowmainclass. slider-arrow. tětiva Hlavní třída pro všechny šipky
arrowrightclass. slider-arrow - vpravo tětiva Třída pro pravou šipku
arrowleftclass. slider-arrow - vlevo tětiva Šipka vlevo
arrowrightText. další tětiva Text pro šipku vpravo
arrowlefttext. prever tětiva Vlevo Arrow Text.
nAV. skutečný. bool / String. Zobrazit / skrýt / Připojit navigaci pomocí snímku. True pro zobrazení. False pro Skrýt
navijen. skutečný. bool. Navigace pro Censtles
nAVCLASS. slider-NAV. tětiva Třída pro navigační kontejner
navitemclass. slider-Nav__Item. tětiva Třída pro navigační prvek
navcurrentitemclass. slider-NAV__Item - Aktuální tětiva Třída pro aktuální navigační prvek
klávesnice. skutečný. bool. Po stisknutí tlačítka vlevo / vpravo po stisknutí tlačítka
touchDance. 60 int / bool. Podpora pro dotek (dotek). FALSE Zakázat tuto funkci.
předtím. funkce () () funkce. Sollice, které začnou před inicializací pluginu
audit. funkce () () funkce. Sollars, který se začít po inicializaci pluginu
beforetransition. funkce () () funkce. Skolkk, který začne před posouváním posuvníku
následný funkce () () funkce. Squake, která začne po posouvání posuvníku

API.

Chcete-li použít API, psát klouzání k proměnné.

Var glide \u003d $ (". Posuvník"). Glide (). Data ("api_glide");

Nyní jsou k dispozici metody API.

Glide.jump (3, konzole.log ("wooo!");

  • .Current () - vrátí počet aktuální strany
  • PlayPlay () - Spustit auto-kontraktu
  • .Pause () - Zastavte automatickou smlouvu
  • .Next (callback) - ryby posuvník vpřed
  • .Prev (callback) - posuvník zpět
  • .Jump (vzdálenost, zpětné volání) - Přepněte na konkrétní snímek
  • .NAV (Cíl) - Připojení navigace na konkrétní položku (například: "tělo", ".class", "#Id")
  • .Rrows (cíl) - Připevněte šipky na konkrétní prvek (například: "tělo", ".class", "#Id")

Jednoduchý, lehký (21kb v komprimované formě) jezdec napsaný na čistém Javascriptu, který nemá žádné závislosti, tj. Pracuje bez jquery.

Testováno v následujících prohlížečích:

  • Chrome 26.0.
  • Firefox 20.0.
  • Safari 5.1.7.
  • Tj. 10.
  • Opera 16.0.

Existuje neúplná podpora IE8 / 9 (bez efektů).

Funkce

  • Můžete přidat neomezený počet posuvníků na stránku, dokonce jeden do druhého.
  • Mění velikosti ze závislosti na obsahu, ale je možné zakázat.
  • Navigace klávesnice - Když je kurzor na jezdci, můžete posuvníky přepnout šipky.
  • Podpora mobilních dotykových událostí.

Spojení

Před uzavřenou značkou Musíte se připojit slidr.js. nebo slidr.min.js. soubor.

Značení html.

slidr.js. Může pracovat s jakýmkoliv inline, inline blok, blokové položky, které mají atribut id. Je povoleno používat libovolné dceřiné prvky první úrovně s atributem Data-Slidr, například:

  • jablko
  • banán.
  • kokosový ořech.
jablko
banán.
kokosový ořech.

JavaScript.

Po připojení slidr.js. Globální objekt SLIDR bude k dispozici. Nejjednodušší způsob, jak vytvořit slidr:

Slidr.create ("slidr-id"). Start ();

Volání s úkolem všech nastavení:

Slidr.create ("slidr-id" (po: funkci (e) (console.log ("v:" + e.in.slidr);), před: funkce (e) (console.log ("out:") + E.out.slidr);), strouhanky: pravdivé, ovládací prvky: "roh", směr: "vertikální", fade: false, klávesnice: true, přetečení: true, téma: "# 222", načasování: ("krychle) ":" 0.5s Snadná poloha "), dotek: true, přechod:" krychle "). Start ();

Nastavení

Všechna dostupná nastavení pro slidr.js jsou zobrazeny v tabulce níže.

Parametr Typ Tichý. Popis.
Po funkce. funkce zpětného volání po změně snímku
Před. funkce. funkce zpětného volání před změnou snímku
Strouhanka. bool. nepravdivé Ukažte strouhanky na ovládání diapozitivů. Pravda nebo lež.
Řízení. tětiva okraj. Arrows umístění pro ovládání snímků. Hranice, roh nebo žádný.
SMĚR. tětiva horizontální Výchozí směr pro nové snímky. Horizontální nebo h, vertikální nebo v.
Slábnout bool. skutečný. Povolte efekt stmívání pro změnu snímku (fade-in / out). Pravda nebo lež.
Klávesnice. bool. nepravdivé Zapněte posun sladkostí pomocí klávesnice. Pravda nebo lež.
Přetékat. bool. nepravdivé Umožněte přetečení pro blok s posuvníkem. Pravda nebo lež.
Pauza bool. nepravdivé Nezměnìte snímky automaticky při přechodu myši (musíte spustit Auto ()). Pravda nebo lež.
Téma. tětiva #Fff. Barva ovládací prvky jezdce (chleba drobky a šipky). #Hexcode nebo RGBA (hodnota).
Načasování objekt. {} Vlastní časy animace, které se použijí. ("Přechod": "časování").
Dotek bool. nepravdivé Dotkněte se managementu dotyku na mobilních zařízeních. Pravda nebo lež.
Přechod. tětiva lineární Účinek měnících se snímků. Cube, lineární, fade nebo žádný.

Reverzní volání funkce a před obdržením následujících dat:

(ID: "SLIDR-ID", IN: (EL: # , SLIDR: "Data-Slidr-in", trans: "Přechod-in", DIR: "Směr-in"), OUT: (EL: # , SLIDR: "Data-Slidr-Out", trans: "přechod-out", dir: "směr-out"))

Slider.js globální api.

Globální jmenný prostor SLIDR poskytuje následující funkce:

/ ** * Aktuální verze * @return (String) Major.minor.Patch. * / Funkce verze () (); / ** * Dostupné přechodové efekty. * @Return (pole) přechodů. * / Funkční přechody () (); / ** * vytvoří a vrátí slidr. * Volání této funkce dvakrát na stejném prvku vrátí již vytvořený objekt slidr. * @Param (String) ID prvku pro slidr. * @Param (Object \u003d) Nastavení OPT_SETTING pro posuvník. * / Funkce Vytvořit (ID, OPT_SETTINGS) ();

Posuvník API.

// Slidr inicializace s nastavením VAR S \u003d Slidr.Create ("Slidr-API-Demo", (strouhavka: true, přetečení: true); // přidejte horizontální diapozitivy se standardním přechodovým efektem. // Duplikující prvek pole "Jeden" v koncových vlekech slidr // Posuňte snímky nekonečně S.add ("H", ["One", "dva", "tři", "jeden"]); // přidejte vertikální snímek s přechodovým efektem "krychle". s.add ("v", ["pět", "čtyři", "tři", "pět"], "kostka"); // spustit jezdec. S.start ();

Krátký příspěvek

VAR S \u003d Slidr.Create ("Slidr-API-DEMO" ("Slidr-API-DEMO", (strilcrumbs: true, přetečení: true)). Přidat ("H", ["One", "dva", "tři", "jeden"]) .add ("v", ["pět", "čtyři", "tři", "pět"], "kostka") .start ();

Plný seznam funkcí Slidr.js API je uveden níže.

/ ** * Spusťte slidr! * Automaticky najde snímky k vytvoření, pokud nebylo před zahájením volání přidáno nic. * @Param (String) Opt_start `Data-Slidr` ID pro spuštění. * @Return (toto) * / funkce funkce (OPT_START) (); / ** * Zkontrolujte, zda můžeme sklouznout. * @Param (řetězec) Další směr ("up", "dolů", "vlevo", "vpravo") nebo `data-slidr` id. * @Return (Boolean) * / Funkce Cancelide (další) (); / ** * Snímek! * @Param (řetězec) Další směr ("up", "dolů", "vlevo", "vpravo") nebo `data-slidr` id. * @return (toto) * / funkční snímek (dále); / ** * Přidá sadu snímků. * @Param (řetězec) směr `horizontální || H` nebo `vertikální || v ". * @Param (Array) IDS Seznam `Data-Slidr` ID" S přidat do Slidr. Slides musí být přímé děti Slidr. * @Param (String \u003d) OPT_TRANSITION přechod pro použití mezi snímky nebo použití Výchozí hodnota. Pokročilost na další snímek po určitém časovém limitu. Hovory Start (), pokud nejsou již volány. * @Param (INT \u003d) OPT_MSEC Počet milionů mezi každým přechodem snímku. Výchozí hodnota 5000 (5 sekund). * @Param (String \u003d ) OPT_DIREKCE "UP", "DOWN", "LEFT", nebo "RIGHT". Výchozí hodnoty "vpravo". Zavolal na Startr). * @Return (toto) * / Funkce AUTO (OPT_MSEC, OPT_DIREKCE, OPT_START) (); / ** * Zastavení automatického přechodu, pokud je zapnuta. * @Return (toto) * / Funkce Stop () (); / ** * Nastavte vlastní časy animace. * @Param (String | Objekt) Přechod Jméno přechodu (tj. "Cube") nebo A ("Přechod": "časování"). * @Param (String \u003d) OPT_TIMING Nové časování animace (tj. 0.5s Snadno-in "). Není nutné, pokud je přechod předmětem. * @Return (toto) * / časování funkce (přechod, opt_timing) (); / ** * Přepnout strouhanku. * @return (toto) * / funkce strouhadla () (); / ** * Přepněte ovládací prvky. * @param (String \u003d) OPT_SCHEME Přepněte OPT_SCHEME TOGLE ZAPNUTO / OFF Pokud není přítomen, jinak změnit rozvržení. "Hranice", `Corner` nebo" none ". * @Return (toto) * / ovládací prvky funkce (OPT_SCHEME) ();

Posouvání stránky během výměny snímků

Tato nepříjemná chyba se zobrazí v některých prohlížečích. Opravit. Musíte přidat styl do těla:

Tělo (přetečení: skrytý;)

Změna dynamické velikosti

Slidr sám "chápe", zda změnit velikost posuvníku pod obrázkem. Pokud je zadán bloku posuvníku, Slidr je automaticky nezmění. Pokud jsou zadány vlastnosti min-šířky a min-výšku, posuvník změní velikost pod obsahem, vzhledem k těmto hodnotám. V opačném případě bude definice velikosti automaticky.

Automatická změna velikosti

dobrý.
nádherný.
neuvěřitelný

Statické rozměry

dobrý.
nádherný.
neuvěřitelný

Řídicí prvky slidr.

Označení ovládacích prvků následující:

Můžete přizpůsobit libovolný prvek ovládání jezdce pomocí voličů CSS:

Stranou .slidr-control.right (šířka: 50px! Důležité; výška: 50px! Důležité; nahoru: 50%! Důležité; marže-top: -25px! Důležité; vpravo: -25px! : URL ("/ statické / obrázky / arrow_right.png") 14px 13px ne-repeat black; opacity: 0,4;) stranou .slidr-control.right: vznášet se (opacita: 1;)

Ovládání "arrow" je implementováno pomocí pseudo selektoru: Po, tak jej skrýt, použijte následující kód:

// skrýt jednu šipku v jednom regulátoru. Stranou .slidr-Control.right: Po (hraniční barvu: transparentní! Důležité;) // Skrýt všechny šipky v jednom regulátoru. Stranou .slidr-Control: Po (hranice Barva: transparentní! Důležité;) // skryjete všechny šipky Slidr. Stranou .slidr-ovládání: po (hraniční barvu: transparentní! Důležité;)

Chleba drobky slidr.

Chlébní drobky mají jednoduchý HTML Markup. Každý Ul označuje celý řetězec a každý Li Samostatný chlebník:

Stylizace drobků chleba s CSS:

// přizpůsobit pozici, velikost, barvu hranice a barvu pozadí. Stranou (vpravo: 50%! Důležité; marže-vpravo: -41px! Důležité;) stranou .slidr-strillcrumbs Li (šířka: 15px! Důležité; výška: 15px! Důležité; marže: 3PX! DŮLEŽITÉ;) stranou. Li.Normal (Barva hranic: bílá! Důležité;) stranou .slidr-strillcrumbs Li.activeve (barva pozadí: černá! Důležité;)

Licence

Tento software může volně používat pod licencí MIT.

Potřebujete jednoduchý posuvník s automatickým rolováním. Přinést ...

Popis práce jezdce.

Snímky budou zabudovány v souladu a po určité době bude posouván.

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

Na konci jezdce musíte duplikovat první snímek. Je nutné zajistit rolování ze třetího snímku do první. Musíte také přidat poslední snímek na začátek pro možnost rolování v opačném směru od prvního snímku na třetí. Níže je uveden dílo posuvníku v dopředném směru.

Když jezdec končí, jeho kopie od začátku posuvníku je okamžitě umístěna v místě posledního snímku. Cyklus se pak opakuje znovu. To vytváří iluzi nekonečného posuvníku.

Značení html.

Chcete-li začít, vytvoříme jednoduchý posuvník s automatickým rolováním. Pro svou práci potřebujete dva kontejnery. První z nich nastaví velikost viditelné oblasti posuvníku a druhá je zapotřebí pro uložení posuvníků v něm. Značka posuvníku bude mít následující formulář:

> >

Styly Slider.

.Slider-box (šířka: 320px; výška: 210px; přetečení: skryté;) .slider (poloha: relativní; šířka: 10000px; výška: 210px;) .Slider img (float: vlevo; z-index: 0;)

Kontejner.Slider-Box Nastaví rozměry posuvníku. Pomocí přetečení: Skrytá vlastnost, všechny prvky jsou skryty, které nejsou zahrnuty do oblasti uvnitř prvku.

Pro kontejner. Posuvník je nastaven na velkou šířku. Je nutné, aby se veškeré diapozitivy zapadly do ní.

Slides jsou zarovnány s plovákem: levý majetek.

Níže je uveden schematický umístění posuvných bloků.

Skript

Posuvný pohyb se provádí pomocí hladké změny vlastnosti levého okraje kontejneru. Posuvník.

$ (Funkce () (var width \u003d $ (".". Slider-box ") .width (); // Šířka jezdce. Interval \u003d 4000; // Interval změny snímku. $ (". Posuvník img: poslední") .Clone () .Prependto (".slider"); // Kopie posledního snímku je umístěna na začátku. $ () .eq (1) .Clone () .appendto (".slider"); // Kopie prvního snímku je umístěna na konci. // Kontejner. Posuvní posuny vlevo na šířku jednoho snímku. setInterval ("animace ()", interval); // Funkce animace () se spustí provádění posunu posunu. )); Funkce animace () (var marže \u003d parseint ($ (". Posuvník") .css ("marginleft"); // Aktuální blok ofset.slider šířka \u003d $ (".". Slider-box ") .width () // Šířka jezdce. Slidersamount \u003d $ (". Posuvník") .Children (). // počet diapozitivů v jezdci. Pokud (okraj! \u003d (- Šířka * (Slidersamount- 1))) // Pokud aktuální snímek není poslední, (marže \u003d šířka okrajů; // Hodnota marže klesá na šířku snímku. ) Jinak ( // Pokud je zobrazen poslední snímek, $ (". Posuvník") .css ("marže vlevo", šířka); // pak blok.Slider se vrací do počáteční polohy, marže \u003d - šířka * 2; ) $ (".". Posuvník ") .animate ((marginleft: marže), 1000); // Block.Slider Posunutí vlevo na 1 snímek. } ;

V důsledku toho se ukázalo jednoduchý posuvník s nekonečným automatickým rolováním.

Čas nemá s ním a pokrok. To ovlivnilo rozlohy internetu. Již vidíte, jak se vzhled stránek mění, adaptivní design je obzvláště populární. A v této souvislosti nebyly žádné nové nové Adaptivní jquery jezdce, galerie, karusely nebo podobné plug-iny.
1. Reagující horizontální slend posuvník

Adaptivní horizontální karusel s podrobnými pokyny pro instalaci. To se provádí v jednoduchém stylu, ale můžete ji stylizovat pod sebe.

2. Posuvník na glide.js

Tento posuvník je vhodný pro všechny místo. Používá glide.js s otevřeným zdrojem. Barvy posuvníku lze snadno změnit.

3. Slideshow

Adaptivní jezdec s obsahem. Vrcholem tohoto posuvníku je 3D obrazový efekt, stejně jako různé animace vzhledu v náhodném pořadí.

4. Posuvník pomocí HTML5 Canvas

Velmi krásný a působivý posuvník s interaktivními částicemi. Provádí se pomocí HTML5 plátno,

5. Posuvník "Morphing Images"

Posuvník s účinkem morfování (hladká transformace z jednoho předmětu do druhého). V tomto příkladu je posuvník vhodný pro portfolio webového vývojáře nebo webové studio ve formě portfolia.

6. Kruhový jezdec

Posuvník ve formě kruhu s účinkem obrazového převratu.

7. Posuvník s rozmazané pozadí

Adaptivní jezdec s přepínáním a rozmazání zadního pozadí.

8. Adaptivní módní posuvník

Jednoduchý, lehký a adaptivní jezdec pro web.

9. SLICEBOX - JQuery 3D Image Posuvník (Aktualizováno)

Aktualizováno SLICEBOX Slider verze s opravami a novými funkcemi.

10.Free animované citlivé obrazové mřížky

JQuery plugin vytvořit flexibilní obrazovou mřížku, která přepíná obrázky pomocí různých animací a časování. To může vypadat dobře jako pozadí nebo dekorativní prvek na místě, protože můžeme přizpůsobit selektivní vzhled nových snímků a jejich přechodů. Plugin je vyroben v několika verzích.

11. Flexslider.

Univerzální plugin zdarma pro vaše stránky. Tento plugin je vyroben v několika variantách posuvníku a kolotočů.

12. Fotorama

Fotorama.- Jedná se o univerzální plugin. Má mnoho nastavení, vše funguje rychle a snadno, je možné zobrazit snímky na celou obrazovku. Posuvník lze použít jak v pevné velikosti a adaptivní, s miniaturami a bez kruhového rolování a bez cokoliv jiného.

P.S.Dejte posuvník několikrát a věřte, že je jedním z nejlepších

13. Zdarma a adaptivní 3D galerie-posuvník s miniatury.

Experimentální galerie-posuvník 3DPancellayout. S grid a zajímavé animační účinky.

14. Posuvník na CSS3

Adaptivní posuvník se provádí pomocí CSS3 s hladkým vzhledem obsahu a světelné animace.

15. Wow jezdec.

Wow jezdec.- Jedná se o jezdec snímků s ohromujícími vizuálními efekty.

17. Elastic.

Elastický posuvník s plnou adaptability a miniatury diapozitivy.

18. Slite.

Jedná se o celoobrazový adaptivní jezdec pomocí animace CSS3. Posuvník se provádí ve dvou verzích. Animace je zcela neobvykle a krásná.

19. Adaptivní Plus Fotogalerie

Jednoduchý volný posuvník galerie s obrázkem diagramu.

20. Adaptivní jezdec pro WordPress

Adaptivní volný posuvník pro WP.

21. Paralaxační obsah jezdec

Posuvník s účinkem paralaxy a řízení každého prvku pomocí CSS3.

22. Posuvník s vazbou hudby

Posuvník pomocí open source Code JPlayer. Tento posuvník se podobá prezentaci s hudbou.

23. Posuvník s Jmpress.js

Adaptivní jezdec je založen na Jmpress.js, a proto vám umožní použít některé zajímavé 3D efekty na snímky.

24. Rychlý slideshow

Prezentace s rychlým spínacím skluzavkami. Sklouzne spínače, když se vznáší kurzor.

25. Obrazový akordeon s CSS3

Akordeon snímků s CSS3.

26. Dotykový plugin optimalizovaný galerie

Jedná se o adaptivní galerii, která je optimalizována pro dotykové zařízení.

27. 3D galerie

3D wall galerie.- Vytvořeno pro prohlížeč Safari, kde je viditelný 3D efekt. Pokud se podíváte na jiný prohlížeč, funkce bude v pořádku, ale nebude viditelná pro 3D efekt.

28. Posuvník s pagination

Adaptivní číslo stránky Posuvník pomocí JQuery UI jezdec. Myšlenka je použít jednoduchou navigační koncept. Je možné převinout všechny obrázky nebo poštovní spínání.

29.Image montáž s jQuery

Automatické umístění obrázku v závislosti na šířce obrazovky. Velmi užitečná věc při vývoji portfolia.

30. 3D galerie.

Jednoduchý 3D kruhový posuvník CSS3 a jQuery.

31. Režim Celotrysku s 3D efektem na CSS3 a jQuery

Posuvník s možností zobrazení obrazu s krásným přechodem.

Od autora: Navzdory pověsti o údajné "smrt" webových stránek viditelných bez rolování, potřeba dobrého posuvníku nikam zmizelo. Buďme upřímní, přinejmenším pro sekundu - posuvníky jsou zábavné. Navíc nic jiného na rozdíl od pohyblivého obsahu nezpůsobuje účinek účinku "WAU". Všechny posuvníky jsou sada několika snímků, které se navzájem mění a je nezbytné, aby byl posuvník co nejjednodušší. To je v takových případech, že nám to bude pomáhat jQuery.

Podívejte se na 20 jquery posuvníky z webových stránek na trhu Ensitato a pochopíte, že existují posuvníky, které jsou více než jen blok s hladce nahrazujícími obrazy.

1. ROYALSLIDER - Galerie obrazu dotykové obrazovky na jQuery

Nyní je adaptivní posuvník také přátelský dotýkat obrazovek, to znamená mnohem více než dříve. ROYLASLIDER kombinuje obě funkce: přizpůsobivost a práce s dotykovými obrazovkami. Dobrá volba, protože galerie je napsána na HTML5 a CSS3.

Několik zajímavých vlastností:

JavaScript. Rychlý start

SEO Optimalizace

Vysoká přizpůsobitelnost

Více než 10 počátečních šablon

Existuje folback pro CSS3 přechody

Podle mého názoru je nejchladnější funkce "modulární architektura skriptů", která umožňuje odpojit zbytečné věci z hlavního souboru JS, čímž se sníží hmotnost. ROYLASLIDER, GALERIE AGALERIE DISPLOKŮ NA JQUAGE - Spolehlivý JavaScript jezdec, který by měl doplnit soubor nástrojů jakéhokoliv developera.

2. Posuvník Revolution Adaptive JQuery plugin

Není tak snadné udělat něco "revolučního" s posuvníkem. Pokud jde o diapozitivy, můžete v nich přidat tolik funkcí. Posuvník revoluce je však opravdu dobrý pokus. Mezi jQuery jezdci tato instance splňuje všechny možné požadavky.

Seznam posuvných funkcí je tak velký, takže budu zobrazit pouze nejlépe:

Pararallax efekt a vlastní animace

Neomezený počet vrstev a diapozitivů s odkazy

připraven k použití, hluboké vlastní styly

a mnohem víc

Schopnost přidat vložený video přehrávač a odkazy ze sociálních sítí činí posuvníkovou revoluci jednou z nejpohatnějších a přizpůsobitelných možností v síti.

3. LayerSlider Adaptive JQuery Plugin jezdec

Podle názvu "LayerSlider Adaptive Jquery Plugin Slider" nemůže skutečně vyhodnotit tento jezdec.
200+ 2d a 3D přechody mezi diapozitivy s nimi loděmi loděmi.

Pár pozoruhodných funkcí:

13 Skiny a 3 typy menu

Schopnost umístit pevný obraz přes jezdec

A JQuery Fallbek

A mnohem víc

Stejně jako u předchozího jezdce můžete přidat téměř jakýkoliv obsah, dokonce i Multimediální obsah HTML5 rezidenta. LayerSlider oživuje posuvníky, kromě toho je to velmi krásné.

4. JQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow je docela jednoduchý posuvník, který neobětuje hlavní funkčnost.

Možnosti:

Tulty, textové vložky atd.

Náhledy a různé možnosti pro zobrazování komponent

Časovače se zpožděním jednoho posuvníku nebo všechny

Více přechodů všech snímků nebo různých přechodů pro každou odděleně

jQuery Banner Rotator / Slideshow ve srovnání s ostatními posuvníky JQuery má pouze základní schopnosti, ale nezapomeňte na to.

5. Vše v jednom posuvníku - adaptivní jQuery jezdec plugin

Jakýkoliv jezdec objevující se v síti má vlastní jedinečnou vizi a řeší všechny problémy ve svém oboru. Ale prostě to ne. Vše v jednom posuvníku lze nazvat "all inclusive".

Myslím, že většina webových vývojářů a návrhářů má osvědčené řešení, ale vždy hledají něco nového. A toto "něco nového" zahrnuje:

Rotátorové bannery

Banner s náhledem

Banner s playlistem

Slider obsahu

Kolotoč

Všechny typy posuvníků podporují většinu funkčnosti, pokud ne vše, co je potřeba jQuery posuvníky. Vše v jednom posuvníku se stanou vaším "all inclusive"?

6. Unoslider - Adaptive Dotykový jezdec

Pokud je posuvník adaptivní a nepodporuje dotykové obrazovky, máte nesprávný posuvník. Unoslider je ten správný.

Tento posuvník našel místo pod sluncem mezi jednoduchostí a bohatou sadou funkcí. Funkce:

Podpora tématu

12 hotových témat

40 přechodů

Podpora podpory IE6 +

Všechny funkce s zaujatostí v designu a stylu, který dělá Unoslider vynikající jezdec obsahu s možností přidávání témat.

7. Master Posuvník - JQuery Dotykový jezdec

Hledáte "jeden jquery jezdec vládnout všem"? Vyzkoušejte hlavní posuvník - JQuery TouchScreen jezdec pro různé velikosti obrazovek ...

Pokud jde o dobrý design, je tato instance jedním z nejlepších:

Více než 25 šablon

Přechody zrychlení hardwaru

Podpora dotek a Svaypov

A mnohem víc

Interaktivní přechody, animované vrstvy a hotspoty budou určitě přitahovat vaši pozornost. Master jezdec - kresby.

8. TouchCarousel - JQuery Content Scroller a jezdec

TouchCarousel přitahuje bezplatnou podporu a aktualizace. To však není všechny funkce tohoto lehkého jquery jezdec typu kolotoč.

Pokud je slovo "dotek" přítomen v názvu, můžete hádat, že jezdec je plně adaptentní a podporuje dotek. Další funkce:

SEO Optimalizace

Smart Avto Hrát

Přechody akcelerace hardwaru CSS3

Přizpůsobitelné UI a 4 Skiny pro Photoshop

TouchCarousel Vzhledem k jeho jedinečným fyzickým posuvným posouvacím skluzavce Jedná se o zcela novou úroveň pocitů na mobilních zařízeních.

9. Pokročilý posuvník - JQuery XML jezdec

jQuery Siders lze použít nejen na stránkách. Mohou také přijít v ruce ve webových aplikacích. Pokročilý posuvník vám to umožňuje.

S Markupem HTML nebo XML má tento pokročilý posuvník nesmazatelný dojem:

Animované vrstvy a inteligentní video

100+ přechody a 150+ vlastní vlastnosti

15 Skins pro jezdec, 7 Skins pro posuvník a vestavěný podpůrný lightbox

Navigace s klávesnicí, podpora pro dotykové a úplné přizpůsobitelnosti

A mnohem víc

Nejlepší funkcí je však pokročilý posuvník - JQuery XML Slider API, což je posuvný perfektní možnosti pro vaši webovou aplikaci.

10. JQuery Posuvník Zoom in / out efekt plně reagující

Jeden z těch jQuery jezdců, které vás uvidí demo, než začnete čtení o svých schopnostech. Jen chcete pochopit, co znamená "přiblížit efekt".

Účinek zoomu je spíše slabý, ale dodává smysl pro kontrolu a současný dotek obrazu, zatímco zbývající statický posuvník. Zvláštnosti posuvníku:

CSS3 přechody mezi vrstvami

Parametr end animace pro vrstvy

Možnosti pevné šířky, celá obrazovka a celá šířka

Animovaný text s formátováním HTML a CSS

Většina posuvníků se snaží představit co nejvíce účinků, jak je to možné, a v jquery jezdec zoom in / out efekt plně reagujícím existuje pouze účinek popálenin Ken, ale dobře implementován.

11. JQuery Carousel Evolution

Stejně jako u výše uvedeném posuvníku - JQuery XML jezdec, JQuery Carousel Evolution má své vlastní API, které lze použít k posílení funkčnosti nebo integrace posuvníku v jiném projektu.

JavaScript. Rychlý start

Prozkoumejte základy JavaScriptu na praktický příklad vytvoření webové aplikace

S obrázky, HTML Markup, YouTube a Vimeo video budete také dostat:

SEO Optimalizace

9 Styly karuselu

Účinky stínu a odrazu

Velikost obrazu lze konfigurovat jako přední a zadní

jQuery Carousel Evolution je jednoduchý kolotoč s mnoha možnostmi použití.

12. Sexy jezdec.

Sexy jezdec není tak sexy jako dříve. Vzhledem ke svému věku však tento jezdec si zaslouží důvěru.

Na první pohled není posuvník příliš působivý, ale pokud je dobře konfigurován, bude dokonale zapadnout do vašeho návrhu. Možnosti:

Snímek Auto hráče

Podpisy pro obrázky

Nepřetržité přehrávání snímků

6 přechodových efektů

Sexy jezdec čeká, abyste otevřeli celou svou moc a odhalil potenciál.

13. JQuery Image & Content Scroll w / lightbox

Se všemi těmito návrhy pro mobilní zařízení a podporující smyslové obrazovky, je hezké vidět jquery jezdec, který nezapomněl na stolní počítače.

jQuery Image & Content Scroll w / lightbox podporuje vstup z klávesnice a kolečka myši, stejně jako jiné funkce:

Horizontální a vertikální orientace

Textové podpisy uvnitř nebo mimo jezdec

Schopnost nastavit určitý počet použitelných snímků

Vestavěné obrázky, Flash, Iframe, Ajax a inline obsah

Také v jezdci je vestavěný lightbox. Volitelně nelze spustit Slider sám v JQuery Image & Content Scroller W / Lightbox, ale odděleně spustit Lightbox.

14. Průhledné - adaptivní rotátorové bannery / jezdec

Většina posuvníků jquery má svůj vlastní design. Můžete jej nakonfigurovat pro sebe, ale někdy chcete všechno uvnitř jezdce. Průsvitný je předložen vaší pozornosti.

V jezdci je spousta předvolen. Můžete jen potřebovat nastavit určitá nastavení a to je. Možnosti:

6 různých stylů

4 Účinek přechodů

2 Přechody Swatch.

Přizpůsobitelná tlačítka a podpisy

Stejně jako ostatní, tento jezdec podporuje dotek, adaptivní a má hardwarovou akceleraci. Transule je posuvník s minimálním designem, který obsah sám staví na hlavu rohu.

15. FSS - plugin s posuvnými stránkami na celou obrazovku

Chcete vytvořit celoobrazovkovou stránku skládající se ze snímků? Pak potřebujete FSS.

Ve skutečnosti, použití tohoto jQuery jezdec je velmi snadné vytvořit posuvník celého obrazovky. Možnosti:

Podpora Ajax

Posuvník

Podpora technologie spojování

2 jiný přechodový efekt

Stojí za to platit za podporu klávesnice a 11 průvodců stránky. Současný dojem však způsobuje hmotnost FSS, pouze 5 kb.

16. Zozo akordeon - adaptivní dotykový posuvník

Dalším příkladem jquery jezdec se zaměřil na styly a kdo se dobře vyrovnává s jejich prací. Zozo akordeon vyžaduje ty, kteří hledají dobrý posuvník s možností změny stylů.

Tato krása s animací CSS3 má také poměrně širokou škálu funkcí:

Horizontální a vertikální akordeon

Sémantická optimalizace HTML5 a SEO

Podpora dotek, klávesnice a Wai-Aria

Více než 10 Skins a 6 rozvržení

A mnohem víc

Zozo akordeon má bezplatnou podporu a neustálé aktualizace, stejně jako všechny funkce, které chcete vidět v jquery akordeon.

17. JQuery Reagate Onebyone Posuvný plugin

jQuery Reagate Onebyone Posuvník plugin vypadá spíše jako jednoduchá animace, ne jezdec. Namísto zobrazení jednoho snímku najednou, tato instance krok za krokem vyplní obrazovku s diapozitivy, zatímco v oblasti není místo, a pak přejde na další snímek.

CSS3 animace funguje od společnosti Animace.css, je lehký, skládá se z několika vrstev a přátelských s mobilními zařízeními. Několik funkcí:

K dispozici je také navigační volba pomocí přetažení. JQuery Responsive Onebyone Posuvník plugin pracuje na bázi Twitter Bootstrap kolotoč.

18. Hordonza - Jquery plugin

Pro tohle není pro to snadnější posuvník jquery. Chcete-li pracovat, musíte si stáhnout celkový 3kb posuvník, což činí Accordronza nejvíce lehkým posuvným posuvníkem.

Pokud jste neměli rádi tři styly, můžete opravit HTML a CSS sami. Možnosti:

Navigace s klávesnicí

Snadné efekty a tlačítka

Progresivní zlepšování technika - funguje bez JavaScriptu

Nezapomeňte, že akordeonza může zobrazit mnoho možností zábavného obsahu, což je extrémně flexibilní.

19. Měřitel - adaptivní víceúčelový posuvník

Měřítko je opravdu mocný jezdec. Lze jej použít nejen jako jednoduchý posuvník obrázků, ale také jako celoobrazovkový jednosměrný posuvník s navigací prostřednictvím položek menu. S ním můžete provést vynikající místo jedné stránky.

Pod kapotou najdete mnoho možností:

Klávesnice, myš a dotykové podpory

Přechody akcelerace hardwaru CSS3

Čistá platná značka a SEO optimalizace

Neomezené číslo snímku, vrstvy pro podpisy a efekty

API je velmi silný a přátelský pro vývojáře, který otevírá různé způsoby, jak jej používat. Měřitel je vynikající progresivní jquery jezdec s čistým a dobře komentovaným kódem.

20. Paralaxační posuvník - adaptivní jQuery plugin

Slidenční posuvník ParalLaxe funguje jako jQuery reagující onebyeone posuvník plugin a umožňuje animovat každou vrstvu samostatně uvnitř jednoho snímku. Můžete animovat všechny snímky nebo dokonce pouze jeden přidáním animace pararallaxu.

Souprava obsahuje 4 posuvníky různých typů, vše s efektem paralaxu. Stejně jako ostatní jezdci jquery, to má:

Plná přizpůsobitelnost

Dotkněte se podpory

Plně adapiten, neomezený počet vrstev

Automatické přehrávání, smyčky, nastavení výšky a šířky, stejně jako časovač

Animované vrstvy nejsou pouze textem nebo obrázky. Můžete také přidat video YouTube, Vimeo a HTML5 video. Dalším dobrým příkladem toho, jak můžete napodobovat zábleskové efekty ještě lépe než samotný záblesk, který je také podporován na všech zařízeních.

Závěr

Je zvědavá pozorovat, jak jquery posuvníky vyrostly z něčeho, co jednoduše nahrazuje jeden obraz ostatním v obrovské sadě kreativních nástrojů. Nyní je 3D, pararallaxové posuvníky, posuvníky pro celou stránku, adaptivní a ty, které lze zobrazit jak na stolních počítačích, tak na smartphony.

Pokud jste se nelíbili žádný posuvník z tohoto seznamu, můžete vždy projít výukou jQuery Code Tutorial lekce na webových stránkách Endato a rozvíjet něco zcela nového a jedinečného.

No, nebo si prohlédnout další posuvníky na trhu Entathato - Existuje z toho, co si vybrat. A jaký je váš oblíbený posuvný jquery a proč?

Podobné články