Articles

Top 50 jQuery Gallery & Image Sliders for 2020

On 27 marraskuun, 2021 by admin

Koska yleensä parhaat galleriat luodaan jQueryllä, olemme keskittyneet pääasiassa jQuery-tyyppisiin liukusäätimiin, mutta joukossa on myös muutama yksinkertainen CSS-galleria. Tämä kokoelma on järjestetty viiteen pääluokkaan, joten voit helposti siirtyä haluamaasi osioon. Ennen kuin aloitamme, halusimme kertoa, että on sinusta kiinni, valitsetko ilmaisen vai premium-ratkaisun jQuery-gallerialle tai -liukusäätimelle.

Löysimme aika monta ilmaista ja laadukasta kuvaratkaisua, joista nautit. Tietenkin premium-resursseja – oli joitakin gallerioita, jotka yksinkertaisesti räjäyttivät meidät pois.

Sisällysluettelo

• jQuery Image Slideshows
• jQuery Image Galleries
• jQuery Image Sliders
• jQuery Portfolio, News and Tour Sliders
• CSS-pohjaiset galleriat

Katsele kokoelma läpi ja löydä tarpeisiisi paras kuvaratkaisu. Jos kyseessä on henkilökohtainen projekti, et varmasti halua käyttää rahaa. Mutta toisaalta, jos kyseessä on freelance-työ, ehkä kannattaa käyttää vähän rahaa, jotta voit todella tehdä vaikutuksen asiakkaaseen ja säästää samalla paljon aikaa!

Se, mitä ehdotan, on kai se, että kannattaa aina katsoa, kuinka paljon aikaa ilmaisen ratkaisun muokkaaminen, asentaminen tai käyttöönotto vie sinulta. Jos et ole yhtä taitava tai se on aikaa vievää – tutustu ehdottomasti valmiiseen koodiin ja tällaisiin edullisiin mutta laadukkaisiin työkaluihin.

jQuery Image Slideshows

Alta löydät kaikki parhaat jQuery-slideshows. Yleensä diaesityksiä käytetään sivuston yläosassa esittelemään tärkeimpiä osia muodikkaimmalla tavalla.

AviaSlider

AviaSlider on erittäin joustava ja helppokäyttöinen jQuerylla rakennettu kuvien diaesityslisäosa. Siinä on joukko todella ainutlaatuisia siirtymiä, joita en ole nähnyt missään muualla, sekä joitakin perussiirtymiä.

Sen mukana tulee kuvien esilataus, joten liukusäädin alkaa toimia vasta, kun kuvat on ladattu ja valmiina esitettäväksi. Ei kömpelöitä animaatioita puoliksi ladattujen kuvien kanssa.

Voidaksesi nähdä, miten se toimii livenä, tässä on demo-esikatselu.

Jssorr (Ilmainen)

Jssor Slider on kosketusnäyttöinen pyyhkäisy-kuva-slideshow, jossa on 360+ JavaScript-slideshow-tehostetta. Kun kosketat Jssor Slideria, se pysäyttää animaation ja pyyhkäisee dioja siihen suuntaan, johon sormesi liikkuu.

Tässä on yli 360 erilaista efektiä, voit tarkistaa ne kaikki täältä. Omat suosikkini diashow-efekteistä ovat yksinkertainen häivytys ja karuselli-slideri.

S3Slider (Ilmainen)

S3Slider jQuery Slideshow kolmella eri ominaisuudella ja näyttävillä sivuilla. Voit helposti säätää liukusäätimen kokoa ja viivyttää muutosnopeutta. Niin, ja mukana tulee myös todella hyvä dokumentaatio.

Camera Slideshow (Ilmainen)

Camera Slideshow on jQuery-lisäosa, jota voi käyttää myös WordPress-lisäosana.

Sen mukana tulee 33 sisäänrakennettua teemaa, mutta voit myös olla luova, sillä diaesityksen mukana tulee CSS-tiedosto, jossa voit muokata haluamiasi osia.

Voit helposti toteuttaa HTML-objekteja, videoita ja kuvatekstejä. Yksi huono puoli on se, että tämä diaesitys perustuu Diapo-nimiseen projektiin, jota ei enää tueta. Se on kuitenkin testattu kaikilla tärkeimmillä selaimilla.

Katso live-demo täältä.

Sequence JS (Ilmainen)

Sequence JS on CSS-kehykseen perustuva JavaScript-slideshow. Se on tarkoitettu diaesitysten, bannereiden, esitysten ja muiden askelpohjaisten sovellusten luomiseen.

Jos ilmaiset valmiit teemat eivät riitä sinulle, tutustu heidän omaan teemakauppaansa. Voit myös yksinkertaisesti tilata räätälöidyn teeman. Mutta niin kuin minä katson, saat todellakin kaiken tarvitsemasi ilmaisessa versiossa, ja lisäksi tarjolla on melko paljon ilmaisia teemoja.

