Bildegallerier og skyveknapper er noen av de mest populære jQuery-formatene. Takket være dem kan du legge til den nødvendige mengden visuelt innhold på nettstedet ditt, samtidig som du sparer verdifull plass.

Gallerier og skyveknapper gjør siden mindre opptatt, men lar deg likevel legge til alle bildene du trenger for å formidle budskapet ditt. De vil være spesielt nyttige for nettbutikker.

I dagens artikkel har vi samlet de beste jQuery-bildegalleriene og glidebryterne for deg.

For å installere dem, legg bare til de valgte pluginene til hoveddelen av HTML-siden sammen med jQuery-biblioteket og konfigurer dem i henhold til dokumentasjonen (bare et par linjer med kode).

Velg hvilke av disse elementene som passer perfekt inn i prosjektet ditt.

1. Bootstrap Slider

Bootstrap Slider er en gratis, mobiloptimalisert bildeglidebryter med berøring og sveip-rulling. Det vil se fantastisk ut på hvilken som helst skjerm og i hvilken som helst nettleser. Du kan laste inn bilder, videoer, tekst, miniatyrbilder og knapper i glidebrytere.

2. Skyveknapp for produktforhåndsvisning

Product Preview Slider legemliggjør det fulle potensialet til jQuery og passer perfekt inn i ethvert grensesnitt. Du vil også være fornøyd med kvaliteten og renheten til koden til dette pluginet.

3. Utvidbart bildegalleri

Expandable Image Gallery er en fantastisk plugin som blir til et fullskjermsgalleri med ett klikk. Den kan brukes til delen "Om oss" eller for å se informasjon om produkter.

4. Fotorama

Fotorama er et responsivt jQuery-galleri-plugin som fungerer for både stasjonære og mobile nettlesere. Den tilbyr en rekke navigasjonsalternativer: miniatyrbilder, rulling, frem- og tilbakeknapper, automatiske lysbildefremvisninger og kuler.

5. Oppslukende skyveknapp

Immersive Slider lar deg lage en unik lysbildeopplevelse som ligner på Google TV-glidebryteren. Du kan endre bakgrunnsbildet til å være uskarpt for å holde hovedbildet i fokus.

6. Leastjs

Leastjs er en responsiv jQuery-plugin som vil hjelpe deg med å lage et fantastisk galleri. Når du holder markøren over bildet, vises tekst; når du klikker, utvides vinduet til fullskjerm.

7. Mal for skyvepaneler

Denne plugin er ideell for en portefølje. Det vil lage blokker med bilder arrangert horisontalt (vertikalt på små skjermer) som det valgte innholdet vil bli knyttet til.

8. Squeezebox Portfolio Mal

Squeezebox Portfolio Template tilbyr bevegelseseffekter for porteføljen din. Når du holder musepekeren over hovedbildet (eller blokken), vises forankrede elementer.

9. Bland bilder

Shuffle Images er et utrolig responsivt plugin som lar deg lage et galleri med bilder som endres når du svever.

10. Gratis jQuery Lightbox-plugin

Gratis jQuery Lightbox Plugin vil hjelpe deg å vise ett eller flere bilder på én side. De kan også forstørres og settes tilbake til sin opprinnelige størrelse.

11. PgwSlider – Responsiv glidebryter for jQuery

PgwSlider er en minimalistisk bildeglidebryter. jQuery-koden er lett, så lastehastigheten til denne plugin-en vil positivt overraske deg.

12. Spredte polaroidgalleri

Scattered Polaroids Gallery er en fantastisk glidebryter med flat design. Elementene beveger seg kaotisk når du bytter bilder, noe som ser fantastisk ut.

13. Sprettende innholdsfilter

Bouncy Content Filter er en ideell løsning for porteføljer. Denne plugin-en lar brukere raskt flytte fra en kategori til en annen.

14. Enkel jQuery Slider

Enkel jQuery Slider lever opp til navnet sitt. Dette pluginet kombinerer elementer av JavaScript, HTML5 og CSS3. Standarddemoen lar bare tekst lastes, men hvis du gjør noen få endringer kan du også legge til visuelt innhold.

15. Glide JS

Glide JS er en enkel, rask og responsiv jQuery-glidebryter. Det er enkelt å konfigurere, og plugin-en tar ikke mye plass.

16. Fullskjerm dra-slider med parallakse

Denne fantastiske jQuery-glidebryteren med muligheten til å laste inn bilder og tekst passer for alle nettsteder. Det vil glede brukere med en liten parallakseeffekt og sakte tekstutseende.

