1. Utmärkt jQuery-bildspel

Ett stort, spektakulärt bildspel med jQuery-teknik.

2. jQuery-plugin "Scale Carousel"

Skalbart bildspel med jQuery. Du kan ställa in de bildspelsstorlekar som passar dig bäst.

3. jQuery-plugin "slideJS"

Bildreglage med textbeskrivning.

4. Plugin "JSliderNews"

5. CSS3 jQuery-skjutreglaget

När du håller muspekaren över navigeringspilarna visas en cirkulär miniatyrbild av nästa bild.

6. Snyggt reglage för jQuery "Presentation Cycle".

jQuery-skjutreglage med bildladdningsindikator. Automatiskt glidbyte tillhandahålls.

7. jQuery-plugin "Parallax Slider"

Reglage med en volymetrisk bakgrundseffekt. Höjdpunkten i detta skjutreglage är rörelsen av bakgrunden, som består av flera lager, som vart och ett rullar med i olika hastigheter. Resultatet är en imitation av den volymetriska effekten. Det ser väldigt vackert ut kan du se själv. Effekten visas smidigare i webbläsare som Opera, Google Chrome, IE.

8. Fräscht, lätt jQuery-reglage "bxSlider 3.0"

På demosidan i avsnittet "exempel" kan du hitta länkar till alla möjliga användningsområden för detta plugin.

9. jQuery bildreglage, "slideJS" plugin

En snygg jQuery-skjutreglage kan verkligen dekorera ditt projekt.

10. jQuery bildspelsplugin "Easy Slides" v1.1

En lättanvänd jQuery-plugin för att skapa bildspel.

11. jQuery Slidy plugin

Lätt jQuery plugin i olika utföranden. Automatiskt glidbyte tillhandahålls.

12. jQuery CSS-galleri med automatisk bildbyte

Om besökaren inte klickar på pilarna "Framåt" eller "Tillbaka" inom en viss tid kommer galleriet att börja rulla automatiskt.

13. jQuery-skjutreglaget "Nivo Slider"

Mycket professionell högkvalitativ lättviktsplugin med giltig kod. Det finns många olika bildövergångseffekter tillgängliga.

14. jQuery-skjutreglaget "MobilySlider"

Fräscht reglage. jQuery-skjutreglaget med olika bildförändringseffekter.

15. jQuery Plugin "Slider²"

Lättviktsreglage med automatisk glidväxlare.

16. Nytt javascript-skjutreglage

Skjutreglage med automatisk bildbyte.

Plugin för att implementera bildspel med automatisk bildbyte. Det är möjligt att styra displayen med hjälp av miniatyrbilder.

jQuery CSS-bildskjutare med NivoSlider-plugin.

19. jQuery-skjutreglaget "jShowOff"

Plugin för innehållsrotation. Tre alternativ för användning: utan navigering (med automatisk ändring av bildspelsformat), med navigering i form av knappar, med navigering i form av miniatyrbilder.

20. Plugin för "Shutter Effect Portfolio".

Nytt jQuery-plugin för att designa en fotografs portfölj. Galleriet har en intressant effekt av att byta bilder. Bilderna följer varandra med en effekt som liknar användningen av en linsslutare.

21. Lätt javascript CSS-reglage "TinySlider 2"

Implementering av en bildskjutare med hjälp av javascript och CSS.

22. Fantastiskt reglage "Tinycircleslider"

Snygg rund reglage. Övergången mellan bilder utförs genom att dra reglaget i form av en röd cirkel runt omkretsen. Det kommer att passa perfekt in på din webbplats om du använder runda element i din design.

23. Bildreglage med jQuery

Lättviktsreglage "Slider Kit". Reglaget finns i olika utföranden: vertikalt och horisontellt. Olika typer av navigering mellan bilder är också implementerade: med hjälp av knapparna "Framåt" och "Tillbaka", med hjälp av mushjulet, med ett musklick på bilden.

24. Galleri med miniatyrer "Slider Kit"

Galleri "Slider Kit". Rullning av miniatyrer utförs både vertikalt och horisontellt. Övergången mellan bilderna görs med hjälp av: mushjulet, musklick eller att hålla markören över miniatyrbilden.

25. jQuery-innehållsreglaget "Slider Kit"

Vertikalt och horisontellt innehållsreglage med jQuery.

26. jQuery bildspel "Slider Kit"

Bildspel med automatisk bildbyte.

27. Lätt professionell javascript CSS3-skjutreglage

Ett snyggt jQuery- och CSS3-skjutreglage skapat 2011.

jQuery bildspel med miniatyrer.

29. Enkelt jQuery-bildspel

Bildspel med navigeringsknappar.

30. Fantastiskt jQuery "Skitter"-bildspel

jQuery Skitter-plugin för att skapa fantastiska bildspel. Pluginen stöder 22 (!) typer av olika animationseffekter vid bildbyte. Kan arbeta med två bildnavigeringsalternativ: att använda bildnummer och använda miniatyrer. Se till att titta på demon, ett fynd av mycket hög kvalitet. Teknik som används: CSS, HTML, jQuery, PHP.

31. Bildspel "Awkward"