jQuery Banner Rotator / Slideshow

Tämä on jQuery Banner Rotator -lisäosa, jossa on useita siirtymiä. Pienoiskuvat ja painikkeet mahdollistavat helpon navigoinnin bannereillesi/mainoksillesi. Bannerin rotaattori on myös uudelleenkoottavissa ja konfiguroitavissa lisäosan parametrien kautta.

Slide JS (Ilmainen)

Slide JS on jQuery-lisäosa, joka on responsiivinen, siinä on kosketustuki, helppo asennus ja CSS3-siirtymät. Se sopii mainiosti näytettäväksi verkkosivustosi aloitussivuksi, ja se on ilmainen. Siinä on myös täydellinen dokumentaatio, tarkista live-esikatselu heidän kotisivuillaan.

Slideshow 2 (Ilmainen)

Slideshow 2 on Mootools 1.2:n JavaScript-luokka, jolla voit suoratoistaa ja animoida kuvien esitystä verkkosivustollasi. Käy heidän verkkosivullaan saadaksesi täydellisen ominaisuusluettelon.

JavaScript TinySlideshow (Ilmainen)

Tämä dynaaminen JavaScript-diashow on kevyt (5kb) ja ilmainen kuvagalleria / diashow-skripti.

Voit helposti asettaa sen näyttämään kuvat automaattisesti, asettaa vieritysnopeuden, pikkukuvien läpinäkymättömyyden tai poistaa pikkukuvien liukusäätimen käytöstä. Halusin sisällyttää sen tähän kokoelmaan, koska se on niin kevyt. Klikkaa tästä ladataksesi tämän diaesityksen ja nähdäksesi live-esikatselun.

jQuery Image Galleries

Tästä osiosta löydät Image Galleries. Ne sopivat parhaiten portfolioihin, mutta niitä voi käyttää myös blogeissa. Joten kaivetaanpa sisään.

Galleria

Galleria on JavaScript-kuvagalleria. Se on rakennettu niin, että se yksinkertaistaa kauniin kuvagallerian luomista. Sinun ei tarvitse olla ohjelmoinnin asiantuntija käyttääksesi sitä. Tarvitset vain muutaman rivin koodia, lisäät kuvia ja olet valmis.

Galleriassa on paljon hienoja työkaluja, joilla voit luoda oman kuvagallerian. Galleria, näet kuvakaappauksessa, on ilmainen versio, jota voit muokata haluamallasi tavalla.

Jos kuitenkin haluat saada jotain Gallerian muista malleista, sinun täytyy maksaa niistä, löydät lisää heidän kaupastaan. Nämä teemat ovat hintaluokassa 9 ja 29 dollarin välillä.

Sideways

Sideways Image Gallery on jQuery-liitännäinen, johon on lisätty CSS3-styling. Galleria on responsiivinen ja siinä on koko näytön kokoisia kuvia eri tiloilla ja mukautetuilla vierityspalkeilla. Se on moderni ja silmiä hivelevä kuvagalleria.

Tämä sopii parhaiten valokuvausportfolion esittelyyn, koska se voi todella antaa oikean kunnian työlleen.

Aivan kuin se ei olisi tarpeeksi hyvä, se on myös ilmainen käyttää. Katso live-esikatselu täältä.

Visual Lightbox

VisualLightBox on ilmainen ohjattu jQuery-ohjelma, jonka avulla voit helposti luoda web-kuvagallerioita. Se perustuu kuuluisaan LightBox2-skriptiin. Muutamalla klikkauksella voit luoda henkeäsalpaavia gallerioita kirjoittamatta yhtään riviä koodia.

Sivuillaan he tarjoavat paljon malleja, joita voi käyttää erilaisiin tarkoituksiin. Se sopii parhaiten matkatoimistoihin, seikkailublogeihin ja työportfoliosivustoille.

TripTracker

TripTracker-diashow on kevyt JavaScript-kuvankatseluohjelma, jossa on animoitu diaesitysominaisuus. Se tekee juuri sen, mitä se sanoo tekevänsä. Siinä ei ole mitään ylimääräisiä vaihtoehtoja, se on yksinkertainen kuvien katseluohjelma. Sopii hyvin artikkeleihin.

Klikkaa tästä kokeillaksesi sitä.

NoobSlide

NoobSlidessa on 8 erilaista esimerkkiä siitä, miten voit katsella kuvia MooToolsilla. Valitettavasti dokumentaatiota ei ole, mutta se on erittäin helppokäyttöinen galleria ja tutustumisen arvoinen.sitä voi käyttää esittelytilana matkablogissa tai vaikka portfoliossa.

PrettyPhoto