Fra forfatteren: Til tross for rykter om den antatte "døden" til den delen av nettsider som er synlig uten å rulle, har ikke behovet for en god skyveknapp forsvunnet. La oss være ærlige et øyeblikk – glidere er gøy. I tillegg forårsaker ingenting annet, i motsetning til bevegelig innhold, en "wow"-effekt hos brukeren. Alle glidere er et sett med flere lysbilder som erstatter hverandre, og det er ekstremt viktig at skyvekoden er så lett som mulig. Det er i slike tilfeller at jQuery vil hjelpe oss.

Ta en titt på de 20 jQuery-glidebryterne fra Envato Market, og du vil innse at det er skyveknapper som er mer enn bare en blokk med bilder som flyter jevnt gjennom dem.

1. RoyalSlider – Berøringsskjermbildegalleri med jQuery

I dag betyr en responsiv skyveknapp som også er berøringsskjermvennlig mye mer enn før. RoyalSlider kombinerer begge funksjonene: respons og berøringsskjermfunksjonalitet. Et godt valg siden galleriet er skrevet i HTML5 og CSS3.

Flere interessante funksjoner:

Hvordan lage en nettside selv?

SEO-optimalisering

Svært tilpassbar

Mer enn 10 startmaler

Det er en reserve for CSS3-overganger

Etter min mening er den kuleste funksjonen den "modulære skriptarkitekturen", som lar deg ekskludere unødvendige ting fra JS-hovedfilen, og dermed redusere vekten. RoyalSlider, et berøringsskjermbildegalleri i JQuery, er en robust JavaScript-glidebryter som bør legges til enhver utvikleres verktøysett.

2. Slider Revolution responsiv jQuery-plugin

Det er ikke så lett å gjøre noe «revolusjonerende» med en skyveknapp. Når det gjelder glidebrytere, er det så mange funksjoner du kan legge til dem. Imidlertid er Slider Revolution et veldig godt forsøk. Blant jQuery-glidebryterne oppfyller denne forekomsten alle dine mulige krav.

Listen over skyvefunksjoner er så stor, så jeg vil bare liste de aller beste:

Parallakseeffekt og tilpasset animasjon

Ubegrenset antall lag og lysbilder med lenker

klare til bruk, dypt tilpassbare stiler

og mye mer

Muligheten til å legge til et bilde, innebygd videospiller og sosiale medier-koblinger gjør Slider Revolution til et av de mest fleksible og tilpassbare alternativene på nettet.

3. LayerSlider adaptiv jQuery skyveplugin

Navnet "LayerSlider adaptive jQuery slider plugin" kan ikke virkelig evaluere denne glideren.
200+ 2D- og 3D-overganger mellom lysbildene vil snu hodet på noen.

Et par bemerkelsesverdige funksjoner:

13 skinn og 3 menytyper

Evne til å plassere et fast bilde på toppen av glidebryteren

Og jQuery fallback

Og mye mer

Som med den forrige glidebryteren, kan du legge til nesten hvilket som helst innhold, til og med HTML5-resident multimediainnhold. LayerSlider bringer slidere til live og er veldig pen.

4. jQuery Banner Rotator / Slideshow

jQuery Banner Rotator / Slideshow er en ganske enkel skyveknapp som ikke ofrer hovedfunksjonaliteten.

Muligheter:

Verktøytips, tekstinnlegg osv.

Forhåndsvisninger og ulike alternativer for visning av komponenter

Timer med forsinkelse for én glidebryter eller alle

Flere overganger for alle lysbilder eller forskjellige overganger for hver enkelt

jQuery Banner Rotator / Slideshow, sammenlignet med andre JQuery-glidere, har bare grunnleggende funksjoner, men du bør ikke glemme det.

5. All In One Slider – Responsiv jQuery skyveplugin

Enhver skyveknapp som vises på Internett har sin egen unike visjon og løser eventuelle problemer på sitt felt. Men ikke denne. All In One Slider kan kalles "alt inkludert".

Jeg tror de fleste webutviklere og designere har en velprøvd løsning, men de leter alltid etter noe nytt. Og dette "noe nytt" inkluderer:

Bannerrotator

Banner med forhåndsvisning

Banner med spilleliste

Innholdsglidebryter

Karusell

Alle skyvetyper støtter de fleste, om ikke alle, funksjonaliteten som kreves av jQuery-glidebryterne. Vil All In One Slider være alt inkludert?

6. UnoSlider – Adaptiv glidebryter for berøringsskjerm

Hvis glidebryteren din ikke reagerer og ikke støtter berøringsskjermer, har du feil skyveknapp. UnoSlider er riktig.