Funktionellt bildspel. Slides kan vara: enkla bilder, bilder med bildtexter, bilder med verktygstips, videor. Du kan använda pilar, bildnummerlänkar och vänster-/högertangenter på tangentbordet för att navigera. Bildspelet finns i flera versioner: med och utan miniatyrer. För att se alla alternativ, följ länkarna Demo #1 - Demo #6 som finns längst upp på demosidan.

En mycket original design för bildreglaget, som påminner om en fläkt. Animerad bildövergång. Navigering mellan bilder utförs med pilar. Det finns också en automatisk växling som kan slås på och av med hjälp av knappen Spela upp/Paus på toppen.

Animerad jQuery-skjutreglage. Bakgrundsbilder skalas automatiskt när webbläsarfönstrets storlek ändras. För varje bild visas ett block med en beskrivning.

34. "Flux Slider"-skjutreglage med jQuery och CSS3

Nytt jQuery-skjutreglage. Flera coola animerade effekter när du byter bild.

35. jQuery-plugin "jSwitch"

Animerat jQuery-galleri.

Ett enkelt jQuery-bildspel med automatisk bildbyte.

37. Ny version av plugin "SlideDeck 1.2.2"

Professionellt innehållsreglage. Det finns alternativ med automatisk bildbyte, samt ett alternativ med hjälp av mushjulet för att flytta mellan bilderna.

38. jQuery-skjutreglaget "Sudo Slider"

Lätt bildreglage med jQuery. Det finns många implementeringsalternativ: horisontell och vertikal ändring av bilder, med och utan länkar till bildnummer, med och utan bildtexter, olika bildändringseffekter. Det finns en funktion automatisk förändring rutschbanor. Länkar till alla implementeringsexempel finns på demosidan.

39. jQuery CSS3 bildspel

Bildspel med miniatyrer stöder automatiskt bildbyteläge.

40. jQuery-skjutreglaget “Flux Slider”

Skjutreglage med många bildförändrande effekter.

41. Enkel jQuery-reglage

Snygg bildreglage med jQuery.

42. "Craftyslide" jQuery-bildspel

43. Fullskärm jQuery bildspel

jQuery HTML5-bildspel som sträcker sig över hela skärmens bredd med ljud.

Ett enkelt jQuery-bildspel.

I den här handledningen kommer vi att skapa en enkel adaptiv sida med en rubrik dekorerad med en karusell där bilder glider från höger till vänster. Vår lösning använder inte JavaScript, bildspelet är baserat på CSS3-animationer, som stöds av de flesta moderna webbläsare: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ och IE10.

Steg 1 - Förberedande

Vi kommer att behöva 4 stora bilder (i vårt exempel är storleken 1200px x 390px). För ett horisontellt skjutreglage förbereder vi en bild på 4800px x 390px i Photoshop, placerar alla våra bilder efter varandra horisontellt och sparar resultatet i ett format som är lämpligt för webben (“ slider-horizontal.jpg”).

Steg 2 - HTML

Vad vi faktiskt kommer att göra är att animera egenskapen bakgrundsposition för vår header. Själva rubriken har mycket enkel markering:

L'ile de Batz

Hela sidkoden ser ut så här:

L'ile de Batz

Steg 3: Mobil CSS

Vi börjar definiera stilar för mobila enheter. Låt oss ställa in den grundläggande designen och sedan lägga till malltillägg för större skärmar. Texten i lektionen ger endast de grundläggande egenskaperna. Den fullständiga koden kan ses i källkoden:

Brödtext ( bredd: 90 %; min bredd: 300 px; maxbredd: 1200 px; marginal: 0 auto; utfyllnad: 1 em; färg: #504331 ) rubrik ( textjustering: mitten; position: relativ; ) h1 ( font-size: 2.75em bakgrund: 0 10px marginal-bottom: 0,5em; ; images/map.png) nedre mitten no-repeat: 177px )

Steg 4. Stilar för stora skärmar

Sektioner på stora skärmar .main Och .skärm ska visas annorlunda. Sektion .länk kommer att ha en bredd på 300px och placeras som den högra sidopanel, och avsnitt .main kommer att förbli till vänster. Vi kommer också att lägga till en dubbel linje för att separera sektionerna. Vi kommer att avgöra en skärmbredd som är större än 1024px med hjälp av @media-frågan:

@media only-skärm och (min-bredd: 1024px) (.content (position: relativ; ) .main (marginal-höger: 320px; utfyllnad: .5em 20px .5em 0; /*lägg till en dubbel linje */ kant-höger : 1px solid #504331; box-shadow: 2px 0 vit, 3px 0 #504331 (position: absolut; höger: 0; bredd: 300px; text-align: höger;

Steg 5: Responsiva huvudbilder

Låt oss börja arbeta med huvuddelen av vår lektion: en responsiv CSS-reglage i sidhuvudet. Låt oss först säkerställa anpassningsförmåga bakgrundsbild.

Rubrik (bakgrund: url(../images/slider-horizontal.jpg) 0 nedre repetition-x; bakgrundsstorlek: 400%; utfyllnad-botten: 32,5%; )

Använder två procentvärden (400% för egendom bakgrundsstorlek och 32,5 % för den nedre marginalen) kommer sidhuvudets bakgrund att visas korrekt oavsett skärmstorlek.

Varför 400%? Vi har 4 bilder, så visningen kommer att vara 1/4 av bakgrundsbilden i rubriken. Det vill säga att bakgrundsstorleken ska vara 4 gånger bredare än rubriken.

Varför 32,5%? Vi placerar vår bakgrund längst ner i rubriken. Höjden på bakgrundsbilden är 390px, bredden på den enskilda bilden är 1200px, 390/1200 = 0,325, så höjden är 32,5% av bredden.

Steg 6. Animation

Vi kommer att animera fastigheten bakgrundsposition. För att visa den andra bildegenskapen bakgrundsposition borde ha betydelse 33,33333% botten, tredje - 66,66667 % botten, och den fjärde - 100% botten. Den första bilden visas när egenskapsvärdet är bakgrundsposition likvärdig 0 botten eller 133,33333% botten(vi ställer in upprepningarna till upprepa-x).

Varje bild har 25% av "berömdheten"-tiden. Den första visas från 0 till 25 %, den andra från 25 % till 50 %, den tredje från 50 % till 75 % och den sista från 75 % till 100 %. Vi ställer in övergångarna så att bilden börjar glida ut lite tidigt (med ett värde på 5%) innan 25% av renderingstiden har förflutit. Så här ser det ut @nyckelrutor:

@keyframes h_slide ( 0 % ( bakgrundsposition: 0 % botten; ) 20 % ( bakgrundsposition: 0 % botten; ) 25 % ( bakgrundsposition: 33,33333 % botten; ) 45 % ( bakgrundsposition: 33,33333 % botten ; ) 50 % ( bakgrundsposition: 66,66667 % botten; ) 70 % ( bakgrundsposition: 66,66667 % botten; ) 75 % ( bakgrundsposition: 100 % botten; ) 95 % ( bakgrundsposition: 100 % botten; ) 100 % ( bakgrundsposition: 133,33 % botten; ) )

Observera att du måste lägga till webbläsarprefix: @-webkit-keyframes (för Chrome, Safari, iOS Safari, Android) och @-moz-keyframes (för Firefox 15).

Nedan finns den fullständiga rubrikkoden. Vår "h_slide"-animation upprepas var 24:e sekund (6 sekunder för varje bild) i en oändlig loop. Tidsfunktion spelar roll lätta ut, så att varje bild saktar ner i slutet av övergången.

Rubrik (textjustera: center; position: relativ; bakgrund: url(../images/slider-horizontal.jpg) 0 nedre repetition-x; bakgrundsstorlek: 400%; padding-bottom: 32,5%; -webkit- animation: h_slide 24s ease-out infinite; -moz-animation: h_slide 24s ease-out oändlig;

Jag vill berätta ett enkelt sätt att skapa ett skjutreglage, utan att använda JS, med hjälp av CSS-animation.

1) Låt oss först skriva HTML, låt oss anta att 4 bilder kommer att ersätta varandra i skjutreglaget.

2) Låt oss sedan ställa in blockstorlekarna och några fler inställningar, position: relativ är nödvändig för att skapa ett formateringskontext, då kommer det att vara klart varför.

Skjutreglage ( bredd: 500px; höjd: 300px; marginal: auto; marginal-top: 25px; kant: 1px fast svart; position: relativ; överflöde: dold; )
3) Låt oss också definiera några egenskaper för själva bilderna:

Skjut ( bredd: 500px; höjd: 300px; position: absolut; topp: 0; vänster: 0; )
Som du kan se från CSS placerar vi alla bilderna i det övre vänstra hörnet av skjutreglaget och sätter därmed samma startposition.

1. Sliden är på start position, visas för användaren

2. Sliden flyttas till vänster tills den går helt utanför skjutreglagets gräns (reglaget, som indikerat ovan, har översvämning: dold, så att rutschbanan inte kör in i omgivande föremål).

5. Sliden går ner till samma nivå som skjutreglaget

6. Sliden flyttas till sin ursprungliga position
Med andra ord (för nu kommer jag att namnge ramarna enligt siffrorna från listan ovan):

@keyframes slide ( från ( överst: 0; vänster: 0; ) 1 ( transform: translate(0px, 0px); ) 2 ( transform: translate(-500px, 0); ) 3 ( transform: translate(-500px, 300px) ); ) 4 ( transformera: translate(500px, 300px); ) 5 ( transformera: translate(500px, 0); ) till ( transformera: (0px, 0px); ) )
5) Så det blev tydligt hur rutschbanan ser ut. Varje bild "färdas" runt sin behållare - skjutreglaget - och återgår till den ursprungliga. På så sätt kan vi oändligt rotera hur många bilder som helst. Men det finns en nyans kvar, som är den viktigaste i detta schema - tid. Du måste ta rätt tid på animeringens storyboard och ställa in rätt fördröjning för varje bild så att inte alla skyndar sig att animera samtidigt. För att förstå hur man korrekt ställer in fördröjningen och beräknar animationstiden, följde jag vägen som beskrivs nedan.

Låt oss ta stegbeteckningarna från föregående stycke och ta reda på vad som händer i varje steg. I huvudsak är steg nr 1, 2 och 6 stegen där rutschbanan går in i det synliga området. Från det faktum att bilderna ska röra sig oupplösligt och så att säga trycka ut varandra ur reglaget kan vi dra slutsatsen att varaktigheten av steg 2 och 6 bör vara lika. Låt mig omedelbart göra en reservation för att jag kunde framgångsrikt arbeta med den här designen endast under förutsättning att varaktigheten av det första steget också var lika med varaktigheten för den 2:a och 6:e. Det som händer under steg 3,4 och 5 är i huvudsak tekniska behov, och låt oss för enkelhetens skull kombinera dessa tre steg till 1.

