Valikoima mukautuvia liukusäätimiä. Mielenkiintoinen liukusäädin jQuery jQuery -laajennuksessa "Scale Carousel"

1. Erinomainen jQuery-diaesitys

Suuri, näyttävä diaesitys jQuery-tekniikoilla.

2. jQuery-laajennus "Scale Carousel"

Skaalautuva diaesitys jQuerylla. Voit määrittää itsellesi parhaiten sopivat diaesityksen koot.

3. jQuery-laajennus "slideJS"

Kuvan liukusäädin tekstikuvauksella.

4. Plugin "JSliderNews"

5. CSS3 jQuery -liukusäädin

Kun viet hiiren navigointinuolien päälle, seuraavan dian pyöreä pikkukuva tulee näkyviin.

6. Hieno jQuery "Esityssykli" -liukusäädin

jQuery-liukusäädin, jossa on kuvan latausilmaisin. Automaattinen liukumäki on käytettävissä.

7. jQuery-laajennus "Parallax Slider"

Liukusäädin tilavuustaustatehosteella. Tämän liukusäätimen kohokohta on taustan liike, joka koostuu useista kerroksista, joista jokainen vierii eri nopeudella. Tuloksena on tilavuusvaikutelman jäljitelmä. Se näyttää erittäin kauniilta, voit nähdä itse. Vaikutus näkyy tasaisemmin selaimissa, kuten Opera, Google Chrome,IE.

8. Tuore, kevyt jQuery-liukusäädin "bxSlider 3.0"

Esittelysivun "esimerkit"-osiosta löydät linkit kaikkiin mahdollisia vaihtoehtoja käyttämällä tätä laajennusta.

9. jQuery-kuvan liukusäädin, "slideJS"-laajennus

Tyylikäs jQuery-liukusäädin voi varmasti koristella projektiasi.

10. jQuery-diaesityslaajennus "Easy Slides" v1.1

Helppokäyttöinen jQuery-laajennus diaesitysten luomiseen.

11. jQuery Slidy -laajennus

Helppo jQuery-laajennus erilaisissa malleissa. Automaattinen liukujen vaihto on saatavilla.

12. jQuery CSS -galleria automaattisella dian vaihtamisella

Jos vierailija ei napsauta "Eteenpäin"- tai "Takaisin"-nuolia tietyn ajan kuluessa, galleria alkaa rullata automaattisesti.

13. jQuery-liukusäädin "Nivo Slider"

Erittäin ammattimainen, laadukas, kevyt laajennus voimassa olevalla koodilla. Saatavilla on monia erilaisia ​​diasiirtymätehosteita.

14. jQuery-liukusäädin "MobilySlider"

Tuore liukusäädin. jQuery-liukusäädin erilaisilla kuvanvaihtotehosteilla.

15. jQuery Plugin "Slider²"

Kevyt liukusäädin automaattisella liukusäätimellä.

16. Tuore javascript-liukusäädin

Liukusäädin automaattisella kuvanvaihdolla.

Plugin diaesitysten toteuttamiseen automaattisella dianvaihdolla. Näyttöä on mahdollista ohjata pikkukuvien avulla.

jQuery CSS -kuvan liukusäädin NivoSlider-laajennuksella.

19. jQuery-liukusäädin "jShowOff"

Sisällön kiertolaajennus. Kolme käyttövaihtoehtoa: ilman navigointia (automaattinen diaesitysmuodon vaihtaminen), navigointi painikkeiden muodossa, navigointi pikkukuvien muodossa.

20. "Shutter Effect Portfolio" -laajennus

Tuore jQuery-laajennus valokuvaajan portfolion suunnitteluun. Galleriassa on mielenkiintoinen vaikutus kuvien vaihtamiseen. Valokuvat seuraavat toisiaan objektiivin sulkimen toiminnan kaltaisella vaikutuksella.

21. Kevyt javascript CSS -liukusäädin "TinySlider 2"

Kuvan liukusäätimen toteutus Javascriptin ja CSS:n avulla.