Pretty Photo on jQuery Lightbox-klooni. Melko samanlainen kuin alkuperäinen Lightbox muutamalla lisätyllä ominaisuudella ja täydellä dokumentaatiolla. Se on helppo asentaa ja erittäin joustava.

Tämä lisäosa tukee videoita, Ajaxia ja iframeja. Sitä voidaan käyttää yksittäisille valokuville tai gallerioille. Gallerioissa voi olla myös sekalaista sisältöä. Se sopii hyvin erityyppisiin blogeihin.

Demoa ja latausta varten käy täällä.

Unite Gallery

Unite Gallery on moderni galleria, joka käyttää jQueryä. Se on modulaarisesti suunniteltu, räätälöintiä ajatellen. Voit myös luoda oman teeman helposti.

Tämä galleria on täysin responsiivinen. Se tarjoaa 9 erilaista nahkaa ja on täysin dokumentoitu. Voit ladata sen WordPressille, Drupalille, PrestaShopille, OpenCartille ja Joomlalle.

Tämä galleria sopii valokuvauksen esittelyyn tai ravintolan ruokalistoihin. Sen käyttö on ilmaista, sillä se on julkaistu MIT-lisenssillä. Kaiken kaikkiaan se on loistava lisä kuvien täyttämille verkkosivuille.

Voit nähdä sen toiminnassa täällä.

Automaattisesti generoituva galleria

Automaattisesti generoituva galleria ei varsinaisesti ota kuvia puolestasi, mutta se on aika fiksu siitä huolimatta. Tämä galleria ei edes luo pikkukuvia puolestasi. Mitä se tekee, on rakentaa itsensä dynaamisesti kuvahakemistostasi. Kun haluat lisätä uusia kuvia, pudotat vain uuden kuvan ja pikkukuvan hakemistoon ja olet valmis! Valokuvien poistaminen tarkoittaa vain valokuvien poistamista kuvahakemistosta. Tämä galleria käyttää PHP:tä web-ohjatussa toiminnassaan. Löydät täydellisen opetusohjelman ja demon täältä.

HighSlide JS

Highslide JS on avoimen lähdekoodin JavaScript-ohjelmisto, joka tarjoaa Web 2.0 -lähestymistavan ponnahdusikkunoihin. Se virtaviivaistaa pikkukuvien ja HTML-ponnahdusikkunoiden käyttöä web-sivuilla. Voit käyttää sitä pikkukuvien katselijana tai vierivän HTML-sisällön haltijana.

Live-esikatselu sen toiminnoista löytyy täältä.

Litteän tyylin Polaroid-galleria

Polaroid-galleria on saatavilla jQuery-lisäosana. Se vie Polaroid-kuvien vintage-ilmeen seuraavalle tasolle.

Polaroid-gallerian vahvuuksiin kuuluu, että se on suunniteltu responsiivista ja litteää suunnittelua ajatellen. Polaroid Gallery tarjoaa myös shuffle-siirtymän ja sisällönpitimet, jos tarvitset niitä. Kuvia voi kääntää ja näyttää myös takaosan.

Tämä galleria on hyvä valinta matkailijoille tai bloggaajille, jotka haluavat esitellä viimeisimmän seikkailunsa.

Varmista, että näet sen toiminnassa täällä.

jQuery Image Sliders

Tämä osio on omistettu kaikille parhaille ja kauneimmille liukusäätimille, sekä premium-luokitukselle että ilmaiseksi. Ne tekevät samanlaista työtä kuin Slideshowt, mutta voivat korostaa sisällön haltijoita.

Touch Enabled RoyalSlider

Royal Slider on jQuery-kuvagalleria ja paljon muuta. Tätä liukusäädintä voidaan käyttää kuvaliukusäätimenä, diaesityksenä, HTML-sisällön liukusäätimenä, galleriana, bannerin rotaattorina, videogallerian karusellina tai vain esittelynä. Vaihtoehdot ovat rajattomat. Tämä täysimittainen liukusäädin on saatavana myös WordPress-lisäosana.

Tässä on sisäänrakennetut animoidut kuvatekstit, se tukee kosketusnäyttöä mobiililaitteille ja on täysin responsiivinen. Tämä on pakollinen jQuery-kuvaliukusäädin. Katso live-esikatselu täältä.

LayerSlider

LayerSlider on premium-luokan WordPress-liitännäinen, jolla voit luoda kauniita kuvagallerioita, sisällön liukusäätimiä ja uskomattomia tehosteilla varustettuja uskomattomia diaesityksiä.

LayerSliderissä on 13 sisäänrakennettua nahkaa. Siinä on yli 200 2D- ja 3D-dia-siirtymää ja 3 erilaista navigointia. LayerSlider tarjoaa myös tuen mobiililaitteille ja useita asetteluja.

