5 Brezplačna primerjava slik Slider Scripts

Prekrivni drsniki vam omogočajo primerjave med dvema slikama, običajno pred posnetkom, z dvema slikama, ki sta nameščeni drug na drugega. Uporabnik lahko drsnik, ki ga lahko upravljate, povlečete tako, da prikaže manj slike pred in še več za sliko, ki sledi, in obratno.

To je odličen način za nekatere scenarije, kot so gledanje ostrih vplivov Marsovega ozračja ali spreminjanje krajin v mestu čez pol stoletja..

Za oblikovalce je tudi odličen način za premislek o količini sprememb, ki jih ima tehnika ali pristop na izvirni sliki. Obstajajo različne knjižnice JS, ki jih lahko uporabite za primerjavo. Tu je 5 od njih.

Dvajset dvajset

Dvajset dvajset je vizualno orodje, ki olajša zapisovanje razlik med dvema slikama. To orodje uporablja jQuery in jquery.event.move za delo. To je zelo enostaven za uporabo, samo stack dveh slik v posodo, nato pokličite twentytwenty (); za posodo.

Nato:

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

Twentytwenty se odziva in deluje za vse naprave, in če uporabljate okvir Fundacije, bo to delovalo izven polja.

Juxtapose

Juxtapose vam pomaga primerjati dva dela medijev (fotografije ali GIF) in vam olajšati, da skozi čas označite spremembo med slikami. Ta vtičnik je enostaven za uporabo in deluje na vseh napravah. Samo podajte dve sliki in nato pokličite vtičnik z razpoložljivimi možnostmi.

Pri možnostih lahko nastavite začetni položaj drsnika, ga nastavite navpično ali vodoravno, dodate oznako in kredit, animacijo in še več.

Poskusite spodnjo predstavitev:

imgSlider

imgSlider je preprost jQuery plugin, ki omogoča drsnik za primerjavo slik. Uporaba je preprosta in enostavna: po vključitvi JS in CSS, zavijte slike v div z levo za razred prej sliko in prav za razred po nato aktivirajte s klicem .drsnik ();. Možnosti vtičnika vključujejo nastavitev začetnega položaja drsnika in dodajanje / prikazovanje navodil na drsniku.

Pokličite vtičnik:

 $ ('. slider'). drsnik (); 

Cocoen

Cocoen omogoča dotik z uporabo dogodka jQuery-Touch. Uporabite jo lahko zaradi strukture HTML, podobne strukturi Dvajset dvajset vključiti. Poleg skripta v skriptu morate poleg jQuery vključiti tudi knjižnico dogodkov jQuery Touch..

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

Poskusite spodnjo predstavitev:

Drsnik za primerjavo slik

CodyHouse je naredil predstavitev drsnika za primerjavo slik s CSS3, jQuery in nekaterimi skripti, ki so se ukvarjali z dogodkom vlečenja in dodali mobilno podporo. Tu lahko sledite celotni razlagi in navodilom za uporabo tega vtičnika in si oglejte predstavitev tukaj.

Poskusite spodnjo predstavitev:

Tu so še 3:

Cato - Drugi vtičniki potrebujejo jQuery kot odvisnost, vendar Cato ne zahteva odvisnosti od dela, zaradi česar je bolj lahka knjižnica za drsnike za primerjavo slik. Uporaba je enostavna, samo vključite Cato CSS in JS knjižnico in sledite njeni HTML strukturi.

Na vašem drsniku so na voljo možnosti, vključno z dodajanjem opisa orodja, spreminjanjem smeri drsnika, celo dodajanje učinka filtra, kot so sepija in sivine. Vendar pa morate vedeti, da ima Cato trenutno samo podporo za WebKit.

Prej potem - To je lahka, popolnoma odzivna in deluje na vseh postavitvah in velikostih. Predstavitve v živo si lahko ogledate na Codepen.

Drsnik za primerjavo videoposnetkov HTML5 - Ko drugi razvijalci poskušajo narediti primerjavo drsnika za slike, potem Dudley Storey uporabite drsnik za video. Za delo je uporabil jQuery in le nekaj vrstic kode. Oglejte si demo na Codepen, da vidite dejanje.