22. Mahtava liukusäädin "Tinycircleslider"

Tyylikäs pyöreä liukusäädin. Siirtyminen kuvien välillä suoritetaan vetämällä liukusäädintä punaisen ympyrän muodossa kehän ympärillä. Se sopii täydellisesti verkkosivustollesi, jos käytät suunnittelussasi pyöreitä elementtejä.

23. Kuvan liukusäädin jQuerylla

Kevyt liukusäädin "Slider Kit". Liukusäädintä on saatavana eri malleina: pysty- ja vaakasuuntaisina. Erilaisia ​​navigointimuotoja kuvien välillä on myös toteutettu: "Eteenpäin"- ja "Takaisin"-painikkeilla, hiiren rullalla, hiiren klikkaamalla diaa.

24. Galleria miniatyyreineen "Slider Kit"

Galleria "Slider Kit". Pikkukuvien vieritys tapahtuu sekä pysty- että vaakasuunnassa. Siirtyminen kuvien välillä suoritetaan käyttämällä: hiiren rullaa, hiiren napsautusta tai viemällä kursori pikkukuvan päälle.

25. jQuery-sisällön liukusäädin "Slider Kit"

Pysty- ja vaakasisällön liukusäädin jQueryn avulla.

26. jQuery-diaesitys "Slider Kit"

Diaesitys automaattisella dian vaihdolla.

27. Kevyt ammattimainen javascript CSS3 -liukusäädin

Siisti jQuery- ja CSS3-liukusäädin, joka luotiin vuonna 2011.

jQuery-diaesitys pikkukuvilla.

29. Yksinkertainen jQuery-diaesitys

Diaesitys navigointipainikkeilla.

30. Mahtava jQuery "Skitter" -diaesitys

jQuery Skitter -laajennus upeiden diaesitysten luomiseen. Plugin tukee 22 (!) tyyppistä erilaista animaatiotehostetta kuvia vaihdettaessa. Voi toimia kahdella dian navigointivaihtoehdolla: käyttämällä diojen numeroita ja käyttämällä pikkukuvia. Muista katsoa demo, erittäin laadukas löytö. Käytetyt tekniikat: CSS, HTML, jQuery, PHP.

31. Diaesitys "Kyllä"

Toimiva diaesitys. Diat voivat olla muodoltaan: yksinkertaisia ​​kuvia, kuvia kuvateksteillä, kuvia työkaluvihjeillä, videoita. Voit käyttää nuolia, dian numerolinkkejä ja näppäimistön vasen/oikea-näppäimiä navigointiin. Diaesityksestä on useita versioita: pikkukuvien kanssa ja ilman. Näet kaikki vaihtoehdot napsauttamalla esittelysivun yläosassa olevia linkkejä Demo #1 - Demo #6.

Erittäin omaperäinen muotoilu kuvan liukusäätimelle, joka muistuttaa tuuletinta. Animoitu diasiirtymä. Kuvien välillä liikkuminen tapahtuu nuolilla. Siinä on myös automaattinen vaihto, joka voidaan kytkeä päälle ja pois päältä yläreunassa olevalla Play/Pause-painikkeella.

Animoitu jQuery-liukusäädin. Taustakuvat skaalautuvat automaattisesti, kun selainikkunan kokoa muutetaan. Jokaisen kuvan kohdalla näkyy lohko, jossa on kuvaus.

34. "Flux Slider" -liukusäädin jQueryn ja CSS3:n avulla

Uusi jQuery-liukusäädin. Useita hienoja animoituja tehosteita dioja vaihdettaessa.

35. jQuery-laajennus "jSwitch"

Animoitu jQuery-galleria.

Kevyt jQuery-diaesitys automaattisella dianvaihdolla.

37. SlideDeck 1.2.2 -laajennuksen uusi versio

Ammattimainen sisällön liukusäädin. Vaihtoehtoja on automaattinen diojen vaihtaminen sekä vaihtoehto hiiren rullalla siirtymiseen diojen välillä.

