5 Free Image Comparison Slider Scripts
Päällystettyjen liukusäätimien avulla voit tehdä vertailuja kahden kuvan, yleensä ennen jälkikäteen, välillä, jolloin kaksi kuvaa päällekkäin. Käyttäjä voi vetää liukusäädintä, jota voidaan käsitellä, jotta se näyttää vähemmän edellistä kuvaa ja enemmän jälkikuvaa, ja päinvastoin.
Se on täydellinen tapa tietyille skenaarioille, kuten Marsin tunnelman ankarien vaikutusten tarkasteleminen tai miten kaupunkimaisemat muuttuvat puolen vuosisadan ajan.
Suunnittelijoille se on myös hyvä tapa pohtia tekniikan tai lähestymistavan muutoksen määrää alkuperäisessä kuvassa. Vertailun vuoksi on olemassa useita JS-kirjastoja. Tässä on viisi.
Twentytwenty
Twentytwenty on visuaalinen työkalu, jonka avulla on helppo huomata kahden kuvan väliset erot. Tämä työkalu käyttää jQueryä ja jquery.event.move to work. Se on erittäin helppokäyttöinen, vain pinoa kaksi kuvaa säiliöön ja soita twentytwenty (); säiliöön.
Sitten:
$ ( "# Kontti"). Twentytwenty ();
Twentytwenty on reagoiva ja toimii kaikissa laitteissa, ja jos käytät säätiön kehystä, tämä toimii pois laatikosta.
Rinnastaa
Rinnastaa auttaa vertaamaan kahta mediaa (valokuvia tai GIF-tiedostoja) ja helpottamaan kuvien muutosta ajan kuluessa. Tämä plugin on helppokäyttöinen ja toimii kaikissa laitteissa. Anna vain kaksi kuvaa ja soita laajennukseen käytettävissä olevilla vaihtoehdoilla.
Vaihtoehdoissa voit asettaa liukusäätimen aloitusasennon, asettaa sen pystysuoraan tai vaakasuoraan, lisätä tarran ja luoton, animaation ja paljon muuta.
Kokeile alla olevaa demoa:
imgSlider
imgSlider on yksinkertainen jQuery-laajennus, joka tekee kuvien vertailun liukusäätimestä. Käyttö on yksinkertaista ja helppoa: sen JS: n ja CSS: n sisällyttämisen jälkeen kääri kuvat diviksi vasen luokka ennen kuva ja oikea luokka jälkeen kuva, aktivoi se soittamalla .liukusäädintä ();. Lisäosan asetukset sisältävät liukusäätimen alkuasennon ja liukusäätimen ohjeiden lisäämisen / näyttämisen.
Soita laajennukseen:
$ ( 'Slider'). Liukusäädintä ();
Cocoen
Cocoen mahdollistaa kosketuksen jQuery-Touch-tapahtuman kanssa. Se on helppo soveltaa HTML-rakenteen vuoksi, joka on samanlainen kuin Twentytwenty kytkeä. JQueryn lisäksi sinun on lisättävä jQuery Touch -tapahtumakirjasto, joka sisältää komentosarjan pinoa tämän pluginin ohella.
$ (asiakirja). jo (toiminto () $ ('. cocoen'). cocoen (););
Kokeile alla olevaa demoa:
Image Comparison Slider
CodyHouse teki demon kuvan vertailun liukusäätimestä CSS3: n, jQueryn ja joidenkin komentosarjojen avulla käsittelemään vetotapahtumaa ja lisäämään mobiilitukea. Voit seurata tämän laajennuksen täyttä selitystä ja ohjeita täällä ja nähdä esittelyn täällä.
Kokeile alla olevaa demoa:
Tässä on vielä 3:
Cato - Muut lisäosat tarvitsevat jQueryn riippuvuutena, mutta Cato ei vaadi riippuvuutta työstä, joten se on kevyempi kirjasto kuvien vertailun liukusäätimille. Käyttö on helppoa, vain Cato: n CSS- ja JS-kirjasto ja seuraa sen HTML-rakennetta.
Liukusäätimellä on valittavissa vaihtoehtoja, kuten työkalutyypin lisääminen, liukusäätimen muuttaminen, suodattimen tehostaminen, kuten seepia ja harmaasävy. Huomaa kuitenkin, että Catolla on tällä hetkellä vain tukea WebKitille.
Ennen jälkeen - Tämä on kevyt, täysin reagoiva ja toimii minkä tahansa asettelun ja koon mukaan. Näet live-demot Codepenistä.
HTML5 Video Comparison Slider - Kun toinen kehittäjä yrittää tehdä kuvien vertailun liukusäätimestä, Dudley Storey soveltaa liukusäädintä videoon. Työn tekemiseen hän hyödyntää jQueryä ja vain muutaman rivin koodia. Näe Codepenin esittely nähdäksesi tapahtuman.