Denne glidebryteren har funnet sin plass i solen mellom enkelhet og et rikt sett med funksjoner. Funksjoner:

Temastøtte

12 ferdige temaer

40 overganger

IE6+ støtte

Alle funksjoner med vekt på design og stil, noe som gjør UnoSlider til en utmerket innholdsglidebryter med muligheten til å legge til temaer.

7. Master Slider - glidebryter for jQuery berøringsskjerm

Leter du etter "én jQuery-glidebryter for å styre dem alle"? Prøv Master Slider – JQuery berøringsskjermglidebryter for forskjellige skjermstørrelser...

Når det kommer til god design, er dette eksemplet et av de beste:

Mer enn 25 maler

Maskinvareakselererte overganger

Støtte for berøring og sveip

Og mye mer

Interaktive overganger, animerte lag og hotspots vil definitivt fange oppmerksomheten din. Master Slider er et kunstverk.

8. TouchCarousel - jQuery-innholdsrulle og skyveknapp

TouchCarousel tilbyr gratis støtte og oppdateringer. Det er imidlertid ikke alle funksjonene til denne lette jQuery-karusellglideren.

Hvis ordet "touch" er i navnet, kan du gjette at glidebryteren er fullt adaptiv og støtter berøringer. Andre funksjoner:

SEO-optimalisering

Smart autoavspilling

CSS3-overganger med maskinvareakselerasjon

Tilpassbart brukergrensesnitt og 4 skall for Photoshop

TouchCarousel, på grunn av sin unike fysiske skyverulling, tar mobilopplevelser til et helt nytt nivå.

9. Advanced Slider - jQuery XML-glidebryteren

jQuery-glidebrytere kan brukes ikke bare på nettsteder. De kan også være nyttige i webapplikasjoner. Advanced Slider lar deg gjøre dette.

Med HTML- eller XML-oppmerking gjør denne avanserte glidebryteren et varig inntrykk:

Animerte lag og smart video

100+ overganger og 150+ egendefinerte egenskaper

15 glideskinn, 7 rullefeltskall og innebygd lysboksstøtte

Tastaturnavigering, berøringsstøtte og full tilpasning

Og mye mer

Den beste funksjonen er imidlertid Advanced Slider - jQuery XML Slider API, noe som gjør det til et ideelt skyvealternativ for webapplikasjonen din.

10. jQuery Slider Zoom inn/ut-effekt Fullt responsiv

En av disse jQuery-glidebryterne som får deg til å se en demo før du begynner å lese om funksjonene. Du vil bare forstå hva denne "zoom inn/ut-effekten" betyr.

Zoomeffekten er ganske svak, men den gir en følelse av kontroll og ekte touch til bildet mens resten av glidebryteren er statisk. Spesielle funksjoner for glidebryteren:

CSS3 lagoverganger

Avslutningsalternativ for animasjon for lag

Alternativer for fast bredde, full skjerm og full bredde

Animert tekst med HTML- og CSS-formatering

De fleste glidebrytere prøver å inkorporere så mange effekter som mulig, men jQuery Slider Zoom In/Out Effect Fully Responsive har bare Ken Burns-effekten, men den er godt implementert.

11. jQuery Carousel Evolution

Som den nevnte Advanced Slider - jQuery XML Slider, har jQuery Carousel Evolution sin egen API som kan brukes til å forbedre funksjonaliteten eller integrere glideren i et annet prosjekt.

Hvordan lage en nettside selv?

Hvilke teknologier og kunnskap trengs i dag for å lage nettsider på egenhånd? Finn ut på intensiven!

Med bilder, HTML-markering, YouTube og Vimeo-videoer vil du også motta:

SEO-optimalisering

9 karusellstiler

Skygge- og refleksjonseffekter

Bildestørrelsen kan justeres, både foran og bak

jQuery Carousel Evolution er en enkel karusell med mange bruksområder.

12. Sexy Slider

Sexy Slider er ikke lenger like sexy som før. På grunn av sin alder er denne glideren imidlertid pålitelig.

Glidebryteren ser ikke veldig imponerende ut ved første øyekast, men hvis du tilpasser den godt, vil den passe perfekt inn i designet ditt. Muligheter:

Automatisk avspilling av lysbilder

Bildetekster

Kontinuerlig lysbildeavspilling

6 overgangseffekter

Sexy Slider venter på at du skal låse opp dens fulle kraft og potensial.

13. jQuery Image & Content Scroller m/ Lightbox

Med alle disse mobilvennlige designene og støtte for berøringsskjerm, er det hyggelig å se en jQuery-glidebryter som ikke har glemt stasjonære datamaskiner.