38. jQuery-liukusäädin "Sudo Slider"

Kevyt kuvan liukusäädin jQueryllä. Toteutusvaihtoehtoja on paljon: kuvien vaaka- ja pystysuuntainen vaihtaminen, linkeillä dianumeroon ja ilman, kuvateksteillä ja ilman, erilaisia ​​kuvanvaihtotehosteita. On toiminto automaattinen muutos dioja. Linkit kaikkiin toteutusesimerkkeihin löytyvät esittelysivulta.

39. jQuery CSS3 -diaesitys

Pikkukuvilla varustettu diaesitys tukee automaattista diojen vaihtotilaa.

40. jQuery-liukusäädin "Flux Slider"

Liukusäädin, jossa on monia kuvanvaihtotehosteita.

41. Yksinkertainen jQuery-liukusäädin

Tyylikäs kuvan liukusäädin jQueryllä.

Temdo Slider on tehokas ja helppokäyttöinen työkalu kauniiden liukusäätimien luomiseen verkkosivustollesi. Liukusäätimen tärkeimmät ominaisuudet:

• Voit valita jokaisen dian taustaksi minkä tahansa kuvan tai videon.
• Ylimääräinen peittokuva
• Rullaava animaatio
• Animaatio dioja vaihdettaessa

Jos haluat luoda kauniin "klassisen" liukusäätimen (tausta, enintään kaksi ylimääräistä graafista kerrosta, otsikko, alaotsikko, teksti ja enintään kaksi painiketta jokaisessa diassa), on suositeltavaa käyttää Temdo Slideriä, varsinkin jos tarvitset koko näytön liukusäätimiä ja taustavideoita.

Liukusäätimen luominen

Luo uusi liukusäädin valitsemalla WordPress Dashboardin vasemmasta valikosta Liukusäädin > Lisää uusi dia:

Diatyyppi

Dian perusasetus on taustatyyppi (kuva tai video). Tämän parametrin valinnasta riippuen dia-asetusten käyttöliittymä muuttuu: kun valitaan video asetusryhmän sijaan Staattinen tausta ryhmä tulee näkyviin Animoitu tausta.

Dia tausta

Valitse diallesi taustakuva. Muista, että taustakuvaa venytetään täyttämään koko näytön leveys (kuvasuhde säilytetään). Siksi on suositeltavaa käyttää kuvia Täysi resoluutio HD (1920 x 1080 pikseliä). Jos haluat, ettei liukusäädin peitä koko näytön korkeutta, sinun on asetettava korkeus liukusäätimen asetuksista.

Peittokuva

Käytä tätä vaihtoehtoa peittääksesi lisäkuvan läpinäkyvällä tai puoliläpinäkyvällä taustalla päätaustakuvan päälle. Päällekkäinen kuva kopioidaan koko dian pinnalle tekstuurina.

Taustaanimaatio

Ota tämä vaihtoehto käyttöön, jos haluat animoida taustakuvan. Kun se on otettu käyttöön, seuraavat animaatiotyypit tulevat saataville:

• Suurennus suhteessa keskustaan ​​(oletus)
• Suurennus suhteessa vasempaan yläkulmaan
• Suurennus suhteessa oikeaan yläkulmaan
• Suurennus suhteessa vasempaan alakulmaan
• Suurennus suhteessa oikeaan alakulmaan

Taustavideo

Temdo-liukusäädin tukee webm-, mp4- ja ogg-videomuotoja.

Jos haluat käyttää videota taustana, sinun on ensin ladattava se sivustosi mediakirjastoon. Voit tehdä tämän valitsemalla kohteen WordPress-konsolin vasemmasta paneelista Mediatiedostot > Lisää uusi. Kun videon lataus on valmis, kopioi sen URL-osoite leikepöydälle ja palaa dian muokkaamiseen. Liitä polku videotiedostoon leikepöydältä dia-asetusten sopivaan osioon. On suositeltavaa, että käytät videota kaikissa kolmessa muodossa aina kun mahdollista, jotta tuettaisiin mahdollisimman monia nykyaikaisia ​​selaimia.