Efter förenkling har vi:

1. Steg – skjutreglaget visas på originalet
2. Steg – reglaget flyttas åt höger
3. Steg – reglaget gör tekniska rörelser
4. Steg – reglaget flyttas åt vänster och återgår till sin ursprungliga position

För att säkerställa ett sömlöst bildspel bör nästa bild starta steg 4 i samma ögonblick som en bild startar steg 2.

Om tiden för cirkeln av hela animationen är t;
Antal bilder – n;
Varaktighet av 3 steg – y;
Varaktighet av steg 1,2 och 4 – x;
Animationsfördröjningssteg för n-slide – z;
Den där:

Y = (100 * n - 150)/n;
x = (100 - y) / 3;
x och y måste konverteras till procentsatser och sedan:
z = 2 * x * t;

För fallet när n = 4, som i exemplet ovan, får vi:

3:e steget – 62,5 %, 1:a, 2:a och 4:e – 12,5 % vardera. Animeringsfördröjningssteget för varje efterföljande bild är 25 %.

Det spelar ingen roll vilka intervaller det blir mellan stegen inom det tredje steget.

6) Nu när vi har räknat ut allt och känner till alla värden kan vi ge den slutliga koden.

Animation:

@keyframes slide (från (överst: 0; vänster: 0; ) 12,5%​( transform: translate(0px, 0px); ) 25% (translate: translate(-500px, 0); ) 36% (translate: translate (- 500px, 300px); 37% ( transform: translate(500px, 300px); ) 87,5% ( transform: translate(500px, 0); ) till ( transform: (0px, 0px); ) )
Bilder:

Slide1 ( bakgrund: url(1.jpg); animation-delay: 7,5s; ) .slide2 (bakgrund: url(2.jpg); animation-delay: 5s; ) .slide3 (bakgrund: url(3.jpg); animation-delay: 2,5s; ) .slide4 (bakgrund: url(4.jpg); animation-delay: 0s; )
Gemensam CSS för alla bilder:

Slide ( bredd: 500px; höjd: 300px; position: absolut; topp: 0; vänster: 0; animationsnamn: slide; animation-varaktighet: 10s; animation-timing-funktion: linjär; animation-iteration-count: oändlig; )
Det är allt! Tack till alla som läst till slutet.

Om du behöver lägga till ett högkvalitativt jQuery-bildskjutreglage på din webbplats, så hittar du i den här artikeln en beskrivning nödvändiga plugins. Även om JQuery har gjort arbetet med JavaScript mycket enklare, behöver vi fortfarande plugins för att påskynda webbdesignprocessen.

Vi kan göra ändringar i några av dessa plugins och skapa nya reglage som är mycket mer lämpade för syftet med vår webbplats.

För andra skjutreglage lägger du helt enkelt till titlar, bilder och väljer bildövergångseffekter som följer med skjutreglaget. Alla dessa plugins åtföljs av detaljerad dokumentation, så att lägga till nya effekter eller funktioner till dem kommer inte att vara svårt. Du kan till och med ändra händelsebaserade triggers om du är en erfaren JQuery-programmerare.

Senaste trenderna som t.ex adaptiv design, är mycket viktiga för webbprojekt, oavsett om du implementerar ett plugin eller ett skript. Alla dessa element gör var och en av dessa plugins mycket flexibla. Allt som kom ut 2014 finns med i denna lista.

jQuery bildreglage

Jssor Responsive Slider

Jag kom nyligen över detta kraftfulla jQuery-skjutreglage och kunde se första hand att det gör sitt jobb väldigt bra. Den innehåller obegränsade möjligheter som kan utökas genom skjutreglagets öppna källkod:

• Adaptiv design;
• Mer än 15 anpassningsalternativ;
• Mer än 15 bildförändrande effekter;
• Bildgalleri, karusell, stöd för fullskärmsstorlek;
• Vertikal banderollrotator, lista över bilder;
• Videostöd.

Demo | Ladda ner

PgwSlider - responsiv reglage baserat på JQuery / Zepto

Den enda uppgiften för detta plugin är att visa bilder med bilder. Den är väldigt kompakt, eftersom JQuery-filerna bara är 2,5 KB stora, vilket gör att den kan laddas riktigt snabbt:

• Adaptiv layout;
• SEO-optimering;
• Stöd för olika webbläsare;
• Enkla bildövergångar;
• Arkivstorleken är endast 2,5 KB.

Demo | Ladda ner

Jquery Vertical News Slider

Ett flexibelt och användbart JQuery-skjutreglage designat för nyhetsresurser med en lista över publikationer på vänster sida och en bild som visas till höger:

• Adaptiv design;
• Vertikal kolumn för att byta nyheter;
• Utökade rubriker.

Demo | Ladda ner

Wallop Slider

Det här skjutreglaget innehåller inte jQuery, men jag skulle vilja presentera det eftersom det är väldigt kompakt och avsevärt kan minska sidladdningstiden. Säg till om du gillar det:

• Adaptiv layout;
• Enkel design;
• Olika alternativ för glidbyte;
• Minimal JavaScript-kod;
• Storleken är bara 3KB.

Demo | Ladda ner

Polaroidgalleri i platt stil

Ett dokument-utspridda-på-skrivbord-stil med en flexibel layout och vacker design borde vara intressant för många av er. Mer lämplig för surfplattor och stora skärmar:

• Adaptiv reglage;
• Platt design;
• Slumpmässig bildbyte;
• Full tillgång till källkoden.

Demo | Ladda ner

A-Slider

Demo | Ladda ner

HiSlider – HTML5, jQuery och WordPress bildreglage

HiSlider har introducerat en ny gratis jQuery slider plugin med vilken du kan skapa en mängd olika bildgallerier med fantastiska övergångar:

• Adaptiv reglage;
• Kräver inga programmeringskunskaper;
• Flera fantastiska mallar och skal;
• Vackra övergångseffekter;
• Stöd för olika plattformar;
• Kompatibel med WordPress, Joomla, Drupal;
• Möjlighet att visa innehåll olika typer: bilder, YouTube-video och Vimeo-videor;
• Flexibel installation;
• Användbara ytterligare funktioner;
• Obegränsad mängd innehåll som visas.

Demo | Ladda ner

Wow skjutreglage

WOW Slider är skjutreglage för responsiv jQuery bilder med fantastiska visuella effekter ( domino, rotera, oskärpa, vända och blinka, flyga ut, mörkar) och professionella mallar.

WOW Slider kommer med en installationsguide som låter dig skapa fantastiska reglage på några sekunder utan att behöva förstå kod eller redigera bilder. Versioner av plugin för Joomla och WordPress finns också tillgängliga för nedladdning:

• Fullt lyhörd;
• Stöder alla webbläsare och alla typer av enheter;
• Stöd beröringsenheter;
• Enkel installation på WordPress;
• Flexibilitet i konfigurationen;
• SEO-optimerad.

Demo | Ladda ner

Nivo Slider – gratis jQuery-plugin

Nivo Slider är känt över hela världen som den vackraste och lättanvända bildskjutaren. Nivo Slider-plugin är gratis och släppt under MIT-licensen:

• Kräver JQuery 1.7 och högre;
• Vackra övergångseffekter;
• Enkel och flexibel att konfigurera;
• Kompakt och adaptiv;
• Öppen källa;
• Kraftfull och enkel;
• Flera olika mallar;
• Automatisk bildbeskärning.

Demo | Ladda ner

Enkel jQuery-reglage med teknisk dokumentation

Idén är inspirerad av Apples reglage, där flera små element kan flyga ut med olika animationseffekter. Utvecklarna försökte implementera detta koncept med hänsyn tagen minimikrav att skapa en enkel onlinebutiksdesign där de "flygande" elementen representerar olika kategorier:

• Adaptiv layout;
• Minimalistisk design;
• Olika drop-out och glidföränderliga effekter.

Demo | Ladda ner

Bildreglaget för jQuery i full storlek

En mycket enkel reglage som upptar 100 % av sidbredden och anpassar sig till skärmstorlekarna på mobila enheter. Det fungerar med CSS-övergångar, och bilder "staplas" tillsammans med ankare. Ankaret kan bytas ut eller tas bort om du inte vill bifoga en länk till bilden.

När det är installerat expanderar reglaget till 100 % av skärmens bredd. Det kan också automatiskt minska storleken på diabilder:

• Adaptiv JQuery-skjutreglage;
• Full storlek;
• Minimalistisk design.

Demo | Ladda ner

Elastic Content Slider + handledning

Elastic Content Slider justerar automatiskt bredd och höjd baserat på måtten på det överordnade elementet. Detta är ett enkelt jQuery-skjutreglage. Den består av ett bildområde längst upp och en navigeringsflik längst ner. Reglaget justerar sin bredd och höjd efter måtten på föräldrabehållaren.

När de visas på små diagonala skärmar förvandlas navigeringsflikarna till små ikoner:

• Adaptiv design;
• Rullning med musklick.

Demo | Ladda ner

Gratis 3D Stack Slider

Ett experimentellt reglage som rullar genom bilder i 3D. De två buntarna liknar pappershögar, från vilka bilderna, när de rullas, visas i mitten av skjutreglaget:

• Adaptiv design;
• Vänd - övergång;
• 3D-effekter.

Demo | Ladda ner

Slitreglage för helskärm baserad på JQuery och CSS3 + handledning

Denna handledning visar dig hur du skapar en skjutreglage med en twist: tanken är att "klippa ut" och visa den aktuella bilden när du öppnar nästa eller föregående bild. Med JQuery och CSS-animering kan vi skapa unika övergångseffekter:

• Adaptiv design;
• Delad övergång;
• Helskärmsreglage.

Demo | Ladda ner

Unislider - ett mycket litet jQuery-skjutreglage

Inga onödiga klockor och visselpipor, mindre än 3KB i storlek. Använd valfri HTML-kod för dina bilder, utöka den med använder CSS. Allt relaterat till Unslider finns på GitHub:

• Stöd för olika webbläsare;
• Tangentbordsstöd;
• Höjd justering;
• Adaptiv design;
• Stöd för touchingång.

Demo | Ladda ner

Minimal responsiva bilder

Enkelt och kompakt plugin ( storleken är bara 1 KB), vilket skapar en responsiv reglage med hjälp av element inuti en behållare. ResponsiveSLides.js fungerar med ett brett utbud av webbläsare, inklusive alla versioner av IE från IE6 och högre:

• Fullt lyhörd;
• Storlek 1 KB;
• CSS3-övergångar med möjlighet att köra via JavaScript;
• Enkel markering med punktlistor;
• Möjlighet att anpassa övergångseffekter och visningslängd för en bild;
• Stöder möjligheten att skapa flera bildspel;
• Automatisk och manuell rullning.

Demo | Ladda ner

Kamera - gratis jQuery-skjutreglage

Kamera är ett plugin med många övergångseffekter, adaptiv layout. Lätt att ställa in, stöds av mobila enheter:

• Fullt responsiv design;
• Signaturer;
• Möjlighet att lägga till videor;
• 33 olika färgikoner.

Demo | Ladda ner

SlidesJS, responsiv jQuery-plugin

SlidesJS är en responsiv plugin för JQuery (1.7.1 och högre) med stöd för pekenheter och CSS3-övergångar. Experimentera med det, prova några färdiga exempel som hjälper dig att ta reda på hur du lägger till SlidesJS till ditt projekt:

• Adaptiv design;
• CSS3-övergångar;
• Stöd för pekenheter;
• Lätt att ställa in.

Demo | Ladda ner

BX Jquery Slider

Detta är en gratis responsiv jQuery-skjutreglage:

• Fullt lyhörd – anpassar sig till alla enheter;
• Horisontell, vertikal glidförändring;
• Presentationer kan innehålla bilder, videor eller HTML-innehåll;
• Utökat stöd för pekenheter;
• Använda CSS-övergångar för bildanimering ( hårdvaruacceleration);
• API-återuppringningar och helt offentliga metoder;
• Liten filstorlek;
• Lätt att implementera.

Demo | Ladda ner

FlexSlider 2

Det bästa känsliga reglaget. En ny version modifierades för att öka hastigheten och kompaktheten.

Demo | Ladda ner

Galleria - JavaScript-baserat responsivt fotogalleri

Galleria används på miljontals sajter för att skapa bildgallerier i hög kvalitet. Antalet positiva recensioner om hennes arbete är helt enkelt utanför listorna:

• Helt gratis;
• Helskärmsvisningsläge;
• 100 % adaptiv;
• Ingen programmeringserfarenhet krävs;
• Stöd för iPhone, iPad och andra pekenheter;
• Flickr, Vimeo, YouTube och mer;
• Flera ämnen.

Demo | Ladda ner

Blueberry - en enkel responsiv jQuery-bildreglage

Jag presenterar för dig en jQuery bildreglage skriven speciellt för responsiv webbdesign. Blueberry är ett experimentellt plugin för bildskjutare med öppen källkod som skrevs specifikt för att fungera med responsiva mallar:

• Minimal design;
• Adaptiv layout;
• Presentationer.

Demo | Ladda ner

jQuery Popeye 2.1

Används standardelement första versionen av programmet: reglaget försvinner till vänster och dyker upp till höger. Samma navigeringselement och bildtexter som dyker upp vid muspekaren:

• Adaptiv design;
• Signaturstöd;
• Bildspelsläge.

Demo | Ladda ner

Samling av gratis HTML- och CSS-reglage kodexempel: kort, jämförelse, helskärm, responsiv, enkel, etc. Uppdatering av mars 2018-kollektionen. 2 nya föremål.

Innehållsförteckning

Om koden

En uppsättning introduktionsskärmar i HTML/CSS/JS. Ett personligt experiment med lager PNG-ikoner, CSS3-övergångar och flexbox.

Reglage för HTML, CSS och JavaScript informationskort.
Tillverkad av Andy Tran
23 november 2015

Fotoreglage fungerar på stationära och mobila webbläsare.
Tillverkad av Taron
29 september 2014

Jämförelse (Före/Efter) Reglage

Om koden

En enkel och ren bildjämförelsereglage, helt responsiv och beröringsfärdig med CSS och jQuery.

Om koden

En före och efter reglage med endast html och css.

Om koden

Leker med en ny idé med mitt två lager före/efter bild-skjutreglage. Att hålla det minimalt. Behåller det vanilj. Gilla om det är användbart :)