jQuery Image & Content Scroller m/ Lightbox støtter tastaturinndata og musehjul, samt andre funksjoner:

Horisontal og vertikal orientering

Teksttekster i eller utenfor glidebryteren

Evne til å sette et visst antall lysbilder synlige samtidig

Innebygde bilder, Flash, iframe, Ajax og innebygd innhold

Glideren har også en innebygd lysboks. Hvis du ønsker det, i jQuery Image & Content Scroller m/ Lightbox kan du ikke starte selve glidebryteren, men starte lysboksen separat.

14. Gjennomsiktig – Adaptiv bannerrotator/skyveknapp

De fleste jQuery-glidere har sitt eget design. Du kan tilpasse det selv, men noen ganger vil du bare at alt skal være inne i glidebryteren. Vi presenterer for deg Translucent.

Skyveknappen har mange forhåndsinnstillinger. Du må kanskje bare angi visse innstillinger, og det er det. Muligheter:

6 forskjellige stiler

4 overgangseffekter

2 sveipeoverganger

Tilpassbare knapper og bildetekster

Som de andre er denne glidebryteren berøringsfølsom, responsiv og maskinvareakselerert. Translucent er en glidebryter med minimal design som setter selve innholdet først.

15. FSS - Full Screen Sliding Website Plugin

Vil du lage et fullskjermnettsted bestående av lysbilder? Da trenger du FSS.

Faktisk, ved å bruke denne JQuery-glidebryteren er det ekstremt enkelt å lage et skyvenettsted for fullskjerm. Muligheter:

AJAX-støtte

Rullefelt

Støtte for dypkoblingsteknologi

2 forskjellige overgangseffekter

Det er også verdt å ta hensyn til tastaturstøtten og den 11-siders guiden. Det virkelige inntrykket er imidlertid vekten av FSS, bare 5Kb.

16. Zozo Accordion – Adaptiv glidebryter for berøringsskjerm

Et annet eksempel på en jQuery-glidebryter som fokuserer på styling og gjør en god jobb. Zozo Accordion er et must-have for de som leter etter en god trekkspillglider med muligheten til å endre stiler.

Denne CSS3-animasjonsskjønnheten har også et ganske bredt spekter av funksjoner:

Horisontalt og vertikalt trekkspill

Semantisk HTML5 og SEO-optimalisering

Støtte for berøring, tastatur og WAI-ARIA

Mer enn 10 skins og 6 layouter

Og mye mer

Zozo Accordion har gratis støtte og konstante oppdateringer, samt alle funksjonene du ønsker i et jQuery-trekkspill.

17. jQuery Responsive OneByOne Slider Plugin

jQuery Responsive OneByOne Slider Plugin er mer som en enkel animasjon enn en glidebryter. I stedet for å vise ett lysbilde om gangen, fyller denne forekomsten skjermen med lysbilder ett trinn om gangen til det ikke er mer plass igjen i området før du går videre til neste lysbilde.

CSS3-animasjon kjører under Animate.css, den er lett, består av flere lag og er mobilvennlig. Flere funksjoner:

Det er også et dra-og-slipp-navigasjonsalternativ. jQuery Responsive OneByOne Slider Plugin drives av Twitter Bootstrap Carousel.

18. Accordionza - jQuery-plugin

Det er ingen jQuery-glidebryter enklere enn dette. For å betjene trenger du kun å laste ned 3Kb av glidebryteren, noe som gjør Accordionza til den letteste trekkspillglideren.

Hvis du ikke liker de tre stilalternativene, kan du justere HTML og CSS selv. Muligheter:

Tastaturnavigering

Enkelt å tilpasse effekter og knapper

Progressiv forbedringsteknikk - fungerer uten JavaScript

Husk at Accordionza kan vise mange varianter av blandet innhold, noe som gjør det ekstremt fleksibelt.

19. mightySlider – Responsiv flerbruksglidebryter

MightySlider er en virkelig kraftig skyveknapp. Den kan brukes ikke bare som en enkel bildeglidebryter, men også som en enveis skyveknapp i full skjerm med menyelementnavigering. Med dens hjelp kan du lage et fantastisk nettsted på én side.

Under panseret finner du mange alternativer:

Tastatur, mus og berøringsstøtte

CSS3-overganger med maskinvareakselerasjon

Ren gyldig markering og SEO-optimalisering

Ubegrenset antall lysbilder, lag for bildetekster og effekter for dem

API-en er veldig kraftig og utviklervennlig, noe som åpner for en rekke måter å bruke den på. MightySlider er en utmerket, progressiv jQuery-glidebryter med ren og godt kommentert kode.

20. Parallax Slider - Responsiv jQuery-plugin