Voit lisätä mitä tahansa sisältöä, kuvista, tekstistä, mukautetusta HTML:stä, YouTube-videosta ja Vimeo-videosta HTML5-itsehostettuun multimediasisältöön.

Mahdollistamalla semanttisen merkinnän rakentamisen mukautetuilla attribuuteilla, jotka hakukoneet voivat indeksoida helposti, se on myös SEO-ystävällinen.

Katso se itse täältä.

UnoSlider

UnoSlider on kuvien liukusäädin, joka tulee WordPress- ja jQuery-lisäosana. Siinä on rajattomasti siirtymäanimaatioita.

Tämä kuvaslideri on täysin responsiivinen ja yhteensopiva myös vanhempien selainten kanssa. Kerrokset ovat erittäin hyvin animoituja ja niissä on paljon muokkausvaihtoehtoja. Asennus ja käyttö ovat yksinkertaisia.

UnoSliderissa on yli 30 animaatiovaihtoehtoa, per-slide-asetukset ja se on helppo teemoittaa. Tämä liukusäädin on myös varustettu julkisella API:lla, kuvan esilataajalla ja sillä on mahdollisuus pitää useita liukusäätimiä yhdellä sivulla. Myös HTML-sisältöä voidaan näyttää. Voit valita 12 valmiiksi rakennetusta teemasta ja yli 40 siirtymävaihtoehdosta.

Voit nähdä tämän hämmästyttävän kuvasliderin demon täältä.

Master Slider

Master Slider on korkealuokkainen ja laadukkaasti suunniteltu kuva- ja sisältöslideri. Se on saatavilla jQuery- ja WordPress-lisäosana. Ja siitä on myös ilmainen versio.

Tässä liukusäätimessä on kaikki, mitä tarvitset silmäänpistävien kuva- ja sisältöliukusäätimien rakentamiseen. Se on täysin responsiivinen ja toimii millä tahansa näytöllä tai laitteella. Voit valita 6 erilaisesta interaktiivisesta siirtymästä ja 25 valmiista mallista.

Tämä liukusäädin tarjoaa kosketusnäytön pyyhkäisynavigoinnin, animoidut kerrokset, pikkukuvat ja välilehdet. Master Slider on myös varustettu kuvien älykkäällä esilatauksella.

Wow Slider

Wow Slider on itse asiassa liukusäädin ei-koodaajille. Se tarjoaa vedä ja pudota -valikon, jonka avulla voit luoda verkkosivuillesi kuvasliderin.

Ydinominaisuuksiltaan Wow slider on jQuery-kuvaslideri, mutta se voi toimia myös ilman jQueryä. Se voi olla niin kevyt kuin haluat sen olevan.

Vedä ja pudota -luojan voi luoda käyttämällä HTML-sivua tai WordPress- tai Joomla-lisäosaa. Voit valita 25 erilaisesta siirtymästä ja sen käyttö on ilmaista.

Pääominaisuudet ovat:

• Täysin responsiivinen
• Hyvin räätälöitävissä
• Kosketusnäyttöön perustuva pyyhkäisynavigointi
• Kaikkien selainten tuki
• SEO-ystävällisyys

Näissä on lueteltu muutama pääominaisuus. Täydellisen luettelon ja live-demon saat heidän verkkosivuiltaan.

Slider Revolution

Slider Revolution on responsiivinen ja täysleveä liukusäädin, jossa on must-see-efektit ja SEO-ystävällisyys sisäänrakennettuna. Katso kasoittain mukautettuja siirtymiä ja animaatioita jokaiselle objektille sivulla! Mukauta tätä liukusäädintä niiden kätevän drag & drop back-endin avulla tarpeisiisi sopivaksi.

Tässä lisäosassa on tonneittain ainutlaatuisia siirtymäefektejä, kuvan esilataus, videon upottaminen, automaattinen toisto, joka pysähtyy käyttäjän vuorovaikutuksen yhteydessä, ja paljon helppoja asetusvaihtoehtoja omien efektien luomiseen. Slider Revolutionin voi ostaa WordPress-, Drupal-, PrestaShop-, Magento- OpenCart- ja jQuery-pluginina.

Huolissasi koodaustaidoista? Slider Revolutionissa on videotuki, jota on helppo seurata. Koodaustaitoja ei tarvita, helppoa kuin pekonin keittäminen. Ah…mitä minä sanon? Tarkista vain itse.

Accordion Slider

Accordion Slider on täysin responsiivinen jQuery-pohjainen slider. Se on saatavilla myös WordPress-lisäosana. Ei ole melkein mitään, mitä et voisi tehdä sillä.

Accordion Sliderin mukana tulee animoituja kerroksia ja sulavia animaatioita. Sinun ei tarvitse tehdä kompromisseja muotoilun suhteen, sillä liukusäätimessä on kosketustuki parhaan mahdollisen käyttökokemuksen takaamiseksi.