Dian ominaisuudet

Tässä osiossa määritetään dian perusparametrit:

• Otsikoiden suunnittelu: Voit valita vaalean kuvion tummalle taustalle tai tumman kuvion kontrastin otsikkoon vaaleaa taustaa vasten.
• Navigointiväri: valitse liukusäätimen alareunassa olevien vasen-oikea-nuolien ja navigointipisteiden väri
• Osioon vierittäminen: näytä nuoli, jota napsautettu vierittää sivun määritettyyn paikkaan. Anna ankkurin nimi, esimerkiksi '#contact'
• Älä näytä otsikkoa: Ota tämä vaihtoehto käyttöön, jos et halua otsikon näkyvän tässä diassa.
• Älä näytä otsikon varjoa: Poista tämän dian otsikon varjo käytöstä.
• Graafinen animaatio: Valitse diakuvaasi kahdesta animaatiotehosteesta
• Sisällön animaatio: Valitse kahdesta tavasta animoida otsikko, tekstitys, teksti ja painikkeet

Dian sisällön tyylin asettaminen

Diatekstin sisällön tyyliasetukset (otsikko, alaotsikko ja teksti) asetetaan vastaaviin asetusryhmiin:

• Dian otsikko
• Liu'uta tekstitys
• Dia teksti

Jokaisessa näistä ryhmistä voit määrittää kunkin elementin fontin, värin, koon ja muut tyyliparametrit.

Grafiikka ja SVG-grafiikka

Täältä voit ladata ylimääräisen graafisen elementin (), sekä vektorigrafiikkaa SVG-muodossa. Voit asettaa kullekin näistä elementeistä linkin, joka avautuu, kun napsautat elementtiä.

Painikkeet liukumäellä

Tässä osiossa voit asettaa parametreja yhdelle tai kahdelle painikkeelle:

• Painikkeen teksti
• Linkki
• Hover-animaatio
• Kuvake

Diaanimaatio vierittäessä

Tässä osiossa voit ottaa animaation käyttöön ja poistaa sen käytöstä, kun selaat dian koko sisältöä tai yksittäisiä elementtejä liukumäki. Halutessasi (ja pystyt) voit valmistaa hienosäätöä animaatioita CSS-tyyleillä.

Dian tallentaminen

Ennen kuin tallennat dian, lisää se yhteen tai useampaan liukusäätimeen valitsemalla sopivat valintaruudut Liukusäätimet-osiossa. Jos sinulla ei vielä ole liukusäätimiä, napsauta linkkiä + Lisää uusi liukusäädin:

Jos sinun on lisättävä sivustollesi laadukas jQuery-kuvaliukusäädin, tästä artikkelista löydät kuvauksen tarvittavista laajennuksista. Vaikka JQuery on tehnyt JavaScriptin kanssa työskentelystä paljon helpompaa, tarvitsemme silti laajennuksia web-suunnitteluprosessin nopeuttamiseksi.

Voimme tehdä muutoksia joihinkin näistä laajennuksista ja luoda uusia liukusäätimiä, jotka sopivat paljon paremmin sivustomme tarkoituksiin.

Muissa liukusäätimissä voit yksinkertaisesti lisätä otsikoita, kuvia ja valita liukusäätimen mukana tulevia dian siirtymätehosteita. Kaikkien näiden lisäosien mukana tulee yksityiskohtainen dokumentaatio, joten uusien tehosteiden tai toimintojen lisääminen niihin ei ole vaikeaa. Voit jopa muuttaa tapahtumapohjaisia ​​laukaisimia, jos olet kokenut JQuery-ohjelmoija.

Uusimmat trendit, kuten responsiivinen suunnittelu, ovat erittäin tärkeitä verkkoprojekteissa, olitpa sitten toteuttamassa laajennusta tai komentosarjaa. Kaikki nämä elementit tekevät jokaisesta näistä laajennuksista erittäin joustavia. Kaikki vuonna 2014 ilmestynyt sisältyy tähän luetteloon.