Parallax Slider fungerer som jQuery Responsive OneByOne Slider Plugin og lar deg animere hvert lag separat i et enkelt lysbilde. Du kan animere alle lysbilder eller bare ett ved å legge til parallakse-animasjon.

Settet inneholder 4 glidere av forskjellige typer, alle med parallakseeffekt. Som andre jQuery-glidere har den:

Fullt tilpassbar

Berøringsstøtte

Fullt responsive, ubegrensede lag

Autoplay, looping, høyde- og breddejustering og timer

Animerte lag handler ikke bare om tekst eller bilder. Du kan også legge til YouTube-, Vimeo- og HTML5-videoer. Parallax Slider er et annet godt eksempel på hvordan du kan simulere Flash-effekter enda bedre enn selve Flash, som også støttes på alle enheter.

Konklusjon

Det er interessant å se hvordan jQuery-glidebryterne har vokst fra noe som ganske enkelt erstattet ett bilde med et annet til et stort sett med kreative verktøy. Nå er det 3D, parallakseskyveknapper, helsideskyveknapper, adaptive skyveknapper og de som kan sees på både stasjonære datamaskiner og smarttelefoner.

Hvis du ikke liker noen av glidebryterne på denne listen, kan du alltid ta jQuery Code Tutorial på Envato og designe noe helt nytt og unikt.

Eller sjekk ut andre skyveknapper på Envato Market - det er mange å velge mellom. Hva er din favoritt jQuery-glidebryter og hvorfor?

På denne dagen presenterer jeg et utvalg kreative skyveknapper av høy kvalitet i webdesign.

I dag har det blitt veldig populært å bruke glidere for prosjektene dine, for hvis du trenger å trekke oppmerksomhet til informasjon, artikkel på nettstedet skyveknappen er en flott løsning, og hvis det i tillegg er moderne og vakkert, så vil brukeren definitivt ikke gå forbi.

Som regel plasseres en glidebryter på toppen av hovedsiden slik at brukeren som kommer inn på siden umiddelbart ser den og har tilgang til den mest interessante informasjonen på siden.

Generelt sett, la oss se på et utvalg moderne skyveknapper som rett og slett er umulige å passere. Nyt :)

Er du sulten? Ta en titt på denne siden og velg hvilken som helst burger å spise.

Samtale

En veldig attraktiv side med tonnevis av kreativt utformede skyveknapper.

Hm Andrei

Fire vakre og attraktive nettsteder som endres automatisk.

Marcs Design

Når du ser på denne glidebryteren, ser du ut til å være foran en bærbar datamaskin

Boerdam

Kul side med minimal design og en veldig kul skyveknapp.

Te Rund App

Kreativ ressurs med en interessant glidebryter i telefonen

Dette er ting

Kul side, med en stor og kreativ skyveknapp.

Studio XL

Vertikalt bevegelige lysbildefremvisninger med en veldig fengende og attraktiv effekt. Du kan klikke på tallene eller pilene for å bla gjennom lysbildet.

Themefuse

Et fantastisk nettsted med en stor skyveknapp med en interessant rulleeffekt.

Josh Smith design

Dette er et nettsted, eller rettere sagt en skyveknapp. Generelt er hele siden en skyveknapp :)

reiser til Utah

En kul glidebryter som ser ut som en stabel med bilder.

Visitphilly

Kul, stor bildeglidebryter som er veldig iøynefallende.

TravelBuzz

Fem forskjellige klassikere og lysbilder av de vakreste stedene i verden. Klikk på et miniatyrbilde for å se et større bilde.

Bæresignaler

Mørk side med en enkel, men veldig kreativ skyveknapp

Foreløpig er en glidebryter - karusell - en funksjonalitet som ganske enkelt er nødvendig å ha på et forretningsnettsted, porteføljenettsted eller en hvilken som helst annen ressurs. Sammen med skyveknapper for fullskjermbilder passer horisontale karusellglidebrytere godt inn i ethvert webdesign.

Noen ganger bør glidebryteren oppta en tredjedel av sidesiden. Her brukes karusellglideren med overgangseffekter og responsive oppsett. Netthandelssider bruker en karusellglidebryter for å vise flere bilder i individuelle innlegg eller sider. Skyvekoden kan fritt brukes og modifiseres i henhold til dine behov.

Ved å bruke JQuery i forbindelse med HTML5 og CSS3 kan du gjøre sidene dine mer interessante, gi dem unike effekter og trekke oppmerksomheten til besøkende til et bestemt område av nettstedet.

Slick – moderne karusellskyveplugin