Tämän liukusäätimen sivunumerointi on ainutlaatuista, sillä voit asettaa sivulla näkyvien paneelien määrän. Asettelu on täysin muokattavissa.

Koska siinä on laiska latausominaisuus, kuvat voidaan ladata vasta, kun niitä katsotaan. Voit myös asettaa korkearesoluutioiset kuvat ladattavaksi vain korkeilla PPI-näytöillä, sillä siinä on tuki Retina-näytöille.

Joitakin lisäominaisuuksia on saatavilla WordPress-lisäosaan.

Fotorama-kuvaliukusäädin

Fotorama-kuvaliukusäädin on yksinkertainen mutta samalla erittäin tehokas. Voit käyttää sitä jQuery tai WordPress ja Ruby on Rails . Fotoraman käyttöönottoa varten heillä on myös video-opastus.

Se on yksinkertainen tapa näyttää kuvia tai kuvia, mutta tarpeeksi tehokas näyttämään sinut. Sen käyttö on ilmaista. Tutustu siihen täällä.

All in One Slider

All in One Slider on jQuery Slider ja sen mukana tulee viisi eri tapaa, joiden avulla voit luoda kauniin Bannerin rotaattorin, Thumbnails Bannerin, Bannerin soittolistan kanssa, Content Sliderin ja karusellin.

Se on edistynyt Slider, jonka avulla voit luoda tehokkaita dioja, joissa on animaatioita tekstillä ja HTML-tunnisteilla. Tämä on tehokas työkalu, joka tarjoaa sinulle kaiken, mitä tarvitset verkkosivuston kehittämisessä tuotteiden tai kuvien näyttämiseen.

All in One Slider on täysin responsiivinen ja kosketusnäyttöä tukeva kuvaslideri. All in One slider tarjoaa 16 erilaista siirtymää ja animoitua tekstiä. Tukee kaikkia tärkeimpiä selaimia ja on palkittu tuote.

Katso se itse. Tässä on live-esikatselu.

Blueberry Image Slider

Blueberry image slider on jQuery-liitännäinen, joka on kehitetty erityisesti responsiiviseen verkkosuunnitteluun. Blueberry image slider on avoimen lähdekoodin projekti, joka perustuu cssgrid.netin 1140px ruudukkojärjestelmään. Se on yksinkertainen ja samalla erinomainen ilmainen vaihtoehto.

Olen varma, että pidät siitä yhtä paljon kuin minä. Katso live-esikatselu ja latausmahdollisuus täältä.

RhinoSlider

RhinoSlider on jQuery-liukusäädin, jossa on mahdollisuus muokata versio ennen lataamista. Tämä voi vähentää huomattavasti sen asentamiseen kuluvaa aikaa. Voit toki ladata koko paketin, mutta mielestäni paras tapa on käyttää generaattoria.

Se on erittäin joustava ja tarjoaa paljon vaihtoehtoja callbackeille ja callbeforeille. Voit asettaa sen automaattiseen toistoon tai saada sen pysähtymään hoverissa. Myös kuvatekstit ovat käytettävissä ja muokattavissa.

Katsokaa itse heidän verkkosivuiltaan. Se on loistava ilmainen työkalu.

Slippry

Slippry image slider on jQuery-lisäosa, joka käyttää CSS3-siirtymiä ja HTML5-elementtejä. Se voi olla niin yksinkertainen tai monimutkainen kuin haluat sen olevan.

Koska CSS- ja Sass-tiedostot ovat mukana, voit päästää mielikuvituksesi vapaaksi ja tyylitellä sen haluamallasi tavalla. Slippry tekee työnsä parhaiten etusivun yläosassa. Kuvatekstien kanssa se voi toimia hyvänä yrityksen esittelynä.

Ei usko meitä, katso täältä täydellinen dokumentaatio ja live-demo.

Un Slider

Unslider on hyvin yksinkertainen liukusäädin, joka perustuu jQueryyn. Se on hyvin pieni mutta tehokas. Voit muuttaa kaikkea, jotta se toimii ja tuntuu haluamaltasi.

Unslider on todella yksinkertaisin slider, johon olen törmännyt. Sinun ei todellakaan tarvitse olla asiantuntija käyttääksesi tätä. Lisää vain muutama rivi koodia, laita kuvia ja sinulla on näppärä liukusäädin verkkosivustollesi tai blogiisi.

Koko sivusto on yksi iso demo tälle liukusäätimelle.

Unleash 3

Unleash 3 on toinen jQuery-akkordion-liukusäädin listallamme. Se on yksi parhaista olemassa olevista. Sinulla on paljon vaihtoehtoja ja asetuksia, joista valita. Voit lisätä kuvatekstejä ja ohjaimia eri tyyleillä tai lisätä mitä tahansa muuta sisältöä useilla CSS3-animaatioilla.