Vanilla JS, minimal, snygg att se ut.
Tillverkad av Huw
3 juli 2017

Om koden

Ett "split-screen" skjutreglage med JavaScript.

Ett litet experiment för ett före & efter-reglage, allt i en SVG. Maskering gör det ganska enkelt. Eftersom allt är SVG, skalas bilderna och bildtexterna fint tillsammans. GreenSocks Draggable och ThrowProps plugins användes för skjutreglaget.
Tillverkad av Craig Roblewsky
17 april 2017

Använder anpassad intervallingång för skjutreglaget.
Tillverkad av Dudley Storey
14 oktober 2016

Reglage för responsiv bildjämförelse med HTML, CSS och JavaScript.
Tillverkad av Ege Görgülü
3 augusti 2016

Reglaget för jämförelse av HTML5, CSS3 och JavaScript-video före och efter.
Tillverkad av Dudley Storey
24 april 2016

Ett praktiskt skjutbart skjutreglage för att snabbt jämföra 2 bilder, driven av CSS3 och jQuery.
Tillverkad av CodyHouse
15 september 2014

Helskärmsreglage

Om koden

Trevlig övergångseffekt för helskärmsreglaget.

Om koden

Horisontell parallax glidreglage med Swiper.js.

Om koden

Responsivt smidigt 3D-perspektivreglage när du flyttar musen.