jQuery-kuvan liukusäätimet

Jssor Responsive Slider

Törmäsin äskettäin tähän tehokkaaseen JQuery-liukusäätimeen ja näin omakohtaisesti, että se tekee työnsä erittäin hyvin. Se sisältää rajattomat mahdollisuudet, joita voidaan laajentaa liukusäätimen avoimen lähdekoodin kautta:

• Mukautuva suunnittelu;
• Yli 15 mukautusvaihtoehtoa;
• Yli 15 kuvanvaihtotehostetta;
• Kuvagalleria, karuselli, koko näytön koon tuki;
• Pystysuuntainen bannerirotaattori, diojen luettelo;
• Videotuki.

Demo | Lataa

PgwSlider - reagoiva liukusäädin, joka perustuu JQueryyn/Zeptoon

Tämän laajennuksen ainoa tehtävä on näyttää kuvien dioja. Se on erittäin kompakti, koska JQuery-tiedostot ovat kooltaan vain 2,5 kt, joten se latautuu todella nopeasti:

• Mukautuva asettelu;
• SEO-optimointi;
• Tuki eri selaimille;
• Yksinkertaiset kuvansiirrot;
• Arkiston koko on vain 2,5 kt.

Demo | Lataa

Jquery Vertical News Slider

Joustava ja hyödyllinen JQuery-liukusäädin, joka on suunniteltu uutisresursseihin, jonka vasemmalla puolella on julkaisuluettelo ja oikealla kuva:

• Mukautuva suunnittelu;
• Pysty sarake uutisten vaihtamista varten;
• Laajennetut otsikot.

Demo | Lataa

Wallop Slider

Tämä liukusäädin ei sisällä jQueryä, mutta haluaisin esitellä sen, koska se on erittäin kompakti ja voi merkittävästi lyhentää sivun latausaikaa. Kerro minulle, jos pidät siitä:

• Mukautuva asettelu;
• Yksinkertainen muotoilu;
• Erilaisia ​​diojen vaihtovaihtoehtoja;
• Minimaalinen JavaScript-koodi;
• Koko on vain 3KB.

Demo | Lataa

Tasainen Polaroid-galleria

Pöydällä hajallaan olevan gallerian, jossa on joustava asettelu ja kaunis muotoilu, pitäisi kiinnostaa monia teistä. Sopii paremmin tableteille ja suurille näytöille:

• Mukautuva liukusäädin;
• Litteä muotoilu;
• Satunnainen dian vaihto;
• Täysi pääsy lähdekoodiin.

Demo | Lataa

A-liukusäädin

Demo | Lataa

HiSlider – HTML5-, jQuery- ja WordPress-kuvan liukusäädin

HiSlider on esitellyt uuden ilmaisen jQuery-liukusäädinlaajennuksen, jonka avulla voit luoda erilaisia ​​kuvagallerioita upeilla siirtymillä:

• Mukautuva liukusäädin;
• Ei vaadi ohjelmointiosaamista;
• Useita uskomattomia malleja ja skinejä;
• Kauniit siirtymäefektit;
• Tuki eri alustoille;
• Yhteensopiva WordPressin, Joomlan, Drupalin kanssa;
• Mahdollisuus näyttää sisältöä eri tyyppejä: kuvat, YouTube-video ja Vimeo-videot;
• Joustava asennus;
• Hyödyllisiä lisäominaisuuksia;
• Rajoittamaton määrä näytettävää sisältöä.

Demo | Lataa

Vau liukusäädin

WOW Slider on responsiivinen jQuery-kuvan liukusäädin, jossa on hämmästyttäviä visuaalisia tehosteita ( domino, pyöritä, hämärtää, kääntää ja välähtää, lentää ulos, kaihtimet) ja ammattimaisia ​​malleja.

WOW Sliderin mukana tulee ohjattu asennustoiminto, jonka avulla voit luoda upeita liukusäätimiä sekunneissa ilman, että sinun tarvitsee ymmärtää koodia tai muokata kuvia. Joomlan ja WordPressin laajennuksen versiot ovat myös ladattavissa:

• Täysin reagoiva;
• Tukee kaikkia selaimia ja kaikentyyppisiä laitteita;
• Kosketuslaitteiden tuki;
• Helppo asennus WordPressiin;
• Joustavuus kokoonpanossa;
• SEO-optimoitu.

Demo | Lataa

Nivo Slider – ilmainen jQuery-laajennus

Nivo Slider tunnetaan kaikkialla maailmassa kauneimpana ja helppokäyttöisimpänä kuvan liukusäätimenä. Nivo Slider -laajennus on ilmainen ja julkaistu MIT-lisenssillä:

• Vaatii JQuery 1.7:n ja uudemman;
• Kauniit siirtymäefektit;
• Yksinkertainen ja joustava konfiguroida;
• Kompakti ja mukautuva;
• Avoin lähdekoodi;
• Tehokas ja yksinkertainen;
• Useita erilaisia ​​malleja;
• Automaattinen kuvan rajaus.

Demo | Lataa

Yksinkertainen jQuery-liukusäädin teknisellä dokumentaatiolla

Idea sai inspiraationsa Applen liukusäätimistä, joissa useita pieniä elementtejä voi lentää ulos erilaisilla animaatiotehosteilla. Kehittäjät yrittivät toteuttaa tämän konseptin ottaen huomioon vähimmäisvaatimukset luoda yksinkertainen verkkokauppasuunnittelu, jossa "lentävät" elementit edustavat eri luokkia:

• Mukautuva asettelu;
• Minimalistinen muotoilu;
• Erilaisia ​​pudotus- ja liukuvaikutuksia.

Demo | Lataa

Täysikokoinen jQuery-kuvan liukusäädin

Hyvin yksinkertainen liukusäädin, joka vie 100 % sivun leveydestä ja mukautuu näytön kokoihin mobiililaitteet. Se toimii CSS-siirtymien kanssa, ja kuvat "pinotaan" ankkurien kanssa. Ankkurin voi vaihtaa tai poistaa, jos et halua liittää kuvaan linkkiä.

Kun liukusäädin on asennettu, se laajenee 100 prosenttiin näytön leveydestä. Se voi myös automaattisesti pienentää diakuvien kokoa:

• Mukautuva JQuery-liukusäädin;
• Täysi koko;
• Minimalistinen muotoilu.

Demo | Lataa

Joustava sisällön liukusäädin + opetusohjelma

Elastinen sisällön liukusäädin säätää automaattisesti leveyden ja korkeuden pääelementin mittojen mukaan. Tämä on yksinkertainen jQuery-liukusäädin. Se koostuu yläosassa olevasta liukualueesta ja alareunassa olevasta navigointivälilehdestä. Liukusäädin säätää leveyttä ja korkeutta pääsäiliön mittojen mukaan.

Pienillä diagonaalisilla näytöillä katsottuna navigointivälilehdet muuttuvat pieniksi kuvakkeiksi:

• Mukautuva suunnittelu;
• Vieritys hiiren napsautuksella.

Demo | Lataa

Ilmainen 3D Stack Slider

Kokeellinen liukusäädin, joka selaa kuvia 3D-muodossa. Kaksi pinoa muistuttavat paperipinoja, joista rullattaessa näkyvät kuvat liukusäätimen keskellä:

• Mukautuva suunnittelu;
• Flip - siirtyminen;
• 3D tehosteita.

Demo | Lataa

Fullscreen Slit Slider perustuu JQueryyn ja CSS3 + opetusohjelmaan

Tämä opetusohjelma näyttää, kuinka voit luoda liukusäätimen kierteellä: ideana on "leikata" ja näyttää nykyinen dia, kun avaat seuraavan tai edellisen kuvan. JQueryn ja CSS-animaatioiden avulla voimme luoda ainutlaatuisia siirtymätehosteita:

