5 Obrázek zdarma Srovnání Slider Skripty

Překryvné posuvníky vám umožňují porovnávat dva obrazy, obvykle předcházející, s dvěma obrázky na sobě. Posuvník, s nímž lze manipulovat, může uživatel přetáhnout, aby se zobrazil menší obrázek předcházejícího obrázku a další obraz po něm a naopak.

Je to ideální způsob pro některé scénáře, jako je sledování krutých účinků atmosféry Marsu nebo změna městských krajin v průběhu půlstoletí..

Pro designéry je to také skvělý způsob, jak přemýšlet o množství změn, které technika nebo přístup má na původním snímku. Pro porovnání lze použít různé JS knihovny. Tady je 5 z nich.

Twentytwenty

Twentytwenty je vizuální nástroj, který usnadňuje zaznamenávání rozdílů mezi dvěma obrazy. Tento nástroj využívající jQuery a jquery.event.move k práci. Je to velmi snadné, stačí naskládat dva obrázky do kontejneru a pak zavolat twentytwenty (); pro kontejner.

Pak:

 $ ("# container"). twentytwenty (); 

Twentytwenty reaguje a pracuje pro všechna zařízení a pokud používáte nadaci Foundation, bude to fungovat po vybalení z krabice.

Juxtapose

Juxtapose Pomůže vám porovnat dva kusy médií (fotografie nebo GIF) a usnadnit tak zvýraznění změny mezi obrázky v průběhu času. Tento plugin je snadno ovladatelný a funguje na všech zařízeních. Stačí zadat dva obrázky a pak zavolat plugin s dostupnými možnostmi.

V možnostech můžete nastavit výchozí polohu jezdce, nastavit ji svisle nebo vodorovně, přidat popisek a kredit, animaci a další.

Vyzkoušejte demo níže:

imgSlider

imgSlider je jednoduchý jQuery plugin, aby se obrázek srovnání slider. Použití je jednoduché a snadné: po zahrnutí jeho JS a CSS, zabalte obrázky v div s vlevo, odjet třídy pro před obrázek a že jo třídy pro po obrázek aktivujte voláním .posuvník ();. Možnosti pluginu zahrnují nastavení počáteční polohy jezdce a přidání / zobrazení instrukcí na posuvníku.

Zavolat plugin:

 $ ('. slider'). 

Cocoen

Cocoen umožňuje kontakt s použitím události jQuery-Touch. Snadno se aplikuje díky struktuře HTML, která je podobná struktuře Twentytwenty zapojit. Kromě zásobníku jQuery je třeba vedle tohoto pluginu zahrnout knihovnu událostí jQuery Touch Event.

 
   
 $ (document) .ready (function () $ ('. cocoen'). cocoen (););

Vyzkoušejte demo níže:

Porovnání obrázků Posuvník

CodyHouse provedl demo na posuvník obrázků s CSS3, jQuery a některé skripty pro zpracování události drag a přidání mobilní podpory. Zde můžete sledovat úplné vysvětlení a pokyny k použití tohoto pluginu a podívat se na demo zde.

Vyzkoušejte demo níže:

Zde jsou 3 další:

Cato - Ostatní pluginy vyžadují závislost jQuery, ale Cato nevyžaduje žádnou závislost na práci, což z něj činí lehčí knihovnu pro posuvníky obrázků. Použití je jednoduché, stačí zahrnout knihovnu CSS a JS společnosti Cato a sledovat její strukturu HTML.

K dispozici jsou možnosti, které lze použít na posuvníku, včetně přidání popisku, změny směru posuvníku, dokonce přidání efektu filtru, jako je sépie a stupně šedi. Měli byste však poznamenat, že v současné době má Cato podporu pouze pro WebKit.

Před Po - To je lehké, plně citlivé a pracuje na jakémkoli rozložení a velikosti. Můžete vidět živé dema na Codepen.

Posuvník pro porovnávání videa HTML5 - Když se jiní vývojáři pokoušejí vytvořit srovnávač obrázků, pak Dudley Storey použije posuvník na video. Chcete-li pracovat, využije jQuery a jen pár řádků kódu. Podívejte se na demo na Codepen a podívejte se na akci.