Helskärmsreglage för hjältebilder (svep paneltema) med HTML, CSS och JavaScript.
Tillverkad av Tobias Bogliolo
25 juni 2017

En skjutreglageinteraktion som använder Velocity och Velocity-effekter (UI Pack) för att förbättra animationen. Animering utlöses via piltangenter, navigeringsklick eller rullningsuttag. Denna version inkluderar gränser som en del av interaktionen.
Tillverkad av Stephen Scaff
11 maj 2017

Enkelt reglage i minimal stil för att visa upp bilder. En del av bilden dyker upp på varje bild.
Tillverkad av Nathan Taylor
22 januari 2017

Saken är ganska lätt att anpassa. Du kan säkert ändra teckensnitt, teckenstorlek, teckensnittsfärg, animationshastighet. Den första bokstaven i en ny sträng i array i JS kommer att visas på en ny bild. Lätt att skapa (eller ta bort) en ny bild: 1. Lägg till ny stad i arrayen i JS. 2. Ändra antal diabilder och lägg in en ny bild i scss-listan i CSS.
Tillverkad av Ruslan Pivovarov
8 oktober 2016

1. Klippbana för bildmaskering av rektangelkant (endast webkit).
2. Blandningsläge för denna mask.
3. Smart färgsystem, lägg bara ditt färgnamn och -värde i en sass karta och lägg sedan till rätt klass med detta färgnamn till element och allt kommer att fungera!
4. Coola krediters sidomeny (klicka på den lilla knappen i mitten av demon).
5. Vanilj js med bara< 200 lines of code (basically it’s just adds/removes classes).