• Mukautuva suunnittelu;
• Jaettu siirtyminen;
• Koko näytön liukusäädin.

Demo | Lataa

Unislider - erittäin pieni jQuery-liukusäädin

Ei tarpeettomia kelloja ja pillejä, kooltaan alle 3 kt. Käytä dioissa mitä tahansa HTML-koodia ja laajenna sitä käyttämällä CSS:ää. Kaikki Unslideriin liittyvä isännöi GitHubissa:

• Tuki eri selaimille;
• Näppäimistön tuki;
• Korkeuden säätö;
• Mukautuva suunnittelu;
• Kosketussyöttötuki.

Demo | Lataa

Minimaalinen responsiivinen dioja

Yksinkertainen ja kompakti laajennus ( koko on vain 1 kt), joka luo mukautuva liukusäädin käyttämällä säiliön sisällä olevia elementtejä. ResponsiveSLides.js toimii useiden selaimien kanssa, mukaan lukien kaikki IE:n versiot IE6:sta ja uudemmista:

• Täysin reagoiva;
• Koko 1 KB;
• CSS3-siirtymät, jotka voidaan suorittaa JavaScriptin kautta;
• Yksinkertainen merkintä luettelomerkeillä;
• Mahdollisuus mukauttaa siirtymätehosteita ja yhden dian katseluaikaa;
• Tukee kykyä luoda useita diaesityksiä;
• Automaattinen ja manuaalinen vieritys.

Demo | Lataa

Kamera - ilmainen jQuery-liukusäädin

Kamera on laajennus, jossa on monia siirtymätehosteita ja reagoiva asettelu. Helppo asentaa, mobiililaitteiden tukema:

• Täysin reagoiva suunnittelu;
• Allekirjoitukset;
• Mahdollisuus lisätä videoita;
• 33 eri väristä kuvaketta.

Demo | Lataa

SlidesJS, reagoiva jQuery-laajennus

SlidesJS on JQueryn (1.7.1 ja uudemmat) responsiivinen laajennus, joka tukee kosketuslaitteita ja CSS3-siirtymiä. Kokeile sitä, kokeile muutamia valmiita esimerkkejä, jotka auttavat sinua selvittämään, kuinka SlidesJS lisätään projektiisi:

• Mukautuva suunnittelu;
• CSS3-siirtymät;
• Kosketuslaitteiden tuki;
• Helppo asentaa.

Demo | Lataa

BX Jquery -liukusäädin

Tämä on ilmainen reagoiva jQuery-liukusäädin:

• Täysin reagoiva - mukautuu mihin tahansa laitteeseen;
• Vaaka-, pystysuora liukujen vaihto;
• Diat voivat sisältää kuvia, videoita tai HTML-sisältöä;
• Laajennettu tuki kosketuslaitteille;
• CSS-siirtymien käyttäminen diaanimaatiossa ( laitteistokiihdytystä);
• API takaisinkutsut ja täysin julkiset menetelmät;
• Pieni tiedostokoko;
• Helppo toteuttaa.

Demo | Lataa

FlexSlider 2

Paras responsiivinen liukusäädin. Uusi versio muutettiin lisäämään nopeutta ja kompaktia.

Demo | Lataa

Galleria - JavaScript-pohjainen responsiivinen valokuvagalleria

Galleriaa käytetään miljoonilla sivustoilla kuvagallerioiden luomiseen korkea laatu. Myönteisten arvostelujen määrä hänen työstään on yksinkertaisesti poissa taulukoista:

• Täysin ilmainen;
• Koko näytön katselutila;
• 100 % mukautuva;
• Ohjelmointikokemusta ei vaadita;
• Tuki iPhonelle, iPadille ja muille kosketuslaitteille;
• Flickr, Vimeo, YouTube ja paljon muuta;
• Useita aiheita.

Demo | Lataa

Blueberry - yksinkertainen reagoiva jQuery-kuvan liukusäädin