Pääominaisuudet ovat:

• Täysin responsiivinen
• Täyden näytön tila
• Mahdollisuus valita dia, kun sivu ladataan
• Vaihe vaiheelta dokumentointi

.

• Touch-tuki
• Videotuki

MightySlider

Mighty Slider on kaikki mitä tarvitset luodaksesi hämmästyttävän yhden-suuntainen liukusäädin. Mighty Slideria voidaan käyttää bannerin rotaattorina, videogalleriana, esittelynä ja perus sliderina. Kaikki tämä on mahdollista erittäin tehokkaan API:n ansiosta. Mighty Slider antaa sinulle täydellisen hallinnan ulkoasuun ja suunnitteluun.

Fullscreen Slit slider

Fullscreen Slit Slider on jQuery-lisäosa ja käyttää CCS3-animaatioita. Slider voi ulottua koko näkymäikkunaan tai sitä voidaan käyttää sliderina muun kontekstin sisällä.

Fullscreen Slit Slider on täysin responsiivinen ja siinä on joitakin ainutlaatuisia jaetun ruudun siirtymiä. Kuvatekstien kanssa se on loistava tapa esittää asiasi kävijöille.

Tarkista se toiminnassa. Olen varma, että tulet hämmästymään siitä, mitä tällä ilmaisella liukusäätimellä voi tehdä.

jQuery Portfolio, News & Tour Sliders

Tämä osio on omistettu liukusäätimille, jotka on suunniteltu erityisesti portfolioiden, uutisten ja retkien esittelyyn.

jQuery Carousel Evolution

jQuery Carousel Evolution on helppo ja edullinen tapa luoda huomiota herättävä tuote- tai ryhmäesittely. Kyllä, se on premium-luokan liukusäädin, mutta se tarjoaa paljon vastinetta rahoilleen.

jQuery Carousel Evolution on tehokas liukusäädin, joka käyttää HTML-merkintää. Se tarjoaa 9 erilaista tyyliä sliderille. Tämä liukusäädin tukee myös YouTuben ja Vimeon videoiden toteutusta. Kaikki tärkeimmät selaimet ovat myös tuettuja.

Voit tarkistaa demon täältä.

Cube Portfolio – Responsive jQuery Grid Plugin

Cube Portfolio on erittäin hieno jQuery-lisäosa, jossa on tonneittain animaatioita. Se tarjoaa mukautettuja kuvatekstejä ja pelaa hyvin nykyisen HTML- ja CSS-koodisi kanssa.

Cube Portfolio tarjoaa yli 30 vaihtoehtoa, jotka antavat sinulle täydellisen asettelun ja suunnittelun hallinnan. Sliderilla on täysin responsiivinen muotoilu ja se on täysin muokattavissa. Se käyttää CSS3-animaatioita ja voit valita 19 aloituspaketin mallista. Cube Portfolio on myös varustettu suodatusjärjestelmällä.

Sitä käytetään parhaiten pystysuuntaisiin liukusäätimiin, portfolioprojekteihin, tiimin jäsenten esittelyyn, valokuvien esittelyyn tai muihin mosaiikkiruudukkoihin. Käyttö on rajaton. Cube Portfolio on saatavana myös WordPress-lisäosana.

Tarkista live-esikatselu täältä.

Slideme

Tämä jQuery-lisäosa sopii mainiosti verkkosivun yläosaan esittelemään työtäsi tai kertomaan sinusta enemmän.

Slidemella on täysi dokumentaatio ja opetusohjelma, miten slideri asetetaan, jokaiselle laitetyypille erikseen. Suunnittelu on täysin responsiivinen CSS3-animaatioilla. Se on helppo asentaa ja tarjoaa julkisen API:n.

Slideme on ilmainen käyttää ja ehdottomasti tutustumisen arvoinen. Tutustu demoon täällä.

PgwSlider

Pgw slider on jQuery slider,\ joka on suunniteltu kuviesi esittelyyn. Tämä liukusäädin on täysin responsiivinen. Se on kevyt ja kaikkien selainten kanssa yhteensopiva. Voit käyttää sitä karusellina tai sliderina. Se tukee myös videota. All Around slider tarjoaa 6 valmiiksi rakennettua teemaa tai asettelua ja ton vaihtoehtoja.

Slider on varustettu vedä ja siirrä ympyrät -vaihtoehdolla ja loputtomalla silmukalla. Sen lisäksi se on täysin responsiivinen mobiilituella. Jokainen yksittäinen kuva voidaan suurentaa ja se voi sisältää myös kuvauksen.

All Around slideria käytetään parhaiten tuote-esittelyssä tai tiimin esittelyssä.

Tarkista live-esikatselu täältä.

Lens Slider