Tillverkad av Nikolay Talanov
7 oktober 2016

Detta skeva reglage med rullning baserat på ren JS och CSS (utan bibliotek).
Tillverkad av Victor Belozyorov
3 september 2016

En reglageanimation med Pokemon-design.
Tillverkad av Pham Mikun
18 augusti 2016

HTML, CSS och JavaScritp reglage med komplex animering och halvfärgad vinklad text.
Tillverkad av Ruslan Pivovarov
13 juli 2016

Slider parallax effekt med HTML, CSS och JavaScript.
Tillverkad av Manuel Madeira
28 juni 2016

Reglage för HTML, CSS och JavaScript med krusningseffekt.
Tillverkad av Pedro Castro
21 maj 2016

Clip-Path-avslöjande reglage med HTML, CSS och JavaScript.
Tillverkad av Nikolay Talanov
16 maj 2016

GSAP + Slick reglage med förhandsvisning av föregående/nästa bilder.
Tillverkad av Karlo Videk
27 april 2016

Helsidesreglage för HTML, CSS och JavaScript.
Tillverkad av Joseph Martucci
28 februari 2016

Full skjutreglage prototyp med HTML, CSS och JavaScript.
Tillverkad av Gluber Sampaio
6 januari 2016

Ett slags responsivt bildspel i helskärmsläge animerat med Greensocks TweenLite/Tweenmax.
Tillverkad av Arden
12 december 2015

Tillverkad av Arden
5 december 2015

Helskärmsreglage (GSAP Timeline) #1 med HTML, CSS och JavaScript.
Tillverkad av Diaco M.Lotfollahi
23 november 2015

HTML- och CSS-reglage med anpassade effekter.
Tillverkad av Nikolay Talanov
12 november 2015

Helskärmsdragreglage med parallax med HTML, CSS och JavaScript.
Tillverkad av Nikolay Talanov
12 november 2015

Proof of concept roterande reglage. Använder clip-path och mycket matematik.
Tillverkad av Tyler Johnson
16 april 2015

En enkel CSS- och jQuery-skjutreglage i helskärm som använder translateX och translate3d-jämnhet!
Tillverkad av Joseph
19 augusti 2014

Responsiva skjutreglage

Om koden

Bild och innehåll med parallaxeffekt.

Om koden

Ett experiment för att skapa ett helt responsivt vertikalt skjutreglage med miniatyrer med enbart CSS och bibehålla bildförhållandet.

Om koden

En enkel Flexbox bildskjutare/karusell gjord med vanilj JavaScript.

Om koden

Detta är ett experiment som simulerar en rörelseoskärpa effekt varje gång en bild växlas. Den drar fördel av SVG Gaussian Blur-filter och vissa CSS-nyckelrutoranimationer. Även om effekten inte kräver något Javascript för att fungera korrekt, används Javascript i det här exemplet endast för skjutreglagets funktionalitet.

Om koden

Cool animerar reglaget med JS.

Om koden

Det här är ett experiment på hur SVG-mönster kan hjälpa oss att skapa maskerade bilder för en bildreglage endast för CSS.

Utforskar några skjutreglageövergångar. Swiper-reglage med parallax-alternativ aktiverat. Spelar mest med CSS-filter här.
Tillverkad av Mirko Zorić
12 juni 2017