Esittelen sinulle jQuery-kuvan liukusäätimen, joka on kirjoitettu erityisesti responsiiviseen web-suunnitteluun. Blueberry on kokeellinen avoimen lähdekoodin kuvan liukusäädinlaajennus lähdekoodi, joka on kirjoitettu erityisesti toimimaan responsiivisten mallien kanssa.

Kerro minulle, onko mahdollista tehdä taustakuvan liukusäädintä liukusäätimellä?
Google ei auta (dokumentaatiossa sanotaan, että kuvat on sijoitettava div-lohkoon. Mutta entä taustakuvat?

@charset utf-8; html,body,div,span,sovelma,objekti,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, lyhenne,osoite,big,cite,code,del,dfn, em,font,img,ins,kbd,q,s,samp,small, strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li, kenttäjoukko,lomake,tarra, selite,taulukko,teksti,tbody,tfoot,thead,tr,th,td(tausta: ei mitään toista vieritys 0 0 läpinäkyvä; reuna: 0 ei mitään; fontin koko: 100%; ääriviivat: 0 ei mitään; pystytasaus: perusviiva;marginaali: 0;täyttö: 0;)taulukko(reunuksen tiivistys: tiivistys;reunuksen väli: 0;) osoite,artikkeli,sivu,kanvas,tiedot,kuvanotsikko,kuva,alatunniste,otsikko,hryhmä, nav, osio, yhteenveto(näyttö: lohko;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box ) a, a:hover, button, button:hover, .anime ( -moz-transition:all 200ms lineaarinen; -ms-transition:all 200ms lineaarinen; -o-transition:all 200ms lineaarinen; -webkit- siirtyminen: kaikki 200 ms lineaarinen siirtyminen: kaikki 200 ms: osoitin 12vw;

Erikseen käytettynä CSS3 ja jQuery tarjoavat laajan valikoiman ominaisuuksia. Mutta jos niitä käytetään yhdessä... Silloin ne voivat tehdä vaikutuksista todella vaikuttavia. Joskus ongelmana tulee, kuinka montaa yhteistä teemaa sisältävää kuvaa tai valokuvaa järjestettäisiin paremmin ja luovemmin yhteen paikkaan. Vaihtoehtoisesti voit luoda liukusäätimen (varsinkin koska niitä on valtava määrä). Mutta tässä opetusohjelmassa luomme interaktiivisen 3D-gallerian käyttämällä CSS3:a ja jQueryä. Selvittääksesi sen nopeasti ja käyttääksesi liukusäädintä verkkosivustollasi, suosittelen demoversion lataamista (se on saatavilla myös koko uutisessa) ja yksinkertaisesti tekemällä se analogisesti esimerkissä.

Todellinen esimerkki löytyy täältä:

Lataa

HTML-osa - Mielenkiintoinen jQuery-liukusäädin

Kontti luokan kanssa pää käytetään näyttämiseen tausta. Ja sitten lohkoon, jossa on tunniste immersive_slider, voit lisätä niin monta dioja kuin tarvitset. Diojen läpi liikkumisen painikkeet voidaan poistaa, jos et tarvitse niitä:

jQuery osa

Kuten olet ehkä huomannut liukusäätimen esimerkkiä tarkastellessasi, on olemassa erilaisia ​​. Kaikki näiden siirtymien asetukset ovat yllä olevassa toiminnossa. Katsotaanpa näitä asetuksia:

• animaatio— arvo, joka määrittää, kuinka diat muuttuvat. Hyväksyy arvot "fade", "slide" tai "bounce". Ja jos haluat tehdä pystysuuntaisen muutoksen dioissa, sinun on syötettävä "slideUp" tai "bounceUp".
• diaValitsin— valitsin lohkojen valintaa varten dioilla.
• kontti— Tämä ominaisuus määrittää pääsäiliön, jonka tausta muuttuu.
• cssBlur Tämä on kokeilutoiminto. Jos et halua määrittää sumennusta, älä aseta tätä ominaisuutta.
• sivunumerointi— aktivoi navigoinnin.
• automaattinen käynnistys— diaesityksen automaattinen käynnistys.