Slick er en fritt tilgjengelig jquery-plugin hvis utviklere hevder at løsningen deres vil tilfredsstille alle skyvekravene dine. Adaptiv skyveknapp - karusell kan fungere i "flis"-modus for mobile enheter, og i "dra og slipp"-modus for skrivebordsversjonen.

Inneholder en "fade"-overgangseffekt, en interessant "sentermodus"-funksjon, lat innlasting av bilder med automatisk rulling. Oppdatert funksjonalitet inkluderer å legge til lysbilder og et lysbildefilter. Alt for å sikre at du konfigurerer plugin-en i henhold til dine krav.

Demomodus | nedlasting

Owl Carousel 2.0 – jQuery – plugin for bruk på berøringsenheter

Denne plugin har et stort sett med funksjoner, egnet for både nybegynnere og erfarne utviklere. Dette er en oppdatert versjon av karusell-glidebryteren. Hans forgjenger hadde samme navn.

Skyveknappen har noen innebygde plugins for å forbedre den generelle funksjonaliteten. Animasjon, videoavspilling, skyveautomatikk, lat lasting, automatisk høydejustering – dette er hovedfunksjonene til Owl Carousel 2.0.

Dra og slipp-støtte er inkludert for mer praktisk bruk av plugin på mobile enheter.
Programtillegget er perfekt for å vise store bilder selv på små skjermer på mobile enheter.

Eksempler | nedlasting

jQuery-plugin Silver Track

En ganske liten, men funksjonsrik jquery-plugin som lar deg plassere en glidebryter på en side - en karusell, som har en liten kjerne og ikke bruker mye nettstedsressurser. Plugin-en kan brukes til å vise vertikale og horisontale glidere, med animasjon og lage sett med bilder fra galleriet.

Eksempler | nedlasting

AnoSlide – Ultrakompakt responsiv jQuery-glidebryter

Ultrakompakt jQuery-glidebryter - karusell, hvis funksjonalitet er mye større enn en vanlig skyveknapp. Disse inkluderer forhåndsvisning av enkeltbilder, flere bildekarusellvisninger og tittelbasert skyvevisning.

Eksempler | nedlasting

Uglekarusell – Jquery-glidebryter – karusell

Uglekarusell er en glidebryter som støtter berøringsskjermer og dra-og-slipp-teknologi, enkelt integrert i HTML-kode. Plugin-en er en av de beste glidebryterne som lar deg lage vakre karuseller uten noe spesielt forberedt markering.

Eksempler | nedlasting

3D-galleri - karusell

Bruker 3D-overganger basert på CSS-stiler og litt Javascript-kode.

Eksempler | nedlasting

3D-karusell med TweenMax.js og jQuery

Storslått 3D-karusell. Det ser ut til at dette fortsatt er en betaversjon, fordi jeg oppdaget et par problemer med den akkurat nå. Hvis du er interessert i å teste og lage dine egne glidere, vil denne karusellen være til stor hjelp.

Eksempler | nedlasting

Karusell med bootstrap

Responsiv glidebryter - karusell ved hjelp av bootstrap-teknologi kun for din nye nettside.

Eksempler | nedlasting

Moving Box-karusellglidebryter basert på Bootstrap-rammeverket

Mest populær på portefølje- og forretningsnettsteder. Denne typen glidebryter - karusell - finnes ofte på nettsteder av alle typer.

Eksempler | nedlasting

Tiny Circleslider

Denne lille skyveknappen er klar til å fungere på enheter med hvilken som helst skjermoppløsning. Skyveknappen kan fungere i både sirkulær og karusellmodus. Tiny circle presenteres som et alternativ til andre glidere av denne typen. Det er innebygd støtte for IOS- og Android-operativsystemer.

I sirkulær modus ser glidebryteren ganske interessant ut. Utmerket støtte for dra og slipp-metoden og et automatisk rullesystem for lysbilder.

Eksempler | nedlasting

Innholdsglidebryter for tommelen

En kraftig, adaptiv, karusellglidebryter er perfekt for et moderne nettsted. Fungerer riktig på alle enheter. Har horisontal og vertikal modus. Størrelsen er minimert til bare 1 KB. Den ultrakompakte plugin-modulen har også utmerkede jevne overganger.

Eksempler | nedlasting

Wow – glidebryter – karusell

Inneholder mer enn 50 effekter, som kan hjelpe deg med å lage en original glidebryter for nettstedet ditt.

Eksempler | nedlasting

Responsiv jQuery-innholdsglidebryter bxSlider

Endre størrelsen på nettleservinduet for å se hvordan glidebryteren tilpasser seg. Bxslider kommer med mer enn 50 tilpasningsalternativer og viser funksjonene med ulike overgangseffekter.