Enkelt GSAP-reglage med några subtila interpoleringsanimationer.
Tillverkad av Goran Vrban
9 juni 2017

Slider UI med HTML, CSS och JavaScript.
Tillverkad av Mergim Ujkani
6 juni 2017

Slider GSAP version 2.
Tillverkad av Em An
4 maj 2017

Ett litet slarvigt övergångsreglage med en enkel add class-deal. Måste jämna ut tiderna lite och bestämma det bästa tillvägagångssättet för mobilen (bara stapla, lägga till beröringshändelser, skapa bilder i full viewport, etc. Stöder rullhjul (scroll jacking), navigeringsknappar och piltangenter. Kan också öka innehållsomslaget att få bilderna att fylla viewporten i deras icke-animerande tillstånd, vilket också är ganska coolt.
Tillverkad av Stephen Scaff
3 januari 2017

Utnyttjade CSS-kantbild och klippbana för att skapa en animeringseffekt för reglaget.
Tillverkad av Emily Hayman
31 december 2016

Liten reglage byggd med flexbox. Något lyhörd och kan ha fasta element vid sidan av skjutreglaget.
Tillverkad av Robert
28 november 2016

Reglage för HTML, CSS canvas.
Tillverkad av Nvagelis
29 oktober 2016

HTML, CSS och JavaScript 3D smidigt reglage.
Tillverkad av Eduardo Allegrini
19 oktober 2016

HTML och CSS cupcake reglage med strössel!
Tillverkad av Jamie Coulter
14 oktober 2016

Tillverkad av mario s maselli
12 oktober 2016

Utforskar UI-animation #2 med HTML, CSS och JavaScript.
Tillverkad av mario s maselli
22 september 2016

Utforskar UI-animation #3 med HTML, CSS och JavaScript.
Tillverkad av mario s maselli
22 september 2016

Ecommerce Slider v2.0 med HTML, CSS och JavaScript.
Tillverkad av Pedro Castro
17 september 2016

HTML, CSS och JavaScript ren reglage med böjd bakgrund.
Tillverkad av Ruslan Pivovarov
13 september 2016

Utforska UI-animation #1 med HTML, CSS och JavaScript.
Tillverkad av mario s maselli
8 september 2016

Njut av kraften i CSS: Upp och ner varje mittbild och sidnumrerad reglage med ljuslåda.
Tillverkad av Kseso
15 augusti 2016

Dubbelexponering är en fotografisk teknik som kombinerar 2 olika bilder till en enda bild.
Tillverkad av Misaki Nakano
3 augusti 2016

Skjutreglage med CSS3-egenskapsklipp.
Tillverkad av Pedro Castro
1 maj 2016

Responsiv CSS-reglage.
Tillverkad av geekwen
19 april 2016

Detta är ett enkelt skjutreglageexperiment som visar ord med vackra betydelser som inte kan översättas direkt. Fokus: elegant typografi och enkla men lockande övergångar.
Gjord av Joe Harry
5 april 2016

Animationsidén är att ändra värdet på CSS-klippbanan och på så sätt skapa en maskeringseffekt.
Tillverkad av Bhakti Al Akbar
31 mars 2016

Punktreglage med HTML, CSS och JavaScript.
Tillverkad av Derek Nguyen
16 mars 2016

Prismaeffektreglage med HTML, CSS och JavaScript.
Tillverkad av victor
12 mars 2016

Glidande bakgrundsgalleri med HTML, CSS och JavaScript.
Tillverkad av Ron Gierlach
30 november 2015

HTML, CSS och JavaScript-skjutreglagelösning.
Tillverkad av Jürgen Genser
30 september 2015

Ett produktskjutreglage som drivs av Sequence.js. Sequence.js - Det lyhörda CSS-animationsramverket för att skapa unika reglage, presentationer, banners och andra stegbaserade applikationer.
Tillverkad av Ian Lunn
15 september 2015

Liten cirkel anpassad reglage.
Tillverkad av Bram de Haan
11 augusti 2015

Responsiv GTA V-skjutreglage med HTML, CSS och JavaScript.
Tillverkad av Eduard Mayer
24 januari 2014

Det är som ett reglage men det roterar kubiskt av okänd anledning.
Tillverkad av Eric Brewer
4 december 2013

Tillverkad av Hugo DarbyBrown
28 augusti 2013

Enkla skjutreglage

Bildöverlagringsreglage med HTML, CSS och vanilla JavaScript.
Tillverkad av Yugam
7 juni 2017

HTML- och CSS-bildreglage.
Tillverkad av Joshua Hibbert
16 juni 2016

Om koden

Enkel ren gjord med

Funktionsreglage med HTML, CSS och JavaScript.
Tillverkad av Andy Lorimer
23 oktober 2015

Endast CSS.
Tillverkad av Alberto Hartzet
6 maj 2015

Funktioner: - automatiskt bildspel - paus vid hovring - dynamisk bildräknare - visa/dölj kontroller vid hovring.
Tillverkad av André Cortellini
14 augusti 2014

Fleraxligt bildreglage med HTML, CSS och JavaScript.
Tillverkad av Burak Can
22 juli 2013

Kubreglage, ett litet experiment med HTML5/CSS3 3d-transformationer.
Tillverkad av Ilya K.
26 juni 2013