Mukautettu kuvan liukusäädin jQuerylla. Liukusäätimen tekeminen JavaScriptissä omin käsin

Aika ei pysähdy ja edistyy sen mukana. Tämä vaikutti myös Internetiin. Voit jo nähdä kuinka se muuttuu ulkomuoto sivustot ovat erityisen suosittuja mukautuva muotoilu. Ja tässä suhteessa uusia on ilmestynyt melkoisesti mukautuvat jquery-liukusäätimet, galleriat, karusellit tai vastaavat laajennukset.
1. Responsiiviset vaakaviestit -liukusäädin

Mukautuva vaakakaruselli yksityiskohtaiset ohjeet asennuksen yhteydessä. Se valmistui vuonna yksinkertainen tyyli, mutta voit muotoilla sen itsellesi sopivaksi.

2. Liukusäädin Glide.js:ssä

Tämä liukusäädin sopii kaikille verkkosivustoille. Se käyttää Glide.js:ää avoin lähdekoodi. Liukusäätimen värejä voidaan helposti vaihtaa.

3. Kallistuva sisällön diaesitys

Responsiivisen sisällön liukusäädin. Tämän liukusäätimen kohokohta on kuvien 3D-tehoste sekä erilaiset satunnaisen ulkonäön animaatiot.

4. Liukusäädin HTML5-kankaalla

Erittäin kaunis ja vaikuttava liukusäädin interaktiivisilla hiukkasilla. Se tehtiin HTML5-kanvaalla,

5. Image Morphing Slider

Liukusäädin morph-efektillä ( Sujuva muunnos kohteesta toiseen). SISÄÄN tässä esimerkissä Liukusäädin sopii hyvin web-kehittäjän portfolioon tai portfolion muodossa olevaan web-studioon.

6. Pyöreä liukusäädin

Ympyrän muotoinen liukusäädin kuvaa kääntämällä.

7. Liukusäädin epäselvällä taustalla

Mukautuva liukusäädin vaihdolla ja taustan hämärtymisellä.

8. Mukautuva muoti liukusäädin

Yksinkertainen, kevyt ja reagoiva verkkosivuston liukusäädin.

9. Slicebox - jQuery 3D -kuvan liukusäädin(PÄIVITETTY)

Slicebox-liukusäätimen päivitetty versio korjauksilla ja uusilla ominaisuuksilla.

10. Ilmainen animoitu responsiivinen kuvaruudukko

JQuery-laajennus luomiseen joustava verkko kuvia, jotka vaihtavat kuvia käyttämällä erilaisia ​​animaatioita ja ajoituksia. Tämä saattaa näyttää hyvältä taustana tai koristeellinen elementti sivustolla, koska voimme määrittää uusien kuvien valikoivan ulkoasun ja niiden siirtymät. Laajennuksesta on saatavana useita versioita.

11.Flex liukusäädin

Universaali ilmainen plugin verkkosivustollesi. Tästä laajennuksesta on saatavana useita liukusäädin- ja karusellivaihtoehtoja.

12. Valokuvakehys

Fotorama- Tämä yleinen laajennus. Siinä on monia asetuksia, kaikki toimii nopeasti ja helposti, ja voit katsella dioja koko näytöllä. Liukusäädintä voidaan käyttää molemmissa kiinteä koko ja mukautuva, pikkukuvien kanssa ja ilman, pyöreällä vierityksellä ja ilman ja paljon muuta.

P.S.Asensin liukusäätimen useita kertoja ja mielestäni se on yksi parhaista

13. Ilmainen ja mukautuva 3D-liukusäädingalleria pikkukuvilla.

Kokeellinen gallerian liukusäädin 3DPanelLayout verkolla ja mielenkiintoisia tehosteita animaatio.

14. Css3:n liukusäädin

Responsiivinen liukusäädin, joka on tehty css3:lla sileä ulkonäkö sisältöä ja kevyttä animaatiota.

15. WOW liukusäädin

WOW liukusäädin on kuvan liukusäädin hämmästyttävällä erikoistehosteet.

17. Joustava

Joustava liukusäädin, jossa on täydellinen reagointikyky ja diojen pikkukuvat.

18. Halko

Tämä on koko näytön responsiivinen liukusäädin, joka käyttää css3-animaatiota. Liukusäädintä valmistetaan kahdessa versiossa. Animaatio on tehty melko epätavallisesti ja kauniisti.

19. Mukautuva valokuvagalleria plus

Yksinkertainen ilmainen liukusäädin-galleria kuvien latauksella.