Lens Slider on avoimen lähdekoodin hanke ja siten täysin muokattavissa. Slider käyttää hyvin yksinkertaista järjestämättömän listan HTML-merkintää. Kuvat näytetään kuten kuvakaappauksessa näkyy. Mitään muuta vaihtoehtoa ei ole saatavilla. Lens Slider on saatavilla myös WordPress-lisäosana ja sitä voi käyttää ilmaiseksi.

Sopivin käyttötapa olisi tuotteiden, palveluiden tai ateam-esittelyyn.

Katso se täältä.

Gridder

Gridder on mahtava liukusäädin töidesi esittelyyn. Gridder jäljittelee tavallaan Googlen kuvahakua. Suurempaa kuvaa katsellaksesi klikkaat pikkukuvaa ja se laajenee. Tämä on loistava tapa näyttää suuri määrä kuvia samaan aikaan.

Gridder on saatavana jQuery- tai Ajax-pikkukuvien esikatseluna. Se on mahtava ilmainen ratkaisu seuraavaan portfolioprojektiisi.

JQueryn live-esikatseluun tutustu täällä. Jos haluat Ajaxin, klikkaa tästä.

Barack Slideshow 0.3

Barack Slideshow on tyylikäs, kevyt JavaScriptillä kirjoitettu diaesitys. Tämä diaesitys voi toimia pysty-, vaaka- ja epäsäännöllisillä listoilla. Kuvat on ladattu valmiiksi MooTool Assets -ohjelmalla. Jotta koodi pysyisi siistinä, kannattaa CSS-koodi tarkistaa. Tämä tarkoittaa joidenkin osien muuttamista tarvittaessa.

Barack Slideshowta voidaan käyttää portfolion esittelynä, tuoteluettelona tai vaikka asiakkaiden listaamiseen.

Täältä löydät demon ja voit testata eri vaihtoehtoja.

jQZoom Evolution

JQ Zoom Evolution

JQZoom on JavaScript-kuvasuurennin, joka on rakennettu suositun jQuery JavaScript -kehyksen päälle. jQZoom on loistava ja todella helppokäyttöinen skripti kuvan osien suurentamiseen.

Tämä kuvan suurennin soveltuu parhaiten verkkokauppoihin ja ravintoloiden ruokalistoihin.

Löydä dokumentaatio ja demo täältä.

Multimedia Portfolio 2

Multimedia Portfolio 2 on jQuery-lisäosa, joka pystyy automaattisesti tunnistamaan jokaisen mediatiedoston laajennusosan ja soveltamaan siihen sopivaa soitinta. Se tukee kuvia ja videoita. Multimedia Portfolio käyttää yksinkertaista HTML-merkintää ja sitä on helppo käyttää.

Tämä liukusäädin soveltuu parhaiten tuotteiden, palveluiden ja jopa uutisten esittelyyn.

Katso niiden demo.

jQuery Virtual Tour

jQuery Virtual tour on yksinkertaisen panoraamakierroksen katselijan laajennus. Tämän jQuery Virtual Tourin avulla voit muuttaa joitakin panoraamanäkymiä virtuaalikierrokseksi! Se on loistava lisäosa, jota kannattaa tarkastella.

Täältä löydät demon ja latausvaihtoehdot.

47.jQuery Vertical News Slider

jQuery Vertical News Slider on erittäin hyödyllinen sivustoille, jotka haluavat näyttää joitain uutisia tai markkinointikampanjoita sivustoillaan. Se on responsiivinen ja käyttää CSS3-animaatioita. Vertical News sliderin avulla voit myös täysin muokata sliderin tyyliä.

Katso live-esikatselu täältä.

Multi Item Slider

Tässä galleriassa on myös opetusohjelma, miten voit luoda sen itse. Multi item jQuery galleria on saanut inspiraationsa Applen sliderista, joka näyttää useita tuotteita kerralla. Se on täysin responsiivinen ja siinä on litteä muotoilu, jossa on erilaisia efektejä.

Multi item jQuery -galleria sopii hyvin verkkokauppoihin tuotteiden esittelyyn. Siinä on yksinkertainen navigointi, kuten kuvakaappauksessa näkyy. Navigointi on intuitiivinen, kun vaihdetaan eri kategorioiden välillä.

Live-esikatseluun pääset klikkaamalla tästä.

CSS-pohjaiset galleriat

Olemme tulleet viimeiseen osioon, josta löydät parhaat puhtaat CSS-pohjaiset galleriat. Ne eivät ehkä ole yhtä suosittuja, mutta ovat varmasti kokeilemisen arvoisia. Katsokaa itse.

HoverBox Image Gallery

HoverBox Image Gallery on periaatteessa superkevyt (8kb) roll-over kuvagalleria, joka ei käytä muuta kuin CSS:ää. Nopeamman latautumisen vuoksi se käyttää vain yhtä kuvaa pikkukuvaan ja roll-over esikatseluun. Kaikki tärkeimmät selaimet ovat tuettuja. HoverBox Image Gallery on vapaasti käytettävissäsi omissa projekteissasi.

