5 Gratis billedsammenligning Slider Scripts

Overlaid skydere giver dig mulighed for at sammenligne mellem to billeder, som regel en tidligere art, med de to billeder overlejret på hinanden. En skyder, der kan manipuleres, kan trækkes af brugeren for at vise mindre af førbilledet og mere af efterbilledet og omvendt.

Det er den perfekte måde for visse scenarier, som f.eks. At se Mars 'atmosfæriske effekter eller hvordan bylandskaber ændres i løbet af et halvt århundrede.

For designere er det også en fantastisk måde at reflektere over mængden af ​​forandring en teknik eller tilgang har på et originalt billede. Der er forskellige JS biblioteker, du kan bruge til sammenligning formål. Her er 5 af dem.

Twentytwenty

Twentytwenty er visuelt værktøj, der gør det nemt at bemærke forskellene mellem to billeder. Dette værktøj udnytter jQuery og jquery.event.move til arbejde. Det er meget nemt at bruge, skal du bare stable to billeder i en beholder og derefter ringe twentytwenty (); til beholderen.

Derefter:

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

Twentytwenty er lydhør og fungerer for alle enheder, og hvis du bruger Foundation Framework, vil dette arbejde ud af boksen.

sidestiller

sidestiller hjælper dig med at sammenligne to stykker medier (fotos eller GIF) og gøre det nemt for dig at fremhæve ændringen mellem billederne over tid. Dette plugin er nemt at bruge og fungerer på alle enheder. Bare giv to billeder og kalder pluginet med de tilgængelige muligheder.

På mulighederne kan du indstille skyderens startposition, sætte den lodret eller vandret, tilføje etiket og kredit, animation og meget mere.

Prøv en demo nedenfor:

imgSlider

imgSlider er et simpelt jQuery-plugin til at lave billedsammenligningsskyderen. Brugen er enkel og nem: efter at have inkluderet sin JS og CSS skal du wrap billederne i div med venstre klasse for Før billede og ret klasse for efter billede, og aktiver derefter det ved at ringe .glider ();. Pluginets indstillinger inkluderer indstilling af skyderenes startposition og tilføjelse / visning af instruktioner på skyderen.

Ring til plugin:

 $ ( 'Skyderen') skyderen ().; 

Cocoen

Cocoen muliggør berøring med brugen af ​​jQuery-Touch-begivenheden. Det er nemt at anvende på grund af en HTML-struktur svarende til Twentytwenty plugin. På script stack, udover jQuery skal du medtage jQuery Touch Event biblioteket sammen med dette plugin.

 
   
 $ (dokument) .ready (funktion () $ ('.cocoen'). cocoen (););

Prøv en demo nedenfor:

Billede Sammenligning Slider

CodyHouse lavede en demo af en billedsammenligningsskyder med CSS3, jQuery og nogle scripts til at håndtere trækhændelsen og for at tilføje mobil support. Du kan følge den fulde forklaring og instruktioner om at bruge dette plugin her og se demoen her.

Prøv en demo nedenfor:

Her er 3 mere:

Cato - Andre plugins har brug for jQuery som afhængighed, men Cato kræver ingen afhængighed af arbejde, hvilket gør det til et mere letvægtsbibliotek til billed sammenligning skydere. Brugen er let, bare medtag Cato's CSS og JS bibliotek og følge dens HTML struktur.

Der er muligheder for at anvende på din skyder, herunder tilføjelse af værktøjstip, ændring af skyderetningen, endda tilføjelse af filtereffekt som sepia og gråtoner. Du skal dog bemærke, at Cato i øjeblikket kun har support til WebKit.

Før efter - Dette er letvægts, fuldt lydhør, og fungerer på ethvert layout og størrelse. Du kan se de levende demoer på Codepen.

HTML5 Video Sammenligning Slider - Når en anden udvikler forsøger at lave sammenligningsskyder for billeder, så bruger Dudley Storey skyderen til video. For at gøre arbejde bruger han jQuery og kun nogle få linjer kode. Se demoen på Codepen for at se handlingen.