20. Responsiivinen liukusäädin WordPressille

Mukautuva ilmainen liukusäädin WP:lle.

21. Parallaksi Sisällön liukusäädin

Liukusäädin parallaksiefektillä ja jokaisen elementin hallinta CSS:n avulla 3.

22. Musiikkilinkillä varustettu liukusäädin

Liukusäädin JPlayerin avoimen lähdekoodin avulla. Tämä liukusäädin muistuttaa esitystä, jossa on musiikkia.

23. Liukusäädin, jossa on jmpress.js

Responsiivinen liukusäädin perustuu jmpress.js-tiedostoon, ja sen ansiosta voit lisätä dioihin mielenkiintoisia 3D-tehosteita.

24. Fast Hover Slideshow

Diaesitys kanssa nopea vaihto dioja. Liukukytkin päällä.

25. Kuvaharmonika CSS3:lla

Kuva harmonikka käyttäen css3.

26. Kosketukselle optimoitu gallerialaajennus

Tämä reagoiva galleria joka on optimoitu kosketuslaitteille.

27. 3D-galleria

3D-seinägalleria- luotu varten Safari selain, jossa 3D-tehoste näkyy. Jos katsot sitä toisella selaimella, toiminnallisuus on kunnossa, mutta 3D-tehoste ei näy.

28. Liukusäädin sivunumerolla

Responsiivinen liukusäädin, jossa on sivutus käyttäen JQuery-liukusäädin UI Ajatuksena on käyttää yksinkertaista navigointikonseptia. On mahdollista kelata kaikkia kuvia taaksepäin tai vaihtaa dia kerrallaan.

29. Kuvamontaasi jQuerylla

Järjestä kuvat automaattisesti näytön leveyden mukaan. Erittäin hyödyllinen asia kun kehität portfoliosivustoa.

30. 3D-galleria

Yksinkertainen 3D-pyöreä liukusäädin, joka käyttää css3:a ja jQueryä.

31. Koko näytön tila 3D-tehosteilla css3:n ja jQueryn avulla

Liukusäädin, jossa on mahdollisuus katsella kuvia koko näytöllä kauniilla siirtymällä.

Jokin aika sitten aloin oppia jQueryä. Luulen kaikkien tietävän, että tämä on suosituimman kirjaston nimi JavaScript-skriptien kehittämiseen ja luomiseen. Sen avulla on erittäin helppoa luoda näyttäviä ja interaktiivisia verkkosivuelementtejä.

Tässä artikkelissa haluan kertoa sinulle, kuinka voit luoda yksinkertaisen yleisen liukusäätimen jQueryn avulla. Itse asiassa verkko on erittäin suuri määrä erilaisia ​​valmiita liukusäätimiä, jotka näyttävät joskus erittäin houkuttelevilta ja ovat varsin toimivia, mutta teemme sen tyhjästä.

Joten mitä ominaisuuksia jQuery-liukusäätimestämme (jota kutsuin HWSlideriksi) voidaan huomata?

• Helppokäyttöisyys ja suunnittelu - Halusin luoda yksinkertaisen käsikirjoituksen ilman kelloja ja pillejä, joten en käyttänyt CSS3-animaatioita, ja koodi osoittautui erittäin monipuoliseksi ja ymmärrettäväksi.
• Mahdollisuus lisätä sekä kuvia että mitä tahansa HTML-koodia dioihin.
• Mahdollisuus selata dioja sekä järjestyksessä (eteenpäin - taaksepäin) että valita jokainen dia (1,2,3,4...)
• Automaattisesti luodut linkit (edellinen - seuraava ja diojen numeroilla). Sinun tarvitsee vain lisätä tarvittava määrä divejä, ja kaikki muu lasketaan itsestään. No, voidaan todeta, että diojen määrä on rajoittamaton.

Käsikirjoitus on yhteensopiva kaikkien kanssa nykyaikaiset selaimet: IE, Opera, Firefox, Safari, Chrome, (koska liukusäädin ei käytä CSS3:a).

Aloitetaan HTML-merkintä. SISÄÄN Oikea paikka html-sivuja tai malli on lisättävä.

Täällä kaikki on yksinkertaista, kuten näet, voit lisätä niin monta dioja kuin haluat luomalla uusia divejä. Niiden sisään voi laittaa mitä tahansa. html-koodi, esimerkiksi kuva tai tekstilohko. Älä vain unohda sisällyttää itse jQuery-kirjastoa kaikkien js-skriptien kanssa. Jos et tiedä miten, katso esimerkki.