Se sopii parhaiten valokuvauksen esittelyyn valokuvaajille, kaikenlaisiin portfolioihin ja ravintoloiden ruokalistoihin.

Live-esikatselu täällä.

CSS Image slider with 3-D transitions

CSS Image Slider on kokeellinen projekti, joka sisältää myös täydellisen opetusohjelman. Se käyttää animaatiotarkoituksiin CSS- ja CSS3-tekniikoita, joihin on lisätty 3-D-efektejä siirtymiin. Tarkoitettu käyttö on tiukasti kuvien sliderina.

CSS image slideria voidaan käyttää tuotteiden ja palveluiden esittelyyn. Mielestäni se voisi pärjätä hyvin myös kuvasliderinä täysleveässä artikkelissa.

Katso live-esikatselu.

CSS3 animoitu kuvagalleria

CSS3 animoitu kuvagalleria käyttää CSS3:a ja HTML5:tä tehosteiden renderöintiin. Kuvat zoomaantuvat, kun viet hiiren yläpuolelle. Tämä mahdollistaa yksityiskohtaisemman tarkastelun. Jos olet kiinnostunut, voit tutustua opetusohjelmaan ja luoda sen itse. Muuten voit vain ladata lähdekoodin.

CSS3 animoitu kuvagalleria se sopii valokuvauksen esittelyyn.

Filtronio CSS3 Portfolio

Filtronio CSS3 portfolio on loistava puhdas CSS- ja HTML5-galleria portfoliosi tai jopa tuotteidesi esittelyyn.

Se on yksinkertainen, mutta samalla erittäin tehokas ja ammattimainen portfoliogalleria. Voit valita 3 eri teemasta. Filtronio CSS3 portfolio tarjoaa myös animoituja kerroksia ja kategoriasuodattimen. Galleria on siististi koodattu ja helposti muokattavissa.

Katso live-demo täältä.

Pure CSS3 Image Gallery

Tämä on yksinkertainen CSS3-kuvagalleria, joka luo ponnahdusikkunan vaikutelman, kun klikkaat kuvaa. Se sopii portfolioiden esittelyyn verkkosivustoilla. Jos olet kiinnostunut, voit myös seurata ohjetta ja tehdä sen itse.

Katso live-esikatselu.

CSS Lightbox Image Gallery

Tämä kuvagalleria on toinen puhdas CSS-galleria. Se pienentää kuvia, kun niitä klikataan. Voit ladata lähdekoodin, tai jos siltä tuntuu, käy läpi opetusohjelma..

CSS Lightbox kuvagalleriaa tulisi käyttää ei-skrollaavalla sivustolla. Tämä voidaan kuitenkin ohittaa yhdellä JavaScript-rivillä, joka on mukana opetusohjelman lopussa. Sopivin käyttökohde olisi portfolion esittely.

Slidea

Ja tässä on tämän kokoelman helmi, Slidea. Slidea on monikäyttöinen sisällön liukusäädin. Tämä slider-lisäosa on rakennettu jQueryn, VelocityJS:n ja Animus-animaatiokehyksen varaan. Slidean kanssa ei ole mitään animaatiorajoituksia – voit tehdä sillä niin paljon mahtavuuksia!

Voin yrittää kuvailla, kuinka siisti se on, mutta tarkista vain demo ja ymmärrät, miksi pidän siitä niin paljon!

Loppupäätelmä

Minulla on sanottava, että nautin todella paljon näiden lisäosien tutkimisesta. Löysimme hämmästyttäviä liukusäätimiä, jotka toivottavasti auttavat sinua työskentelemään seuraavan projektisi parissa tehokkaammin. Täältä löytyy jotain jokaiseen tilanteeseen.

Tässä on niin paljon hämmästyttäviä liukusäätimiä ja diaesityksiä, että on vaikea päättää, mitkä pitäisi paikantaa. Mutta mielestäni sinun pitäisi ehdottomasti tutustua Gridder-slidereihin, koska on todella hämmästyttävää, mitä se voi tehdä, varsinkin ilmaiseksi, joten se on win-win-tilanne.

Eikä missään nimessä pidä unohtaa Slideaa. Kyllä, se on premium-liukusäädin, mutta siinä on niin paljon arvoa, että se on sijoituksen arvoinen!

Jos pidit artikkelistamme, jaa se ystäviesi kanssa ja kerro meille, jos meiltä jäi huomaamatta suosikkiliukusäätimesi.

Mikä on suosikkigalleriapluginisi? Kuulisimme mielellämme kokemuksiasi!

Toimittajan huomautus: tämä artikkeli on päivitetty viimeksi 26. elokuuta 2020.