Eksempler | nedlasting

jKarusell

jCarousel er en jQuery-plugin som hjelper deg med å organisere visningen av bildene dine. Du kan enkelt lage egendefinerte bildekaruseller fra basen vist i eksempelet. Skyveknappen er adaptiv og optimalisert for arbeid på mobile plattformer.

Eksempler | nedlasting

Scrollbox - jQuery-plugin

Scrollbox er en kompakt plugin for å lage en glidebryter - en karusell eller en tekstgjennomgang. Viktige funksjoner inkluderer vertikale og horisontale rulleeffekter med pause på musen over.

Eksempler | nedlasting

dbpasKarusell

En enkel karusellglider. Hvis du trenger en rask plugin, er denne 100 % egnet. Leveres med kun de grunnleggende funksjonene som kreves for at glidebryteren skal fungere.

Eksempler | nedlasting

Flexisel: Responsive JQuery Slider Plugin - Karusell

Skaperne av Flexisel ble inspirert av den gamle skolens plugin jCarousel, og laget en kopi av den med sikte på riktig bruk av glidebryteren på mobil- og nettbrett.

Flexisels responsive layout, når den kjøres på mobile enheter, er forskjellig fra en layout i nettleservindustørrelse. Flexisel er perfekt tilpasset for å fungere på skjermer, både lav og høy oppløsning.

Eksempler | nedlasting

Elastislide – adaptiv skyveknapp – karusell

Elastislide tilpasser seg perfekt til størrelsen på enhetens skjerm. Du kan angi minimum antall bilder som skal vises med en bestemt oppløsning. Fungerer godt som en karusellglidebryter med bildegallerier, ved hjelp av en fast omslag sammen med en vertikal rulleeffekt.

Eksempel | nedlasting

FlexSlider 2

Freeware skyveknapp fra Woothemes. Det regnes med rette som en av de beste adaptive glidebryterne. Programtillegget inneholder flere maler og vil være nyttig for både nybegynnere og eksperter.

Eksempel | nedlasting

Fantastisk karusell

Fantastisk karusell – responsiv bildeglidebryter ved hjelp av jQuery. Støtter mange innholdsstyringssystemer som WordPress, Drupal og Joomla. Støtter også Android og IOS og stasjonære operativsystemer uten kompatibilitetsproblemer. Innebygde fantastiske karusellmaler lar deg bruke glidebryteren i vertikale, horisontale og sirkulære moduser.

Eksempler | nedlasting

Denne artikkelen beskriver en metode for å implementere og lage en bilde- eller tekstglidebryter med automatisk vending. Skyvefunksjonaliteten lar deg angi bytteintervall mellom lysbilder, hastighet, endringseffekt og også velge et spesifikt lysbilde fra listen. I dette eksemplet ble den klassiske metoden for å endre bilder brukt - utseendet og forsvinningen av lysbilder.

tidsliste- skyve byttehastighet

TimeView- visningstid

RadioMen- knapper under lysbildet for rask navigering (radioknapper). Misligholde ekte kan få betydningen falsk.

La oss nå komme i gang! La oss lage og åpne en fil index.htm

Merk følgende! I dette eksemplet brukes tekst for å få lysbildet til å fungere; hvis du vil bruke et bilde, plasser hvert av bildene dine i en tag

.

Som vi kan se, er det ikke noe komplisert i den presenterte koden, skyve-omslag bestemmer den generelle posisjonen til glidebryteren og justerer den til midten av skjermen. Parameter skyveknappen posisjonerer og setter høyden på sklien vår med eiendommen høyde. Hvis du bruker en bildeglidebryter, spesifiser høyden på bildene i denne egenskapen; hvis høydene på bildene er forskjellige, spesifiser maksimum.

For best skyvevisualisering og attraktivitet, bruk samme bildeoppløsning.