#slider-wrap( /* Liukusäätimen ja painikkeiden kääre */ width:660px; ) #slider( /* Liukusäätimen kääre */ width:640px; height:360px; overflow: piilotettu; border:#eee solid 10px; position:relative; ) .slide( /* Dia */ leveys:100%; korkeus:100%; ) .sli-links( /* Dian vaihtamispainikkeet */ margin-top:10px; text-align:center;) .sli-links . toista;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position: center top;) #prewbutton, #nextbutton ( /* Linkki "Seuraava" ja "Edellinen" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg) .png) vasemmalla keskellä ei toistoa; opasiteetti: 0,8; z-indeksi: 3; outline:none !tärkeää;) #prewbutton(left:10px;) #nextbutton( right:10px; background:url(arrowBg.png) oikea keski ei toistoa;) #prewbutton:hover, #nextbutton:hover( opacity:1 ;)

Katsotaanpa sitä tarkemmin. Ensin annamme päälohkolle tunnuksella "slider-wrap" halutun leveyden. Koska kaikki muut lohkot on asetettu siihen, korkeutta ei tarvitse määrittää, se riippuu siitä, mitä sisällä on. Sitten meidän on asetettava sen säiliön mitat, johon diat sijoitetaan. Tämä on #liukusäädin. Annetaan sille leveys ja korkeus sekä esimerkiksi 10 pikselin reunus. Tässä leveys on 640 pikseliä, mikä on pienempi kuin ylätason leveys, koska lisäämme 10 kuvapisteen reunukset oikealle ja vasemmalle. Itse diojen (.slide) leveys riippuu myös tämän div:n leveydestä.

Ja viimeinen asia: meidän on asetettava sijainti: suhteellinen diasäiliölle, koska sisällä olevat diot ovat absoluuttisella sijoittelulla. Itse diojen osalta vain leveys ja korkeus asetetaan CSS:ssä. Loput ominaisuudet asetetaan jQuery-komentosarjassa.

Selector.sli-links on lohko, joka sisältää painikkeita haluttuun diaan siirtymistä varten. Nämä painikkeet ovat yksinkertaisia ​​lomakkeen elementtejä määrä, joita lisätään vaadittu määrä automaattisesti yhdessä vanhempien.sli-linkkien kanssa. Asetamme painikkeille kaunis näkymä, eli teemme jokaisesta painikkeesta neliömäisen, kohdistamme ne kaikki keskelle, ja lisäksi ylivuoto: piilotettu ja tekstin sisennys: -9999px ansiosta poistamme tekstin, jättäen vain taustakuvakkeet, jotka myös muuttuvat, kun vie hiiri päälle. tämä elementti kohdistimella. Mukavuuden vuoksi käytin spritejä, jotka vähensivät kuvien määrää.

Seuraava julkaistaan aktiivinen painike. Muutamme vain taustan sijaintia. Suunnittelemme sitten linkit uudelleen niin, että pääset seuraavaan ja edelliseen dioihin. Voit antaa niille minkä tahansa mallin, aivan kuten painikkeita. Nämä linkit lisätään automaattisesti #slideriin. Mutta jotta ne näkyisivät, kysyin heiltä absoluuttinen paikannus ja yläkerros (z-index:3) niin, että ne näkyvät diojen yläpuolella. Mielestäni CSS:ssä kaikki on selkeää ja yksinkertaista: voit muuttaa melkein kaikkia ominaisuuksia suunnitellaksesi liukusäätimen haluamallasi tavalla.

Katsotaan nyt itse skenaariota:

Var hwSlideSpeed ​​= 700; var hwTimeOut = 3000; var hwNeedLinks = tosi; $(document).ready(function(e) ( $(.slide").css(("position" : "absolute", "top":"0", "left": "0")).piilota ().eq(0).show(); var slideCount = $("#slider .slide").size()(clearTimeout(slideTime); .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(nuoli == "seuraava")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = arrow; ) $(.slide").eq( slideNum) .fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("aktiivinen").eq(slideNum). if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#seuraava painike").click(function())( animSlide("seuraava"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(.slide").each(function(index) ( $adderSpan += " " + indeksi + ""; }); $("

Ensinnäkin asetukset tallennetaan muuttujiin: hwSlideSpeed ​​- diojen kääntämisen nopeus, hwTimeOut - aika, jonka jälkeen se tapahtuu automaattinen muutos dia, hwNeedLinks - ohjaa "Seuraava" ja "Edellinen" -linkkejä - jos tämän muuttujan arvo on tosi, nämä linkit näytetään, ja jos epätosi, niitä ei näytetä (kuten kohdassa kotisivu blogini).

Seuraavaksi asennamme tarvittavat CSS-ominaisuudet dioja käyttäen .css()-menetelmää. Pinoamme lohkot, joissa on dioja päällekkäin absoluuttista sijoittelua käyttäen, sitten piilotamme ne kaikki.hide() ja näytämme sitten vain ensimmäisen. Muuttuja slideNum on aktiivisen dian numero, eli laskuri.

jQuery-liukusäätimen päälogiikka on animSlide-toiminto. Se vaatii yhden parametrin. Jos välitämme merkkijonot "seuraavaksi" tai "prew" siihen, se toimii ehdolliset lausunnot ja seuraava tai edellinen dia näytetään vastaavasti. Jos lähetämme numeron arvona, tästä numerosta tulee aktiivinen dia ja se näytetään.

Joten tämä toiminto piilottaa nykyisen div:n, laskee uuden ja näyttää sen.

Huomaa, että .fadeIn()-metodille, joka tekee aktiivisen dian näkyväksi, annetaan toinen argumentti. Tämä on niin kutsuttu takaisinsoittotoiminto. Se suoritetaan, kun dia tulee kokonaan näkyviin. SISÄÄN tässä tapauksessa Tämä tehdään diojen automaattisen vierityksen varmistamiseksi. Alla määritelty rotator-toiminto kutsuu uudelleen animSlide-funktiota siirtyäkseen seuraavaan diaan halutulla aikavälillä: saamme jatkuvan vierityksen varmistavan sulkimen.

Kaikki toimii hyvin, mutta meidän on pysäytettävä automaatio, jos käyttäjä siirtää kohdistimen liukusäätimeen tai painaa painikkeita. Taukomuuttuja luodaan tätä tarkoitusta varten. Jos sen arvo on positiivinen - totta, silloin automaattinen vaihto ei ole. .hover()-menetelmällä määritämme: tyhjennä ajastin, jos se on käynnissä - clearTimeout(slideTime) ja aseta tauko = true. Ja kun olet siirtänyt kohdistimen, sammuta tauko ja suorita rotator()-sulku.

Lisäksi meidän on luotava sivulle uusia elementtejä ja sijoitettava ne oikeaan paikkaan. Käyttämällä kunkin dian (div) silmukkaa (div luokassa .slide) luomme span-elementin, jonka sisällä on numero - dian numero. Tätä numeroa käytetään animaatiotoiminnossa siirtymään tällä numerolla olevaan diaan. Kääritään kaikki diviksi tarvittavat luokat, ja tuloksena saamme seuraavan merkinnän:

Vaikuttaa siltä, ​​miksi luomme merkinnät skriptin sisälle, emme HTML-koodiin? Tosiasia on, että jos käyttäjä on esimerkiksi poistanut komentosarjat käytöstä, hän ei näe elementtejä, jotka eivät toimi, eikä se hämmennä häntä. Lisäksi koodi on yksinkertaistettu, mikä on hyvä SEO:lle.

Tämän seurauksena liukusäätimen asettelu näyttää suunnilleen tältä (käytin kuvia dioina ja asensin niistä 5):

< >

0 1 2 3

Alta näet, kuinka jQuery-liukusäädin toimii demosivulla ja lataa kaikki tarvittavat lähteet.

Lopuksi pari kohtaa tämän liukusäätimen integroinnista Drupaliin. Voit lisätä tämän koodin mallitiedostoon, esimerkiksi tiedostoon page.tpl.php, ja liittää skriptin erillisenä js-tiedostona teemaan. Jquery Drupalissa on oletuksena käytössä, mutta toimii yhteensopivuustilassa (). Parannusvaihtoehtoja on kaksi. Tai kääri koko js-koodi:

(funktio ($) ( // Kaikki koodisi... ))(jQuery);

tai korvaa $-symbolit koko skriptissä jQueryllä. Kuten tämä:

JQuery(document).ready(function(e) ( jQuery(.slide").css(("position" : "absolute", "top":"0", "left": "0")).piilota ().eq(0).show(); var slideCount = jQuery("#slider .slide").size(// jne. .

Esimerkki on jo toteuttanut ensimmäisen menetelmän.

Kiitos lukemisesta! Jätä kommentteja, tule uudestaan. Voit myös tilata RSS-palvelun saadaksesi blogipäivitykset ensimmäisenä!

Lisätty: Ei siinä kaikki. Lukea. Siellä lisäämme tähän skriptiin uusia ominaisuuksia.

Jos sinun on lisättävä sivustollesi korkealaatuinen jQuery-kuvaliukusäädin, tästä artikkelista löydät kuvauksen tarvittavat lisäosat. 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 on 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 | ladata

PgwSlider - reagoiva liukusäädin, joka perustuu JQuery-/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 | ladata

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 | ladata

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 | ladata

Tasainen Polaroid-galleria

Galleria tyyliin asiakirjoja hajallaan pöydälle joustavalla asettelulla ja kaunis muotoilu pitäisi kiinnostaa monia teistä. Sopii paremmin tableteille ja suurille näytöille:

Demo | ladata

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

HiSlider esitteli uuden ilmaisen JQuery-laajennus-liukusäädin, jolla voit luoda erilaisia ​​kuvagallerioita upeilla siirtymillä:

• Mukautuva liukusäädin;
• Ei vaadi ohjelmointiosaamista;
• Useita upeita 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 reagoiva jQuery-liukusäädin kuvia upeilla visuaalisilla tehosteilla ( 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;
• Tuki kosketuslaitteita;
• 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 on saanut 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 luomista varten yksinkertainen muotoilu verkkokauppa, 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" ankkureiden 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

Elastic Content Slider säätää automaattisesti leveyttä ja korkeutta mittojen mukaan pääelementti. 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ä CSS:llä. Kaikki Unslideriin liittyvä isännöi GitHubissa:

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

Demo | ladata

Minimaalinen responsiivinen dioja

Yksinkertainen ja kompakti laajennus ( koko on vain 1 kt), joka luo reagoivan liukusäätimen käyttämällä säilön sisällä olevia elementtejä. ResponsiveSLides.js toimii iso määrä selaimet, mukaan lukien kaikki IE-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 muotoilu;
• Allekirjoitukset;
• Mahdollisuus lisätä videoita;
• 33 erilaisia ​​värejä kuvakkeet

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 muutamaa valmiita esimerkkejä auttaa sinua selvittämään, kuinka SlidesJS lisätään projektiisi:

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

Demo | ladata

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 takaisinsoittoja 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 | ladata

Galleria - JavaScript-pohjainen responsiivinen valokuvagalleria

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

• 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 | ladata

Blueberry - yksinkertainen reagoiva jQuery-kuvan liukusäädin

Esitän sinulle jQuery-kuvan liukusäätimen, joka on kirjoitettu erityisesti tätä varten responsiivinen web-suunnittelu. Blueberry on kokeellinen avoimen lähdekoodin kuvan liukusäädinlaajennus lähdekoodi, joka on kirjoitettu erityisesti toimimaan responsiivisten mallien kanssa:

• Minimaalinen muotoilu;
• Mukautuva asettelu;
• Esitykset.

Demo | ladata

jQuery Popeye 2.1

Käytetään vakioelementtejä ohjelman ensimmäinen versio: liukusäädin katoaa vasemmalle ja ponnahtaa ylös oikealle. Samat navigointielementit ja kuvatekstit, jotka avautuvat hiiren osoitin:

• Mukautuva suunnittelu;
• Allekirjoituksen tuki;
• Diaesitystila.

Demo | ladata

FractionSlider - ilmainen jQuery-liukusäädinlaajennus parallaksiefektillä

Kokeile tätä hämmästyttävää laajennusta. Useiden elementtien animaatio, kun kuvia näytetään kunkin niistä asetuksilla. FractionSlider on jQuery-laajennus kuville tai tekstille. Sen avulla voit animoida useita diaelementtejä kerralla. Voit asentaa erilaisia ​​menetelmiä animaatiot, kuten kehysten vaihtaminen tai liikkuminen tiettyyn suuntaan:

• Mukautuva suunnittelu;
• Elementtien animaatio;
• Hallitse animaatioasetuksia;
• Taustaanimaatio.

Demo | Lataa

Ilmainen responsiivinen kuvan liukusäädin oppaalla

FlexSliderillä voimme muodostaa liukusäädinkoodin " impressionistinen" käyttöliittymä. Laajennuksella voit lisätä toimintoja ja tyylejä CSS3:n kautta. Toivottavasti pidät siitä ja käytät sitä projekteissasi. Listataan sen toiminnot:

• Mukautuva suunnittelu;
• Häivytystehosteet;
• Nuolet vasemmalle, oikealle;
• Vihreät painikkeet.

Demo | Lataa

Sequence on ilmainen laajennus, jossa on CSS3-siirtymiä.

Siinä on neljä teemaa, ja vain kehittyneimmät, kuten Apple-tyylinen liukusäädin ja vaakasuora parallaksiliukusäädin, eivät reagoi:

• Kolme ilmaista teemaa;
• Liukuva vaakasuora parallaksi;
• Apple tyyli;
• Mukautuvat teemat;
• Kosketuslaitteiden tuki;
• Helppo modifiointi;
• Tuki eri selaimille.

Hyvä huono

Tarvitset yksinkertaisen liukusäätimen automaattinen vieritys. Aloitetaan...

Kuvaus liukusäätimen toiminnasta.

Diat asetetaan riviin ja läpi tietty aika rullaa.

Punainen kehys näyttää näkyvä osa liukusäädin.

Liukusäätimen lopussa sinun on kopioitava ensimmäinen dia. Tämä on tarpeen, jotta varmistetaan vieritys kolmannesta diasta ensimmäiseen. Sinun on myös lisättävä viimeinen dia alkuun, jotta voit vierittää taaksepäin ensimmäisestä diasta kolmanteen. Alla on esitetty, kuinka liukusäädin toimii eteenpäin.

Kun liukusäädin saavuttaa lopun, kopio siitä liukusäätimen alusta asetetaan välittömästi viimeisen dian tilalle. Sitten sykli toistuu uudelleen. Tämä luo illuusion loputtomasta liukusäätimestä.

HTML-merkintä

Tehdään ensin yksinkertainen liukusäädin, jossa on automaattinen vieritys. Se vaatii toimiakseen kaksi säiliötä. Ensimmäinen määrittää koon näkyvä alue liukusäädintä, ja toinen tarvitaan liukusäätimien sijoittamiseen siihen. Liukusäätimen asettelu näyttää tältä:

> >

Liukusäätimen tyylit

.slider-box(leveys: 320px; korkeus: 210px; ylivuoto: piilotettu; ) .slider( position : suhteellinen; leveys: 10000px; korkeus: 210px; ) .slider img( float : left :; z-index

Container.slider-box määrittää liukusäätimen mitat. Overflow:hidden -ominaisuuden avulla kaikki elementit, jotka eivät sisälly elementin sisällä olevaan alueeseen, piilotetaan.


Slider.slider on asetettu suuri leveys. Tämä on välttämätöntä, jotta kaikki diat mahtuvat linjaan.

Diat tasataan float:left-ominaisuuden avulla.

Alla on liukusäätimen lohkojen kaavamainen asettelu.



Käsikirjoitus

Diat liikkuvat käyttämällä tasainen muutos Container.sliderin margin-vasen ominaisuudet.

$(funktio () ( var leveys= $(".slider-box" ) .width () ; // Liukusäätimen leveys. intervalli = 4000 ; // Dian vaihtoväli.$(.slider img:last" ) .clone () .prependTo (.slider" ) ; // Kopio viimeisestä diasta sijoitetaan alkuun.$() .eq(1).clone().appendTo(.slider"); // Ensimmäisen dian kopio sijoitetaan loppuun. // Container.lider siirtyy vasemmalle yhden dian leveydellä. setInterval("animaatio()" , intervalli) ; // Animaatio()-toiminto käynnistetään diojen vaihtamiseksi.) ) ; function animation() ( var margin = parseInt($(.slider" ) .css ( "marginLeft" ) ) ; // Nykyisen lohkon offset.slider leveys= $(".slider-box" ) .width() , // Liukusäätimen leveys. slidersAmount= $(".slider" ) .children () .length ; // Diojen lukumäärä liukusäätimessä. if (marginaali!= (- leveys* (slidersAmount- 1 ) ) ) // Jos nykyinen dia ei ole viimeinen,( marginaali = marginaalin leveys; // Tuo marginaaliarvo pienenee dian leveyden verran.) muu ( // Jos viimeinen dia näytetään,$(.slider" ) .css ("margin-left" , - leveys) ; // sitten palataan kohtaan block.slider Aloitusasento, marginaali=- leveys* 2 ; ) $(.slider") .animate (( margin Vasen: marginaali) , 1000 ) ; // Block.slider on siirretty vasemmalle 1 dian verran. } ;

Tuloksena oli yksinkertainen liukusäädin, jossa on loputon automaattinen vieritys.