Skyder til hovedsiden i jquery. Et udvalg af adaptive skydere
Billedgallerier og skydere er nogle af de mest populære jQuery-formater. Takket være dem kan du tilføje den nødvendige mængde visuelt indhold til dit websted, mens du sparer værdifuld plads.
Gallerier og skydere gør siden mindre travl, men giver dig stadig mulighed for at tilføje alle de billeder, du skal bruge for at formidle dit budskab. De vil især være nyttige for onlinebutikker.
I dagens artikel har vi samlet de bedste jQuery-billedgallerier og skydere til dig.
For at installere dem skal du blot tilføje de valgte plugins til hovedafsnittet på HTML-siden sammen med jQuery-biblioteket og konfigurere dem i henhold til dokumentationen (kun et par linjer kode).
Vælg hvilke af disse elementer, der passer perfekt ind i dit projekt.
1. Bootstrap Slider
Bootstrap Slider er en gratis, mobiloptimeret billedskyder med touch- og swipe-rulning. Det vil se fantastisk ud på enhver skærm og i enhver browser. Du kan indlæse billeder, videoer, tekst, thumbnails og knapper i skydere.
2. Produkt Preview-skyder
Product Preview Slider inkarnerer det fulde potentiale af jQuery og passer perfekt ind i enhver grænseflade. Du vil også være tilfreds med kvaliteten og renheden af koden til dette plugin.
3. Udvidbart billedgalleri
Expandable Image Gallery er et fantastisk plugin, der bliver til et fuldskærmsgalleri med et enkelt klik. Det kan bruges til afsnittet "Om os" eller til at se oplysninger om produkter.
4. Fotorama
Fotorama er et responsivt jQuery-galleri-plugin, der fungerer til både desktop- og mobilbrowsere. Det tilbyder en række navigationsmuligheder: miniaturebilleder, rulning, frem- og tilbageknapper, automatiske diasshow og punkttegn.
5. Fordybende skyder
Immersive Slider giver dig mulighed for at skabe en unik slideoplevelse, der ligner Google TV-skyderen. Du kan ændre baggrundsbilledet til at være sløret for at holde hovedbilledet i fokus.
6. Mindstjs
Leastjs er et responsivt jQuery-plugin, der hjælper dig med at skabe et fantastisk galleri. Når du holder markøren over billedet, vises tekst, når du klikker, udvides vinduet til fuld skærm.
7. Skabelon for glidende paneler
Dette plugin er ideelt til en portefølje. Det vil skabe blokke af billeder arrangeret vandret (lodret på små skærme), som det valgte indhold vil blive linket til.
8. Squeezebox Portfolio skabelon
Squeezebox Portfolio Template tilbyder bevægelseseffekter til din portefølje. Når du holder markøren over hovedbilledet (eller blokken), vises forankrede elementer.
9. Bland billeder
Shuffle Images er et fantastisk responsivt plugin, der giver dig mulighed for at oprette et galleri med billeder, der ændres, når du svæver.
10. Gratis jQuery Lightbox Plugin
Gratis jQuery Lightbox Plugin hjælper dig med at vise et eller flere billeder på én side. De kan også forstørres og returneres til deres oprindelige størrelse.
11. PgwSlider – Responsiv skyder til jQuery
PgwSlider er en minimalistisk billedskyder. jQuery-koden er let, så indlæsningshastigheden af dette plugin vil glædeligt overraske dig.
12. Spredte polaroidgalleri
Scattered Polaroids Gallery er en fantastisk skyder med et fladt design. Dens elementer bevæger sig kaotisk, når de skifter billeder, hvilket ser fantastisk ud.
13. Bouncy-indholdsfilter
Bouncy Content Filter er en ideel løsning til porteføljer. Dette plugin giver brugerne mulighed for hurtigt at flytte fra en kategori til en anden.
14. Simpel jQuery Slider
Simpel jQuery Slider lever op til sit navn. Dette plugin kombinerer elementer af JavaScript, HTML5 og CSS3. Standarddemoen tillader kun at indlæse tekst, men hvis du laver nogle få ændringer, kan du også tilføje visuelt indhold.
15. Glid JS
Glide JS er en enkel, hurtig og responsiv jQuery-skyder. Det er nemt at konfigurere, og plugin'et fylder ikke meget.
16. Fuldskærms træk-skyder med parallakse
Denne fantastiske jQuery-skyder med evnen til at indlæse billeder og tekst er velegnet til ethvert websted. Det vil glæde brugerne med en let parallakseeffekt og langsom tekstudseende.
Fra forfatteren: På trods af rygter om den formodede "død" af den del af websider, der er synlig uden at rulle, er behovet for en god skyder ikke forsvundet. Lad os være ærlige et øjeblik - skydere er sjove. Derudover forårsager intet andet, i modsætning til flyttende indhold, en "wow"-effekt hos brugeren. Alle skydere er et sæt af flere dias, der afløser hinanden, og det er ekstremt vigtigt, at skyderkoden er så let som muligt. Det er i sådanne tilfælde, at jQuery vil hjælpe os.
Tag et kig på de 20 jQuery-skydere fra Envato Market, og du vil indse, at der er skydere, der er mere end blot en blok af billeder, der flyder jævnt gennem dem.
1. RoyalSlider – Touchscreen billedgalleri ved hjælp af jQuery
I dag betyder en responsiv skyder, der også er touchscreen-venlig, meget mere end før. RoyalSlider kombinerer begge funktioner: reaktionsevne og berøringsskærmsfunktionalitet. Et godt valg, da galleriet er skrevet i HTML5 og CSS3.
Flere interessante funktioner:
Hvordan laver man selv en hjemmeside?
SEO optimering
Meget tilpasselig
Mere end 10 starterskabeloner
Der er et alternativ til CSS3-overgange
Efter min mening er den fedeste funktion den "modulære script-arkitektur", som giver dig mulighed for at udelukke unødvendige ting fra JS-hovedfilen og derved reducere vægten. RoyalSlider, et touchscreen-billedgalleri i JQuery, er en robust JavaScript-skyder, der bør tilføjes til enhver udviklers værktøjssæt.
2. Slider Revolution responsivt jQuery plugin
Det er ikke så nemt at lave noget "revolutionært" med en skyder. Når det kommer til skydere, er der så mange funktioner, du kan tilføje til dem. Slider Revolution er dog et rigtig godt forsøg. Blandt jQuery-skydere opfylder denne instans alle dine mulige krav.
Listen over skyderfunktioner er så stor, så jeg vil kun liste de allerbedste:
Parallax-effekt og tilpasset animation
Ubegrænset antal lag og dias med links
klar til brug, dybt tilpasselige stilarter
og meget mere
Muligheden for at tilføje et billede, indlejret videoafspiller og sociale medielinks gør Slider Revolution til en af de mest fleksible og tilpasselige muligheder på nettet.
3. LayerSlider adaptiv jQuery skyder plugin
Navnet "LayerSlider adaptive jQuery slider plugin" kan ikke rigtigt evaluere denne skyder.
200+ 2D- og 3D-overgange mellem dias vil vende hovedet på enhver.
Et par bemærkelsesværdige funktioner:
13 skins og 3 menutyper
Mulighed for at placere et fast billede oven på skyderen
Og jQuery fallback
Og meget mere
Som med den forrige skyder kan du tilføje næsten ethvert indhold, selv HTML5-resident multimedieindhold. LayerSlider bringer skyderne til live og er meget smuk.
4. jQuery Banner Rotator/Slideshow
jQuery Banner Rotator / Slideshow er en ret simpel skyder, der ikke ofrer hovedfunktionaliteten.
Muligheder:
Værktøjstip, tekstindlæg mv.
Forhåndsvisninger og forskellige muligheder for at se komponenter
Timer med forsinkelse for én skyder eller alle
Flere overgange for alle dias eller forskellige overgange for hver enkelt
jQuery Banner Rotator / Slideshow, sammenlignet med andre JQuery-skydere, har kun grundlæggende muligheder, men du bør ikke glemme det.
5. All In One Slider – Responsivt jQuery-skyder-plugin
Enhver skyder, der vises på internettet, har sin egen unikke vision og løser eventuelle problemer inden for sit felt. Men ikke denne. All In One Slider kan kaldes "alt inklusive".
Jeg tror, de fleste webudviklere og designere har en gennemprøvet løsning, men de leder altid efter noget nyt. Og dette "noget nyt" inkluderer:
Banner rotator
Banner med forhåndsvisning
Banner med afspilningsliste
Indholdsskyder
Karrusel
Alle skydertyper understøtter de fleste, hvis ikke alle, af den funktionalitet, der kræves af jQuery-skydere. Vil All In One Slider være din altomfattende?
6. UnoSlider – Adaptiv touchscreen-skyder
Hvis din skyder ikke reagerer og ikke understøtter berøringsskærme, så har du den forkerte skyder. UnoSlider er korrekt.
Denne skyder har fundet sin plads i solen mellem enkelhed og et rigt sæt funktioner. Funktioner:
Tema støtte
12 færdige temaer
40 overgange
IE6+ understøttelse
Alle funktioner med vægt på design og stil, hvilket gør UnoSlider til en fremragende indholdsskyder med mulighed for at tilføje temaer.
7. Master Slider - jQuery touchscreen skyder
Leder du efter "én jQuery-skyder til at styre dem alle"? Prøv Master Slider – JQuery touchscreen-skyder til forskellige skærmstørrelser...
Når det kommer til godt design, er dette eksempel et af de bedste:
Mere end 25 skabeloner
Hardwareaccelererede overgange
Tryk og stryg støtte
Og meget mere
Interaktive overgange, animerede lag og hotspots vil helt sikkert fange din opmærksomhed. Master Slider er et kunstværk.
8. TouchCarousel - jQuery indholdsscroller og skyder
TouchCarousel tilbyder gratis support og opdateringer. Det er dog ikke alle funktionerne i denne lette jQuery-karruselskyder.
Hvis ordet "touch" er i navnet, kan du gætte, at skyderen er fuldt adaptiv og understøtter berøringer. Andre funktioner:
SEO optimering
Smart autoplay
CSS3-overgange med hardwareacceleration
Brugergrænseflade, der kan tilpasses og 4 skins til Photoshop
TouchCarousel tager på grund af sin unikke fysiske slidescrollning mobiloplevelser til et helt nyt niveau.
9. Advanced Slider - jQuery XML-skyder
jQuery skydere kan bruges ikke kun på websteder. De kan også være nyttige i webapplikationer. Advanced Slider giver dig mulighed for at gøre dette.
Med HTML- eller XML-markering gør denne avancerede skyder et varigt indtryk:
Animerede lag og smart video
100+ overgange og 150+ tilpassede egenskaber
15 slider skins, 7 scrollbar skins og indbygget lightbox support
Tastaturnavigation, berøringsunderstøttelse og fuld tilpasning
Og meget mere
Men den bedste funktion er Advanced Slider - jQuery XML Slider API, hvilket gør det til en ideel skyder mulighed for din webapplikation.
10. jQuery Slider Zoom ind/ud effekt Fuldt responsiv
En af disse jQuery-skydere, der får dig til at se en demo, før du begynder at læse om dens funktioner. Du vil bare gerne forstå, hvad denne "zoom ind/ud-effekt" betyder.
Zoomeffekten er ret svag, men den tilføjer en følelse af kontrol og ægte touch til billedet, mens resten af skyderen er statisk. Særlige funktioner ved skyderen:
CSS3-lagovergange
Afslutningsmulighed for animation for lag
Muligheder for fast bredde, fuld skærm og fuld bredde
Animeret tekst med HTML- og CSS-formatering
De fleste skydere forsøger at inkorporere så mange effekter som muligt, men jQuery Slider Zoom In/Out Effect Fully Responsive har kun Ken Burns-effekten, men den er godt implementeret.
11. jQuery Carousel Evolution
Ligesom den førnævnte Advanced Slider - jQuery XML Slider, har jQuery Carousel Evolution sin egen API, der kan bruges til at forbedre funktionaliteten eller integrere skyderen i et andet projekt.
Hvordan laver man selv en hjemmeside?
Hvilke teknologier og viden er nødvendige i dag for at lave hjemmesider på egen hånd? Find ud af det på intensiven!
Med billeder, HTML-markering, YouTube og Vimeo-videoer vil du også modtage:
SEO optimering
9 karruselstile
Skygge- og reflektionseffekter
Billedstørrelsen kan justeres, både foran og bagpå
jQuery Carousel Evolution er en simpel karrusel med mange use cases.
12. Sexet skyder
Sexy Slider er ikke længere så sexet som før. På grund af sin alder er denne skyder dog pålidelig.
Skyderen ser ikke særlig imponerende ud ved første øjekast, men hvis du tilpasser den godt, vil den passe perfekt ind i dit design. Muligheder:
Automatisk afspilning af dias
Billedtekster
Kontinuerlig slide-afspilning
6 overgangseffekter
Sexy Slider venter på, at du kan låse op for dens fulde kraft og potentiale.
13. jQuery Image & Content Scroller m/ Lightbox
Med alle disse mobilvenlige designs og touchscreen-understøttelse er det rart at se en jQuery-skyder, der ikke har glemt stationære computere.
jQuery Image & Content Scroller m/ Lightbox understøtter tastaturinput og musehjul samt andre funktioner:
Vandret og lodret orientering
Teksttekster i eller uden for skyderen
Mulighed for at indstille et vist antal slides synlige på én gang
Inline billeder, Flash, iframe, Ajax og inline indhold
Skyderen har også en indbygget lysboks. Hvis du ønsker det, i jQuery Image & Content Scroller m/ Lightbox kan du ikke starte selve skyderen, men starte lysboksen separat.
14. Translucent – Adaptiv bannerrotator/skyder
De fleste jQuery-skydere har deres eget design. Du kan tilpasse det til dig selv, men nogle gange vil du bare have, at alt skal være inde i skyderen. Vi præsenterer for dig Translucent.
Skyderen har en masse forudindstillinger. Du skal muligvis bare indstille visse indstillinger, og det er det. Muligheder:
6 forskellige stilarter
4 overgangseffekter
2 swipe-overgange
Knapper og billedtekster, der kan tilpasses
Ligesom de andre er denne skyder berøringsfølsom, responsiv og hardwareaccelereret. Translucent er en skyder med et minimalt design, der sætter selve indholdet først.
15. FSS – Full Screen Sliding Website Plugin
Vil du lave en fuldskærms hjemmeside bestående af slides? Så har du brug for FSS.
Faktisk, ved at bruge denne JQuery-skyder er det ekstremt nemt at oprette et fuldskærms-skyderwebsted. Muligheder:
AJAX support
Rullebar
Understøttelse af dyb linkteknologi
2 forskellige overgangseffekter
Det er også værd at være opmærksom på tastaturunderstøttelsen og den 11-siders guide. Det virkelige indtryk er dog vægten af FSS, kun 5Kb.
16. Zozo Accordion – Adaptiv touchscreen-skyder
Et andet eksempel på en jQuery-skyder, der fokuserer på styling og gør et godt stykke arbejde. Zozo Accordion er et must-have for dem, der leder efter en god harmonika-skyder med evnen til at ændre stilarter.
Denne CSS3 animationsskønhed har også en lang række funktioner:
Vandret og lodret harmonika
Semantisk HTML5 og SEO optimering
Touch, tastatur og WAI-ARIA understøttelse
Mere end 10 skins og 6 layouts
Og meget mere
Zozo Accordion har gratis support og konstante opdateringer, samt alle de funktioner du ønsker i en jQuery harmonika.
17. jQuery Responsive OneByOne Slider Plugin
jQuery Responsive OneByOne Slider Plugin er mere som en simpel animation snarere end en skyder. I stedet for at vise ét dias ad gangen, fylder denne instans skærmen med dias et trin ad gangen, indtil der ikke er mere plads tilbage i området, før man går videre til næste dias.
CSS3 animation kører under Animate.css, den er let, består af flere lag og er mobilvenlig. Flere funktioner:
Der er også en træk og slip navigationsmulighed. jQuery Responsive OneByOne Slider Plugin er drevet af Twitter Bootstrap Carousel.
18. Accordionza - jQuery plugin
Der er ingen jQuery-skyder nemmere end dette. For at betjene skal du kun downloade 3Kb af skyderen, hvilket gør Accordionza til den letteste harmonikaskyder.
Hvis du ikke kan lide de tre stylingmuligheder, kan du selv justere HTML og CSS. Muligheder:
Tastaturnavigation
Let at tilpasse effekter og knapper
Progressiv forbedringsteknik - virker uden JavaScript
Husk at Accordionza kan vise mange variationer af blandet indhold, hvilket gør det ekstremt fleksibelt.
19. mightySlider – Responsiv multifunktionsskyder
MightySlider er en virkelig kraftfuld skyder. Den kan ikke kun bruges som en simpel billedskyder, men også som en envejs skyder i fuld skærm med menupunktnavigation. Med dens hjælp kan du lave en vidunderlig en-sides hjemmeside.
Under hætten finder du mange muligheder:
Tastatur, mus og berøringsunderstøttelse
CSS3-overgange med hardwareacceleration
Ren gyldig markup og SEO-optimering
Ubegrænset antal dias, lag til billedtekster og effekter til dem
API'et er meget kraftfuldt og udviklervenligt, hvilket åbner op for en række måder at bruge det på. MightySlider er en fremragende, progressiv jQuery-skyder med ren og velkommenteret kode.
20. Parallax Slider - Responsivt jQuery-plugin
Parallax Slider fungerer som jQuery Responsive OneByOne Slider Plugin og giver dig mulighed for at animere hvert lag separat inden for et enkelt dias. Du kan animere alle dias eller endda kun én ved at tilføje parallakse-animation.
Sættet indeholder 4 skydere af forskellige typer, alle med parallakse effekt. Ligesom andre jQuery-skydere har den:
Fuldt tilpasselig
Berøringsstøtte
Fuldt lydhør, ubegrænsede lag
Autoplay, looping, højde- og breddejustering og timer
Animerede lag handler ikke kun om tekst eller billeder. Du kan også tilføje YouTube-, Vimeo- og HTML5-videoer. Parallax Slider er endnu et godt eksempel på, hvordan du kan simulere Flash-effekter endnu bedre end selve Flash, som også understøttes på alle enheder.
Konklusion
Det er interessant at se, hvordan jQuery-skydere er vokset fra noget, der blot erstattede et billede med et andet til et stort sæt kreative værktøjer. Nu er der 3D, parallakseskydere, helsidesskydere, adaptive skydere og dem, der kan ses på både stationære computere og smartphones.
Hvis du ikke kan lide nogen af skyderne på denne liste, kan du altid tage jQuery Code Tutorial på Envato og designe noget helt nyt og unikt.
Eller tjek andre skydere på Envato Market - der er masser at vælge imellem. Hvad er din yndlings jQuery-skyder og hvorfor?
På denne dag præsenterer jeg dig for et udvalg kreative skydere af høj kvalitet i webdesign.
I dag er det blevet meget populært at bruge skydere til dine projekter, for hvis du har brug for at henlede opmærksomheden på nogen information, kan du finde en artikel på hjemmesiden skyderen er en god løsning, og er det også moderne og smukt, så kommer brugeren bestemt ikke forbi.
Som regel er en skyder normalt placeret øverst på hovedsiden, så brugeren, der kommer ind på siden, med det samme ser den og har adgang til de mest interessante oplysninger på siden.
Lad os generelt se på et udvalg af moderne skydere, der simpelthen er umulige at komme forbi. God fornøjelse :)
Er du sulten? Tag et kig på denne side og vælg enhver burger at snacke på.
Samtale
Et meget attraktivt websted med tonsvis af kreativt designede skydere.
Hm Andrei
Fire smukke og attraktive steder, der ændrer sig automatisk.
Marcs Design
Når du ser på denne skyder, ser du ud til at være foran en bærbar computer
Boerdam
Fed side med minimalt design og en meget cool skyder.
Te rund app
Kreativ ressource med en interessant skyder i din telefon
Disse er ting
Fed side, med en enorm og kreativ skyder.
Studio XL
Lodret bevægelige diasshow med en meget fængende og attraktiv effekt. Du kan klikke på tallene eller pilene for at rulle gennem diaset.
Temafuse
En vidunderlig side med en stor skyder med en interessant rulleeffekt.
Josh Smith Design
Dette er en hjemmeside, eller rettere sagt en skyder. Generelt er hele siden en skyder :)
rejser til Utah
En cool skyder, der ligner en stak billeder.
Visitphilly
Cool, stor billedskyder, der er meget iøjnefaldende.
TravelBuzz
Fem forskellige klassikere og rutsjebaner af de smukkeste steder i verden. Klik på et miniaturebillede for at se et større billede.
Bærsignaler
Mørkt websted med en enkel, men meget kreativ skyder
I øjeblikket er en skyder - karrusel - en funktionalitet, der simpelthen er nødvendig at have på en virksomhedshjemmeside, porteføljewebsted eller enhver anden ressource. Sammen med skydere til fuldskærmsbilleder passer vandrette karruselskydere godt ind i ethvert webdesign.
Nogle gange bør skyderen optage en tredjedel af webstedets side. Her bruges karruselskyderen med overgangseffekter og responsive layouts. E-handelswebsteder bruger en karruselskyder til at vise flere billeder i individuelle indlæg eller sider. Skyderkoden kan frit bruges og ændres efter dine behov.
Ved at bruge JQuery i forbindelse med HTML5 og CSS3 kan du gøre dine sider mere interessante, give dem unikke effekter og henlede besøgendes opmærksomhed på et bestemt område af webstedet.
Slick – moderne karrusel-skyder-plugin
Slick er et frit tilgængeligt jquery-plugin, hvis udviklere hævder, at deres løsning vil tilfredsstille alle dine skyderkrav. Adaptiv skyder - karrusel kan fungere i "tile"-tilstand for mobile enheder og i "træk og slip"-tilstand for desktop-versionen.
Indeholder en "fade" overgangseffekt, en interessant "center mode" funktion, doven indlæsning af billeder med automatisk rulning. Opdateret funktionalitet omfatter tilføjelse af dias og et diasfilter. Alt sammen for at sikre, at du konfigurerer plugin'et i overensstemmelse med dine krav.
Demotilstand | Hent
Owl Carousel 2.0 – jQuery – plugin til brug på touch-enheder
Dette plugin har et stort sæt funktioner, der passer til både begyndere og erfarne udviklere. Dette er en opdateret version af karruselskyderen. Hans forgænger havde samme navn.
Skyderen har nogle indbyggede plugins for at forbedre den overordnede funktionalitet. Animation, videoafspilning, skyder autoplay, doven indlæsning, automatisk højdejustering - disse er hovedfunktionerne i Owl Carousel 2.0.
Træk og slip-understøttelse er inkluderet for mere bekvem brug af pluginnet på mobile enheder.
Pluginnet er perfekt til at vise store billeder selv på små skærme på mobile enheder.
Eksempler | Hent
jQuery plugin Silver Track
Et ret lille, men funktionelt rigt jquery-plugin, der giver dig mulighed for at placere en skyder på en side - en karrusel, som har en lille kerne og ikke bruger mange webstedsressourcer. Pluginnet kan bruges til at vise lodrette og vandrette skydere, med animation og skabe sæt billeder fra galleriet.
Eksempler | Hent
AnoSlide – Ultrakompakt responsiv jQuery-skyder
Ultrakompakt jQuery-skyder - karrusel, hvis funktionalitet er meget større end en almindelig skyder. Disse inkluderer forhåndsvisning af et enkelt billede, visning af flere billeder i karrusel og titelbaseret skydervisning.
Eksempler | Hent
Uglekarrusel – Jquery-skyder – karrusel
Uglekarrusel er en skyder, der understøtter berøringsskærme og træk og slip-teknologi, let integreret i HTML-kode. Pluginnet er en af de bedste skydere, der giver dig mulighed for at skabe smukke karruseller uden nogen specielt forberedt markup.
Eksempler | Hent
3D galleri - karrusel
Bruger 3D-overgange baseret på CSS-stile og lidt Javascript-kode.
Eksempler | Hent
3D-karrusel ved hjælp af TweenMax.js og jQuery
Storslået 3D karrusel. Det ser ud til, at dette stadig er en betaversion, for jeg opdagede et par problemer med den lige nu. Hvis du er interesseret i at teste og skabe dine egne skydere, vil denne karrusel være en stor hjælp.
Eksempler | Hent
Karrusel ved hjælp af bootstrap
Responsiv skyder - karrusel ved hjælp af bootstrap-teknologi kun til din nye hjemmeside.
Eksempler | Hent
Moving Box-karruselskyder baseret på Bootstrap-ramme
Mest populær på portefølje- og virksomhedswebsteder. Denne type skyder - karrusel - findes ofte på websteder af enhver type.
Eksempler | Hent
Lille Circleslider
Denne lille skyder er klar til at arbejde på enheder med enhver skærmopløsning. Skyderen kan fungere i både cirkulær og karruseltilstand. Lille cirkel præsenteres som et alternativ til andre skydere af denne type. Der er indbygget understøttelse af IOS og Android-operativsystemer.
I cirkulær tilstand ser skyderen ret interessant ud. Fremragende understøttelse af træk og slip-metoden og et automatisk rulningssystem.
Eksempler | Hent
Thumbelina Content Slider
En kraftfuld, adaptiv, karruselskyder er perfekt til et moderne websted. Fungerer korrekt på enhver enhed. Har vandret og lodret tilstand. Dens størrelse er minimeret til kun 1 KB. Det ultrakompakte plugin har også fremragende jævne overgange.
Eksempler | Hent
Wow – skyder – karrusel
Indeholder mere end 50 effekter, som kan hjælpe dig med at skabe en original skyder til dit websted.
Eksempler | Hent
Responsiv jQuery-indholdsskyder bxSlider
Tilpas størrelsen på dit browservindue for at se, hvordan skyderen tilpasser sig. Bxslider kommer med mere end 50 tilpasningsmuligheder og viser dens funktioner med forskellige overgangseffekter.
Eksempler | Hent
jKarrusel
jCarousel er et jQuery-plugin, der hjælper med at organisere visningen af dine billeder. Du kan nemt oprette brugerdefinerede billedkarruseller fra basen vist i eksemplet. Skyderen er adaptiv og optimeret til at arbejde på mobile platforme.
Eksempler | Hent
Scrollbox - jQuery plugin
Scrollbox er et kompakt plugin til at lave en skyder - en karrusel eller en tekstcrawl. Nøglefunktioner inkluderer lodrette og vandrette rulleeffekter med pause på musen over.
Eksempler | Hent
dbpasKarrusel
En simpel karruselskyder. Hvis du har brug for et hurtigt plugin, er dette 100% egnet. Leveres kun med de grundlæggende funktioner, der kræves for at skyderen kan fungere.
Eksempler | Hent
Flexisel: Responsive JQuery Slider Plugin - Karrusel
Skaberne af Flexisel blev inspireret af det gamle plugin jCarousel, og lavede en kopi af det med det formål at styre skyderen korrekt på mobil- og tablet-enheder.
Flexisels responsive layout, når det kører på mobile enheder, er anderledes end et layout i browservinduestørrelse. Flexisel er perfekt tilpasset til at arbejde på skærme, både lav og høj opløsning.
Eksempler | Hent
Elastislide – adaptiv skyder – karrusel
Elastislide tilpasser sig perfekt til størrelsen på din enheds skærm. Du kan indstille det mindste antal billeder, der skal vises ved en bestemt opløsning. Fungerer godt som en karruselskyder til billedgallerier, ved hjælp af en fast indpakning sammen med en lodret rulleeffekt.
Eksempel | Hent
FlexSlider 2
Freeware-skyder fra Woothemes. Det betragtes med rette som en af de bedste adaptive skydere. Pluginnet indeholder flere skabeloner og vil være nyttigt for både nybegyndere og eksperter.
Eksempel | Hent
Fantastisk karrusel
Fantastisk karrusel – responsiv billedskyder ved hjælp af jQuery. Understøtter mange indholdsstyringssystemer såsom WordPress, Drupal og Joomla. Understøtter også Android og IOS og desktop-operativsystemer uden kompatibilitetsproblemer. Indbyggede fantastiske karruselskabeloner giver dig mulighed for at bruge skyderen i lodret, vandret og cirkulær tilstand.
Eksempler | Hent
Denne artikel beskriver en metode til implementering og oprettelse af en billed- eller tekstskyder med automatisk vending. Skyderfunktionaliteten giver dig mulighed for at indstille skiftintervallet mellem dias, hastighed, ændringseffekt og også vælge et specifikt dias fra listen. I dette eksempel blev den klassiske metode til at ændre billeder brugt - udseendet og forsvinden af dias.
tidsliste- Slide switch hastighed
TimeView- Vis tid
RadioMen- knapper under sliden til hurtig navigation (radioknapper). Standard rigtigt kan få betydningen falsk.
Lad os nu komme i gang! Lad os oprette og åbne en fil index.htm
Opmærksomhed! I dette eksempel bruges tekst til at få diaset til at fungere, hvis du vil bruge et billede, så placer hvert af dine billeder i en tag
Som vi kan se, er der ikke noget kompliceret i den præsenterede kode, skyder-indpakning bestemmer skyderens overordnede position og justerer den til midten af skærmen. Parameter skyderen positionerer og indstiller højden på vores rutsjebane med ejendommen højde. Hvis du bruger en billedskyder, skal du angive højden på billederne i denne egenskab, hvis højderne på billederne er forskellige, så angiv maksimum.
For den bedste skydervisualisering og tiltrækningskraft skal du bruge den samme billedopløsning.
Nu skal vi style vores skyder. Frem/tilbage pile til at skifte dias, samt radioknapper under skyderen, bruges i form af billeder og følger med filen. Lad os oprette og åbne en fil style.css og skriv den markup, vi skal bruge der:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( højde: 100%; ) body ( farve: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; polstring: 0; margin: 0; ) #slider-wrap ( maks. -bredde:650px; margin: 100px auto; ; top: 0; -99999px; ctrl-select:hover (markør: pointer; baggrundsposition: midterste; ) .Radio-But .ctrl-select.active(baggrundsposition: center top; ) #prewBut, #nextBut( display: blok; width: 40px højde: 100% position: overflow: skjult baggrund: url("arrowBg.png"). opacitet: 0,5; z-indeks: 3; disposition: ingen !vigtig; ) #prewBut ( venstre: 10px; ) #nextBut ( højre: 10px; background: url("arrowBg.png") højre center no-repeat; ) #prewBut:hover, #nextBut:hover ( opacitet: 1; )
Hvis frem/tilbage-pilene forstyrrer synligheden af din skyder, kan de gøres usynlige, og de vises kun, når du holder markøren over dem. I parametre forberede Men Og næsteMen, indstil egenskaben Gennemsigtighed værdi 0.
Lad os skabe og åbne vores js fil, som vil indeholde skyderkoden. Glem ikke at forbinde jQuery-rammeværket såvel som jquery.ui-biblioteket - vi har brug for dette bibliotek for at indstille det forsvindende element og udseendet af sliden. Du kan erstatte den angivne effekt med egenskaben fadeIn Og svinde bort.
$(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)( $(".slide").eq( slideFloatNum).fadeOut(timeList); funktion slideDirectionShow(slideFloatNum, directTo, pause)( $(".slide").eq(slideFloatNum).fadeIn(timeList, function() ( if(pause == true) ( rotator( ) )); var old_slideNum = slideNum if(arrow == "next")( 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, "left", true )else( if(arrow !== old_slideNum) ( if(arrow > old_slideNum) ( slideDirectionHide(slideNum, "venstre"); slideNum = pil; slideDirectionShow(slideNum, "right", true); )andet 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("next"); return false; )) $("#prewBut").click(function( ) ( animSlide("prew"); return false; )) ) var addSpan =""; $(".slide").each(function(index) ( addSpan += " " + indeks + ""; }); $("
Fungere animSlide accepterer tre typer værdier: Næste, prew, og en numerisk værdi. Parameter Næste skifter det næste slide, prew forrige, og den numeriske værdi er det specifikt valgte dias gennem radioknapperne under diaset. Funktioner slideDirectionHide Og slideDirectionShow næsten ens og identisk, den første er ansvarlig for forsvinden af dias og bevægelsesretningen af den udgående dias, den anden for diasets udseende, dens bevægelsesretning, når den vises, samt for den angivne visningstid interval.
Når du holder musen over skyderen, stopper displayet.
Det er alt, hvis noget ikke er klart, eller du har spørgsmål, så skriv og spørg.