Nå må vi style glidebryteren vår. Forover/bakover-piler for å bytte lysbilde, samt radioknapper under glidebryteren, brukes i form av bilder og følger med filen. La oss lage og åpne en fil style.css og skriv markeringen vi trenger der:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( høyde: 100%; ) body ( farge: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; polstring: 0; margin: 0; ) #slider-wrap ( maks. -width:650px; margin: 100px auto; ) #slider (posisjon:relativ; høyde: 200px; overflow: skjult; kant:#fafafa solid 10px; ) .slide (bredde:100%; høyde: 100%; posisjon: absolutt ; top: 0; left: 0; text-align: center; padding-top: 40px; ) .Radio-But ( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( display : inline-block; width: 16px; height: 16px; background: url("radioBg.png") center bottom no-repeat; margin: 2px; overflow: hidden; text-indent: -99999px; ) .Radio-But . ctrl-select:hover ( markør: peker; bakgrunnsposisjon: midt i midten; ) .Radio-But .ctrl-select.active( bakgrunnsposisjon: midt øverst; ) #prewBut, #nextBut( display: blokk; bredde: 40px ; høyde: 100 %; posisjon: absolutt; topp: 0; overløp: skjult; tekstinnrykk: -99999px; bakgrunn: url("arrowBg.png") venstre sentrum ingen repetisjon; opasitet: 0,5; z-indeks: 3; disposisjon: ingen !viktig; ) #prewBut ( venstre: 10px; ) #nextBut ( høyre: 10px; background: url("arrowBg.png") høyre midt no-repeat; ) #prewBut:hover, #nextBut:hover ( opasitet: 1; )

Hvis forover/bakover-pilene forstyrrer synligheten til glidebryteren din, kan de gjøres usynlige, og de vises bare når du holder musepekeren over dem. I parametere forberede men Og nesteMen, angi egenskapen opasitet verdi 0.

La oss lage og åpne vår js filen, som vil inneholde glidebryterkoden. Ikke glem å koble til jQuery-rammeverket, så vel som jquery.ui-biblioteket - vi trenger dette biblioteket for å angi det forsvinnende elementet og utseendet til lysbildet. Du kan erstatte den angitte effekten med egenskapen fadeIn Og fadeOut.

$(document).ready(function () ( var timeList = 300; var TimeView = 5000; var RadioBut = true; $(".slide").hide().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); function slideDirectionHide(slideFloatNum, directTo)( $(".slide").eq( slideFloatNum).fadeOut(timeList); ) funksjon slideDirectionShow(slideFloatNum, directTo, pause)( $(".slide").eq(slideFloatNum).fadeIn(timeList, function() ( if(pause == true) (​ rotator( ); ) )); ) var old_slideNum = slideNum; if(pil == "neste")( slideDirectionHide(slideNum, "venstre"); if(slideNum == (slideCount-1))(slideNum=0;) else( slideNum++) slideDirectionShow(slideNum, "right", true); ) else if(arrow == "prew") ( slideDirectionHide(slideNum, "right"); if(slideNum == 0)(slideNum=slideCount-1; ) else (slideNum-=1) slideDirectionShow(slideNum, "venstre", true); )else( if(arrow !== old_slideNum) ( if(arrow > old_slideNum) ( slideDirectionHide(slideNum, "venstre"); slideNum = pil; slideDirectionShow(slideNum, "right", true); ) annet hvis (pil< old_slideNum) { slideDirectionHide(slideNum, "right"); slideNum = arrow; slideDirectionShow(slideNum, "left", true); } } } $(".ctrl-select.active").removeClass("active"); $(".ctrl-select").eq(slideNum).addClass("active"); } if(RadioBut){ var linkArrow = $("<>").prependTo("#slider"); $("#nextBut").click(function())( animSlide("neste"); return false; )) $("#prewBut").click(function( ) ( animSlide("prew"); return false; )) ) var addSpan =""; $(".slide").each(function(index) ( addSpan += " " + indeks + ""; }); $("

").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = false; var rotator = function())( if(!pause)(slideTime = setTimeout(function())( animSlide(" neste")), TimeView);) ) $("#slider-wrap").hover(function())(clearTimeout(slideTime); pause = true;), function())(pause = usant; rotator(); ) ); var clicking = false; var prevX; $(".slide").mousedown(function(e)( clicking = true; prevX = e.clientX; )); $(".slide") .mouseup(function( ) ( clicking = false; )); $(document).mouseup(function())( clicking = false; )); $(".slide").mousemove(function(e)( if( ved å klikke == true) ( ​​if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) klikking = false; ) )); $(".slide").hover().css("markør", "peker"); rotator(); ));

Funksjon animSlide godtar tre typer verdier: neste, prew, og en numerisk verdi. Parameter neste bytter neste lysbilde, prew forrige, og den numeriske verdien er det spesifikt valgte lysbildet gjennom alternativknappene under lysbildet. Funksjoner slideDirectionHide Og slideDirectionShow nesten lik og identisk, den første er ansvarlig for at lysbildet forsvinner og bevegelsesretningen til det utgående lysbildet, det andre for utseendet til lysbildet, dets bevegelsesretning når det vises, samt for den angitte visningstiden intervall.

Når du holder musen over glidebryteren, stopper skjermen.

Det er alt, hvis noe ikke er klart eller du har spørsmål, skriv og spør.