För närvarande är en reglage - karusell - en funktion som helt enkelt är nödvändig att ha på en företagswebbplats, portföljwebbplats eller någon annan resurs. Tillsammans med bildreglage för helskärm passar horisontella karusellreglage bra in i alla webbdesigner.

Ibland bör skjutreglaget uppta en tredjedel av webbplatssidan. Här används karusellreglaget med övergångseffekter och responsiva layouter. E-handelssajter använder en karusellreglage för att visa flera foton i enskilda inlägg eller sidor. Skjutkoden kan fritt användas och modifieras efter dina behov.

Genom att använda JQuery i kombination med HTML5 och CSS3 kan du göra dina sidor mer intressanta, förse dem med unika effekter och dra besökarnas uppmärksamhet till ett specifikt område på webbplatsen.

Slick – modernt plugin för karusellreglage

Slick är ett fritt tillgängligt jquery-plugin vars utvecklare hävdar att deras lösning kommer att tillfredsställa alla dina skjutreglagekrav. Adaptivt skjutreglage - karusellen kan fungera i "bricka"-läge för mobila enheter och i "dra och släpp"-läge för skrivbordsversionen.

Innehåller en "fade" övergångseffekt, en intressant "center mode" funktion, lat inläsning av bilder med automatisk rullning. Uppdaterad funktionalitet inkluderar att lägga till bilder och ett diafilter. Allt för att säkerställa att du konfigurerar plugin-programmet enligt dina krav.

Demoläge | Ladda ner

Owl Carousel 2.0 – jQuery – plugin för användning på pekenheter

Detta plugin har en stor uppsättning funktioner som passar både nybörjare och erfarna utvecklare. Detta är en uppdaterad version av karusellreglaget. Hans föregångare hade samma namn.

Reglaget har några inbyggda plugins för att förbättra den övergripande funktionaliteten. Animation, videouppspelning, skjutreglage autoplay, lazy loading, automatisk höjdjustering – det här är huvudfunktionerna i Owl Carousel 2.0.

Funktionsstöd dra och släpp drop ingår för mer bekväm användning av plugin på mobila enheter.
Plugin-programmet är perfekt för att visa stora bilder även på små skärmar på mobila enheter.

Exempel | Ladda ner

jQuery plugin Silver Track

En ganska liten, men funktionellt rik jquery-plugin som låter dig placera en reglage på en sida - en karusell, som har en liten kärna och inte förbrukar mycket webbplatsresurser. Insticksprogrammet kan användas för att visa vertikala och horisontella reglage, med animering och skapa uppsättningar bilder från galleriet.

Exempel | Ladda ner

AnoSlide – Ultrakompakt responsiv jQuery-skjutreglage

Ultrakompakt jQuery-skjutreglage - karusell, vars funktionalitet är mycket större än en vanlig reglage. Dessa inkluderar förhandsgranskning av en bild, visning av flera bilder i karusell och titelbaserad skjutreglage.

Exempel | Ladda ner

Ugglakarusell – Jquery-reglage – karusell

Ugglekarusell – reglage med stöd pekskärmar och dra och släpp-teknik, lätt integrerad i HTML-kod. Insticksprogrammet är ett av de bästa reglagen som låter dig skapa vackra karuseller utan någon speciellt förberedd markering.

Exempel | Ladda ner

3D-galleri - karusell

Använder 3D-övergångar baserade på CSS-stilar och lite Javascript-kod.

Exempel | Ladda ner

3D-karusell med TweenMax.js och jQuery

Magnifik 3D-karusell. Det ser ut som att detta fortfarande är en betaversion, eftersom jag upptäckte ett par problem med den nyss. Om du är intresserad av att testa och skapa dina egna reglage kommer denna karusell vara till stor hjälp.

Exempel | Ladda ner

Karusell med bootstrap

Responsiv reglage - karusell med bootstrap-teknik bara för din nya webbplats.

Exempel | Ladda ner

Moving Box-karusellreglage baserat på Bootstrap-ramverket

Mest populärt på portfölj- och företagswebbplatser. Denna typ av reglage - karusell - finns ofta på webbplatser av alla slag.

Exempel | Ladda ner

Tiny Circleslider

Detta skjutreglage i liten storlek är redo att fungera på enheter med vilken skärmupplösning som helst. Reglaget kan fungera i både cirkulärt och karusellläge. Tiny circle presenteras som ett alternativ till andra skjutreglage av denna typ. Inbyggt stöd tillgängligt operativsystem IOS och Android.

I cirkulärt läge ser reglaget ganska intressant ut. Utmärkt stöd för dra och släpp-metoden och ett automatiskt rullningssystem.

Exempel | Ladda ner

Thumbelina Content Slider

Ett kraftfullt, adaptivt karusellreglage är perfekt för en modern webbplats. Fungerar korrekt på alla enheter. Har horisontella och vertikala lägen. Dess storlek är minimerad till bara 1 KB. Det ultrakompakta pluginet har också utmärkta mjuka övergångar.

Exempel | Ladda ner

Wow – reglage – karusell

Innehåller mer än 50 effekter, som kan hjälpa dig att skapa ett originalreglage för din webbplats.

Exempel | Ladda ner

Responsiv jQuery-innehållsreglage bxSlider

Ändra storlek på webbläsarfönstret för att se hur reglaget anpassar sig. Bxslider kommer med mer än 50 anpassningsalternativ och visar upp sina funktioner med olika övergångseffekter.

Exempel | Ladda ner

jKarusell

jCarousel är ett jQuery-plugin som hjälper till att organisera visningen av dina bilder. Du kan enkelt skapa anpassade bildkaruseller från basen som visas i exemplet. Reglaget är anpassningsbart och optimerat för arbete på mobila plattformar.

Exempel | Ladda ner

Scrollbox - jQuery-plugin

Scrollbox är ett kompakt plugin för att skapa en reglage - en karusell eller en textgenomsökning. Viktiga funktioner inkluderar vertikala och horisontella rullningseffekter med paus på musen över.

Exempel | Ladda ner

dbpasKarusell

En enkel karusellreglage. Om du behöver ett snabbt plugin är det här 100% lämpligt. Levereras med endast de grundläggande funktionerna som krävs för att reglaget ska fungera.

Exempel | Ladda ner

Flexisel: Responsive JQuery Slider Plugin - Karusell

Skaparna av Flexisel inspirerades av den gamla skolans plugin jCarousel, och gjorde en kopia av den som syftade till korrekt funktion av reglaget på mobila enheter och surfplattor.

Flexisels responsiva layout, när den körs på mobila enheter, skiljer sig från en layout i webbläsarfönsterstorlek. Flexisel är perfekt anpassad för att fungera på skärmar, både med låg och hög upplösning.

Exempel | Ladda ner

Elastislide – adaptiv reglage – karusell

Elastislide anpassar sig perfekt till storleken på din enhets skärm. Du kan ställa in det minsta antalet bilder som ska visas med en specifik upplösning. Fungerar bra som en karusellreglage med bildgallerier, med ett fast omslag tillsammans med en vertikal rullningseffekt.

Exempel | Ladda ner

FlexSlider 2

Freeware slider från Woothemes. Det anses med rätta vara en av de bästa adaptiva reglagen. Insticksprogrammet innehåller flera mallar och kommer att vara användbart för både nybörjare och experter.

Exempel | Ladda ner

Underbar karusell

Fantastisk karusell – responsiv bildreglage med jQuery. Stöder många innehållshanteringssystem som WordPress, Drupal och Joomla. Stöder även Android och IOS och stationära operativsystem utan några kompatibilitetsproblem. Inbyggda fantastiska karusellmallar låter dig använda reglaget i vertikala, horisontella och cirkulära lägen.

Exempel | Ladda ner

I den här artikeln kommer vi att titta på hur mycket enkelt du kan skapa en adaptiv reglage för en webbplats med hjälp av CSS Flexbox och CSS-transformationer.

Skjutreglage källkoder och demo

Ett skjutreglageprojekt som heter chiefSlider finns på GitHub. Du kan gå till den via denna länk.

Reglage med en aktiv slide (ingen looping):

Reglage med tre aktiva diabilder (ingen looping):

Ett exempel som visar hur du kan använda ett reglage för att rotera artiklar:

Fördelar med chiefSlider

Låt oss lista de viktigaste fördelarna med denna reglage:

• först och främst han skapar inte kloner av element (objekt) för att organisera looping, som implementerat, till exempel i plugins OwlCarousel Och smart;
• för det andra beror det inte på biblioteket jQuery; detta tar inte bara bort ytterligare krav, utan gör det också lättare;
• för det tredje är han praktiskt taget gör inga ändringar i dokumentets DOM; det enda den gör är att lägga till eller ändra CSS-transformationsvärden för skjutreglageelement;
• för det fjärde innehåller den bara minsta uppsättning funktioner; ytterligare funktionalitet kan läggas till beroende på uppgiften;
• för det femte är den adaptiv, dvs. den kan användas på vilken webbplats som helst; Reglagets anpassningsförmåga konfigureras med CSS;
• för det sjätte, antalet aktiva element justeras med CSS; detta betyder att den kan användas för att skapa en karusell med antingen en aktiv bild eller valfritt antal av dem.

Installera chiefSlider

Att installera skjutreglaget tar 3 steg:

• lägg till chiefSlider CSS på sidan eller till en CSS-fil kopplad till sidan;
• placera skjutreglagets HTML-kod på önskad plats på sidan;
• infoga JavaScript-kod på sidan eller i en js-fil som är ansluten till sidan.

Det är tillrådligt att minimera CSS- och JavaScript-koden, den här åtgärden ger mer snabb laddning sidor.

Hur man utvecklar en enkel reglage för en webbplats (utan looping)

Skapa en skjutreglage chiefSlider kommer att bestå av HTML skapande kod, CSS och JavaScript (utan jQuery).

Skjutreglage HTML-kod chiefSlider:

Som du kan se har reglaget en mycket enkel HTML-arkitektur. Det börjar med huvudblocket, som har en reglageklass. Detta block består av 3 element.

Det första elementet är .slider__wrapper . Det fungerar som ett omslag för .slider__item-element (slides).

De återstående två elementen (.slider__control) representerar visuellt knappar. De kommer att användas för att navigera i bilden, dvs. flytta till föregående och nästa element.

CSS-kod för chiefSlider-skjutreglaget:

/* MAIN STILES */ .slider (position: relativ; overflow: hidden; ) .slider__wrapper (display: flex; övergång: transformera 0,6s lätthet; /* 0,6 slide change varaktighet i sekunder */ ) .slider__item ( flex: 0 0 50%; /* definierar antalet aktiva bilder (i det här fallet 2 */ maxbredd: 50%; /* definierar antalet aktiva bilder (i detta fall 2 */ ) /* STYLER FÖR BAKÅT OCH FRAMÅT KNAPPAR * / .slider__control (position: absolut; display: ingen; topp: 50%; transform: translateY(-50%); align-items: center; justify-content: center; text-align: center; width: 40px; /* knappbredd */ höjd: 50px; /* knapphöjd */ opacitet: .5; /* transparens */ bakgrund: #000; /* bakgrundsfärg */ ) .slider__control_show (display: flex; ) .slider__control:hover, . slider__control:focus ( textdekoration: ingen; kontur: 0; opacitet: .9; /* transparency */ ) .slider__control_left ( vänster: 0; ) .slider__control_right ( höger: 0; ) .slider__control::before ( innehåll: " "; display: inline-block; bredd: 20px; /* ikonens bredd (pil) */ höjd: 20px; /* höjden på ikonen (pil) */ bakgrund: genomskinlig ingen upprepning mitten; bakgrundsstorlek: 100 % 100 %; ) .slider__control_left::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff" " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Som du kan se är skjutreglagets CSS-kod också inte särskilt komplicerat. Grundläggande definitioner som du kan konfigurera utseende skjutreglaget, försett med kommentarer.

CSS-kod som definierar antal aktiva element:

/* definierar antalet aktiva bilder (i detta fall 2) */ flex: 0 0 50%; max-bredd: 50%;

Den här koden ställer in antalet aktiva element för skjutreglaget till 2.

För att skjutreglaget till exempel ska ha ett aktivt element måste dessa definitioner ändras till följande:

/* definierar antalet aktiva bilder (i detta fall 1) */ flex: 0 0 100%; max-bredd: 100 %;

Skapande adaptiv reglage utförs genom mediafrågor.

Till exempel en reglage, som på enheter med en liten skärm ska ha en aktiv bild, och på stora - fyra:

Slider__item ( flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item ( flex: 0 0 25%; max-width: 25%; ) )

JavaScript-kod för chiefSlider-skjutreglaget:

"använd strikt"; var multiItemSlider = (funktion () (retur funktion (selektor) ( var _mainElement = document.querySelector(selector), // huvudblockelement _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elements (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // kontroller _sliderControlLeft = _mainElement.slider__control //". "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // knappen "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // wrapper width _itemWidth()ComputedFloatth(_). / bredd på ett element _positionLeftItem = 0, // position för det vänstra aktiva elementet _transform = 0, // transformation value.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // stegstorlek (för transformation) _items = ; // array av element // fyller _items-matrisen _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = funktion (riktning) ( if (riktning === "höger") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains(_"sliderIt") &&__control(_"sliderIt") _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (riktning === "left It") ( if (_positionLeftItem)<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

Huvudåtgärden i JavaScript-koden utförs av funktionen _transformItem. Denna funktion, beroende på riktningen som skickas till den, omvandlar element.slider__wrapper.

Initierar reglaget utförs enligt följande:

Var slider = multiItemSlider(".slider") Skjutreglage demo

Hur skapar man en looping slider?

Slingor kan göras genom att transformera .slider__item-element.

För att göra detta måste du binda värdena för dess nuvarande position och transformation till varje element.slider__item.

Dessa åtgärder kan utföras mest optimalt med arrayen _items:

Var_artiklar = ; // fylla arrayen med elements.slider__item _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); ));

Men du kan associera data med element inte bara med hjälp av en array, utan till exempel genom att använda dataattribut. Men DOM-operationer är de långsammaste och mest resurskrävande, och de rekommenderas inte när de kan göras på annat sätt.

Nästa steg är att skapa funktioner för att beräkna .slider__item med min och max position.

Var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, index) ( if (item.position)< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( indexItem = index; ) )); returnera indexItem; ), getMin: function () ( return _items.position; ), getMax: function () ( return _items.position; ) )

Sista grundläggande steget vad som behöver göras är att modifiera funktionen _transformItem. Nämligen, lägg till kod till den som kommer att ändra positionen för elementet .slider__item och genomföra dess förvandling.

Var _transformItem = function (direction) ( var nextItem; if (riktning === "höger") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (riktning === "vänster") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

Faktum är att allt är enkelt här.
Till exempel, för att gå till nästa bild, söks objektmatrisen först efter ett element med en position som är större än den för det aktuella elementet längst till höger.slider__item.
Om det finns ett sådant element i arrayen, utförs transformationen av element.slider__wrapper (d.v.s. åtgärder, som i algoritmen utan looping).
Men om det finns inget sådant element, så utförs förutom transformation.slider__wrapper ett antal andra åtgärder.  Först genomsöks objektmatrisen efter ett element med minsta position.  Efter att ha mottagit detta föremål, han en position ställs in vars värde kommer att vara lika med värdet på det aktuella högra elementet + 1.  Och visst gör det det dess förvandling, med så många procent att han hamnar i slutet, d.v.s.  efter det sista elementet.

För att gå till föregående bild utförs liknande åtgärder, men omvänt.

Dessutom, för en slingreglage, behöver du inte växla mellan synligheten för vänster- och högerknapparna.  Dessa knappar i den här versionen av skjutreglaget kommer alltid att visas.
För att göra detta behöver du:
ta bort klassen slider__control_show från "Right"-kontrollen;
 
i CSS för selector.slider__control ändra egenskapsvärdet för display till flex .
 Skjutreglage demo 
Hur skapar man en reglage med looping och automatiskt bildbyte?
Du kan programmera automatiska glidbyten med vissa intervall med hjälp av setInterval-funktionen.
Var _cykel = funktion (riktning) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )
Funktionen setInterval i det här exemplet kommer att köra funktionen _transformItem med angivna intervaller lika med värdet på variabeln _config.interval.
Dessutom är det lämpligt att lägga till ett stopp för det automatiska bytet av bilder när du flyttar markören till skjutreglaget.
Du kan implementera den här funktionen enligt följande:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.direction); )); )
Hur stoppar man automatiskt glidbyte om elementet inte är synligt för användaren?
Det är lämpligt att inaktivera automatisk bildbyte i två fall:
när sidan (på vilken detta skjutreglage finns) är inaktiv;
 
när skjutreglaget är utanför sidans synlighetsområde.
Det första fallet kan hanteras med hjälp av händelsen visibilitychange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Funktion för visibilitychange-händelsehanteraren:
// hantering av händelsen "Document visibility changes" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ))
Att beräkna synligheten för ett element kan göras med funktionen _isElementVisible:
Funktion _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = funktion (x, y) ( returnera document.elementFromPoint(x, y); ); if (rect.right< 0 || rect.bottom < 0 || rect.left >vBredd ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
Du kan placera anropet _isElementVisible, till exempel, i början av funktionen _transformItem.  Denna åtgärd avbryter den automatiska bildövergången om skjutreglaget för närvarande befinner sig utanför visningsporten.
Var _transformItem = funktion (riktning) ( var nextItem; if (!_isElementVisible(_mainElement)) (retur; ) //...
Reglage som svarar på storleksändring av webbläsarfönster
Denna version av det adaptiva skjutreglaget skiljer sig från de tidigare genom att det tillåter ändra antalet aktiva element (bilder) när du ändrar storlek på webbläsarfönstret.  Användare ändrar vanligtvis inte storleken på sin webbläsare, men det kan fortfarande hända.
Detta implementeras med hjälp av händelsen resize och arrayen _states.  Matrisen används för beräkningar.  Dess användning gör att du kan undvika att återinitiera reglaget när det inte behövs.
Tiden står inte stilla och går med den framåt.  Detta påverkade också Internet.  Du kan redan se hur utseendet på webbplatser förändras, adaptiv design är särskilt populärt.  Och i detta avseende har det dykt upp en hel del nya adaptiva jquery-skjutreglage, gallerier, karuseller eller liknande plugins. 
1. Reglage för responsiva horisontella inlägg
Adaptiv horisontell karusell med detaljerade instruktioner vid installation.  Den är gjord i en enkel stil, men du kan styla den så att den passar dig själv.
2. Skjutreglaget på Glide.js
Detta reglage är lämpligt för alla webbplatser.  Den använder öppen källkod Glide.js.  Reglagets färger kan enkelt ändras.
3. Tilted Content Slideshow
Reglage för responsivt innehåll.  Höjdpunkten på det här reglaget är 3D-effekten av bilderna, såväl som olika animationer av slumpmässigt utseende.
4. Skjutreglage med HTML5-duk
En mycket vacker och imponerande reglage med interaktiva partiklar.  Den gjordes med HTML5-duk,
5. Skjutreglage för bildförvandling
Skjutreglage med en morphing-effekt (smidig omvandling från ett objekt till ett annat).  I det här exemplet är reglaget väl lämpat för portföljen av en webbutvecklare eller webbstudio i form av en portfölj.
6. Cirkulärt reglage
Skjutreglage i form av en cirkel med effekten av att vända bilden.
7. Reglage med suddig bakgrund
Adaptivt reglage med växling och bakgrundsoskärpa.
8. Responsiv mode reglage
Enkelt, lätt och responsivt skjutreglage för webbplatsen.
9. Slicebox - skjutreglaget för jQuery 3D-bild(UPPDATERAD)
Uppdaterad version av Slicebox-skjutreglaget med korrigeringar och nya funktioner.
10.Gratis animerad responsiv bildrutnät
JQuery-plugin för att skapa ett flexibelt bildrutnät som växlar bilder med olika animationer och timings.  Detta kan se bra ut som bakgrund eller dekorativt element på en webbplats, eftersom vi selektivt kan visa nya bilder och deras övergångar.  Insticksprogrammet finns i flera versioner.
11.Flex reglage
Universell gratis plugin för din webbplats.  Denna plugin kommer i flera skjutreglage och karusellalternativ.
12. Fotoram
Fotoramaär ett universellt plugin.  Den har många inställningar, allt fungerar snabbt och enkelt och du kan se bilder i helskärm.  Reglaget kan användas både i fast storlek och adaptivt, med eller utan miniatyrer, med eller utan cirkulär rullning och mycket mer.
P.S.Jag installerade reglaget flera gånger och jag tycker att det är en av de bästa
13. Gratis och adaptivt 3D-skjutreglage med miniatyrer.
Experimentellt gallerireglage 3DPanel Layout med ett rutnät och intressanta animationseffekter.
14. Skjutreglaget på css3
Den adaptiva reglaget är gjord med css3 med mjukt utseende av innehåll och lätt animering.
15. WOW Slider
WOW skjutreglageär ett bildreglage med fantastiska visuella effekter.
17. Resår
Elastiskt reglage med full lyhördhet och skjutminiatyrer.
18. Slits
Detta är en helskärmskänslig reglage som använder css3-animation.  Reglaget är tillverkat i två versioner.  Animationen görs ganska ovanligt och vackert.
19. Adaptivt fotogalleri plus
Ett enkelt gratis gallerireglage med bildladdning.
20. Responsive Slider för WordPress
Adaptiv gratis reglage för WP.
21. Parallax Content Slider
Reglage med parallaxeffekt och kontroll av varje element med CSS3.
22. Skjutreglage med musiklänk
Skjutreglaget använder öppet källkod JPlayer.  Det här skjutreglaget liknar en presentation med musik.
23. Skjutreglage med jmpress.js
Det responsiva reglaget är baserat på jmpress.js och låter dig därför lägga till några intressanta 3D-effekter till dina bilder.
24. Snabbt hover bildspel
Bildspel med snabb bildbyte.  Slides omkopplare på hovring.
25. Bilddragspel med CSS3
Bilddragspel med css3.
26. En Touch Optimized Gallery Plugin
Detta är ett responsivt galleri som är optimerat för pekenheter.
27. 3D-galleri
3D Wall Gallery- skapad för Safari webbläsare, där 3D-effekten kommer att synas.  Om du tittar på det i en annan webbläsare kommer funktionaliteten att vara bra men 3D-effekten kommer inte att synas.
28. Skjutreglage med paginering
Responsivt reglage med sidnumrering med JQuery UI-reglaget.  Tanken är att använda ett enkelt navigeringskoncept.  Det är möjligt att spola tillbaka alla bilder eller byta bild för bild.
29. Bildmontage med jQuery
Ordna bilder automatiskt beroende på skärmens bredd.  En mycket användbar sak när man utvecklar en portföljwebbplats.
30. 3D-galleri
Ett enkelt 3D-cirkulärt reglage med css3 och jQuery.
31. Helskärmsläge med 3D-effekt med css3 och jQuery
Ett skjutreglage med möjlighet att visa helskärmsbilder med en vacker övergång.

 
Samling av gratis HTML- och CSS-reglage kodexempel: kort, jämförelse, helskärm, responsiv, enkel, etc.  Uppdatering av juni 2018-kollektionen.  7 nya föremål.
Innehållsförteckning
 
relaterade artiklar


 
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- och efterreglage, allt i en SVG.  Maskering gör det ganska enkelt.  Eftersom det hela ä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
 

 
Enkelt reglage baserat på radioingångar.  100 % ren HTML + CSS.  Fungerar även med piltangenter.
 
 
Responsiv: ja
 
Beroenden: -
 
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 animeringen.  Animation 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

Klippbana för bildmaskering av rektangelkant (endast webkit).
Blandningsläge för denna mask.
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!
Coola krediters sidomeny (klicka på den lilla knappen i mitten av demon).
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

HTML, CSS och JavaScript-skjutreglage 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

Roterande skjutreglage för bevis på koncept.  Använder clip-path och mycket matematik. 
Tillverkad av Tyler Johnson 
16 april 2015

En enkel skjutreglage för CSS och jQuery i helskärm som använder translateX och translate3d smoothness! 
Tillverkad av Joseph 
19 augusti 2014
Responsiva skjutreglage
 
Om koden
 
Bilder Opacitetsreglage
 
Bildopacitetsreglage i HTML och CSS.
 
Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari
 
Responsiv: ja
 
Beroenden: -
 
Om koden
 
Staplade flexibla diabilder
 
Det här exemplet illustrerar hur man skapar en layout av bilder staplade på varandra (särskilt användbart för övergångar med tona in/ut).  Det uppnås utan att ställa in deras höjd och undvika position: absolut; så de är helt flexibla och lätta att hålla i normalt sidflöde.
 
Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari
 
Responsiv: ja
 
Beroenden: -
 
Om koden
 
Responsiv skjutreglage
 
Animerad responsiv reglage i HTML, CSS och JavaScript.
 
Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari
 
Responsiv: ja
 
Beroenden: animate.css
 
Om koden
 
Skjutreglage Med Maskerad Text
 
Reglage endast för CSS med maskerad text.
 
Kompatibla webbläsare: Chrome, Edge (delvis), Firefox, Opera, Safari
 
Responsiv: ja
 
Beroenden: -
 
Om koden
 

 
Bild och innehåll med parallaxeffekt.
 
Om koden
 

 
Bildgalleri endast för CSS.
 
Kompatibla webbläsare: Chrome, Edge, Firefox, Opera, Safari
 
Responsiv: ja
 
Beroenden: -
 
Om koden
 
Ren HTML/CSS-skjutreglage
 
Ren HTML/CSS-reglage med cirkulär SVG-förloppsindikator.
 
Kompatibla webbläsare: Chrome, Edge (delvis), Firefox (delvis), Opera, Safari
 
Responsiv: ja
 
Beroenden: font-awesome.css
 
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. 
Tillverkad 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

Bildreglage för HTML och CSS. 
Tillverkad av Joshua Hibbert 
16 juni 2016
Multi Axis Image Slider
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
Från författaren: Trots rykten om den förmodade "döden" för den del av webbsidor som är synliga utan att rulla, har behovet av en bra reglage inte försvunnit.  Låt oss vara ärliga för en sekund - skjutreglage är kul.  Dessutom orsakar inget annat, till skillnad från rörligt innehåll, en "wow"-effekt hos användaren.  Alla sliders är en uppsättning av flera slides som ersätter varandra och det är oerhört viktigt att sliderkoden är så lätt som möjligt.  Det är i sådana fall som jQuery hjälper oss.
 
Ta en titt på de 20 jQuery-skjutreglagen från Envato Market och du kommer att inse att det finns skjutreglage som är mer än bara ett block med bilder som flyter smidigt genom dem.
 
1. RoyalSlider – Pekskärmsbildgalleri med jQuery
 
Nuförtiden betyder en responsiv reglage som dessutom är pekskärmsvänlig mycket mer än tidigare.  RoyalSlider kombinerar båda funktionerna: lyhördhet och pekskärmsfunktionalitet.  Ett bra val eftersom galleriet är skrivet i HTML5 och CSS3.
 
 
Flera intressanta funktioner:
 
Hur skapar man en hemsida själv?
  
SEO-optimering
 
Mycket anpassningsbar
 
Mer än 10 startmallar
 
Det finns en reserv för CSS3-övergångar
 
Enligt min mening är den coolaste funktionen den "modulära skriptarkitekturen", som låter dig utesluta onödiga saker från JS-huvudfilen och därigenom minska vikten.  RoyalSlider, ett pekskärmsbildgalleri i JQuery, är ett robust JavaScript-skjutreglage som bör läggas till alla utvecklares verktygslåda.
 
2. Slider Revolution responsiv jQuery-plugin
 
Det är inte så lätt att göra något "revolutionärt" med en reglage.  När det kommer till reglage finns det så många funktioner du kan lägga till dem.  Slider Revolution är dock ett riktigt bra försök.  Bland jQuery-skjutreglagen uppfyller denna instans alla dina möjliga krav.
 
 
Listan med reglagefunktioner är så stor, så jag kommer bara att lista de allra bästa:
 
Parallaxeffekt och anpassad animering
 
Obegränsat antal lager och bilder med länkar
 
redo att använda, djupt anpassningsbara stilar
 
och mycket mer
 
Möjlighet att lägga till en bild, inbäddad videospelare och länkar från sociala nätverk gör Slider Revolution till ett av de mest flexibla och anpassningsbara alternativen på webben.
 
3. LayerSlider adaptiv jQuery slider plugin
 
Namnet "LayerSlider adaptive jQuery slider plugin" kan inte riktigt utvärdera detta skjutreglage. 
200+ 2D- och 3D-övergångar mellan bilderna kommer att vända någons huvud.
 
 
Ett par anmärkningsvärda funktioner:
 
13 skinn och 3 menytyper
 
Möjlighet att placera en fast bild ovanpå reglaget
 
Och jQuery fallback
 
Och mycket mer
 
Som med föregående reglage kan du lägga till nästan vilket innehåll som helst, till och med HTML5-innehållet multimediainnehåll.  LayerSlider väcker reglagen till liv och är väldigt vacker.
 
4. jQuery Banner Rotator/Slideshow
 
jQuery Banner Rotator / Slideshow är ett ganska enkelt reglage som inte offrar huvudfunktionaliteten.
 
 
Möjligheter:
 
Verktygstips, textinlägg m.m.
 
Förhandsvisningar och olika alternativ för att visa komponenter
 
Timer med fördröjning för en reglage eller alla
 
Flera övergångar för alla bilder eller olika övergångar för varje individuellt
 
jQuery Banner Rotator / Slideshow, jämfört med andra JQuery-skjutreglage, har bara grundläggande funktioner, men du bör inte glömma det.
 
5. Allt-i-ett-skjutreglage – Responsivt jQuery-skjutreglage-plugin
 
Varje reglage som visas på Internet har sin egen unika vision och löser alla problem inom sitt område.  Men inte den här.  All In One Slider kan kallas "all inclusive".
 
 
Jag tror att de flesta webbutvecklare och designers har en beprövad lösning, men de letar alltid efter något nytt.  Och detta "något nytt" inkluderar:
 
Banner rotator
 
Banner med förhandsvisning
 
Banner med spellista
 
Innehållsreglage
 
Karusell
 
Alla reglagetyper stöder de flesta, om inte alla, funktioner som krävs av jQuery-reglage.  Kommer All In One Slider att vara din all-inclusive?
 
6. UnoSlider – Adaptiv pekskärmsreglage
 
Om ditt reglage inte är responsivt och inte stöder pekskärmar, har du fel reglage.  UnoSlider är korrekt.
 
 
Den här reglaget har hittat sin plats i solen mellan enkelhet och en rik uppsättning funktioner.  Funktioner:
 
Temastöd
 
12 färdiga teman
 
40 övergångar
 
Stöd för IE6+
 
Alla funktioner med betoning på design och stil, vilket gör UnoSlider till ett utmärkt innehållsreglage med möjlighet att lägga till teman.
 
7. Master Slider - skjutreglage för jQuery pekskärm
 
Letar du efter "ett jQuery-skjutreglage för att styra dem alla"?  Prova Master Slider – JQuery pekskärmsreglage för olika skärmstorlekar...
 
 
När det kommer till bra design, denna kopia är en av de bästa:
 
Mer än 25 mallar
 
Hårdvaruaccelererade övergångar
 
Stöd för tryck och svep
 
Och mycket mer
 
Interaktiva övergångar, animerade lager och hotspots kommer definitivt att fånga din uppmärksamhet.  Master Slider är ett konstverk.
 
8. TouchCarousel - jQuery innehåll scroller och skjutreglage
 
TouchCarousel erbjuder gratis support och uppdateringar.  Det är dock inte alla funktionerna i detta lätta jQuery-karusellreglage.
 
 
Om ordet "touch" finns i namnet kan du gissa att reglaget är helt adaptivt och stöder beröring.  Andra funktioner:
 
SEO-optimering
 
Smart autoplay
 
CSS3-övergångar med hårdvaruacceleration
 
Anpassningsbart gränssnitt och 4 skal för Photoshop
 
TouchCarousel tar, tack vare sin unika fysiska glidrullning, mobilupplevelser till en helt ny nivå.
 
9. Avancerat skjutreglage - jQuery XML-skjutreglaget
 
jQuery-skjutreglagen kan användas inte bara på webbplatser.  De kan också vara användbara i webbapplikationer.  Advanced Slider låter dig göra detta.
 
 
Med HTML- eller XML-uppmärkning gör detta avancerade reglage ett bestående intryck:
 
Animerade lager och smart video
 
100+ övergångar och 150+ anpassade egenskaper
 
15 skjutreglage, 7 rullningslister och inbyggt ljusbordsstöd
 
Tangentbordsnavigering, pekstöd och full anpassning
 
Och mycket mer
 
Dock mest bästa egenskapen Detta avancerade skjutreglage är ett jQuery XML Slider API som gör skjutreglaget till ett idealiskt alternativ för din webbapplikation.
 
10. jQuery Slider Zooma in/ut-effekt Fullt responsiv
 
En av dessa jQuery-skjutreglage som får dig att titta på en demo innan du börjar läsa om dess funktioner.  Du vill bara förstå vad denna "zoom in/ut-effekt" betyder.
 
 
Zoomeffekten är ganska svag, men den ger en känsla av kontroll och verklig touch till bilden medan resten av reglaget är statiskt.  Särskilda egenskaper hos reglaget:
 
CSS3 lagerövergångar
 
Animeringsslutalternativ för lager
 
Alternativ för fast bredd, helskärm och full bredd
 
Animerad text med HTML- och CSS-formatering
 
De flesta reglagen försöker inkorporera så många effekter som möjligt, men jQuery Slider Zoom In/Out Effect Fully Responsive har bara Ken Burns-effekten, men den är väl implementerad.
 
11. jQuery Carousel Evolution
 
Liksom det tidigare nämnda Advanced Slider - jQuery XML Slider, har jQuery Carousel Evolution ett eget API som kan användas för att förbättra funktionaliteten eller integrera skjutreglaget i ett annat projekt.
 
Hur skapar man en hemsida själv?
 
Vilken teknik och kunskap behövs idag för att skapa hemsidor på egen hand?  Ta reda på det på intensiven!
 
 
Med bilder, HTML-uppmärkning, YouTube och Vimeo-videor får du också:
 
SEO-optimering
 
9 karusellstilar
 
Skugg- och reflektionseffekter
 
Bildstorleken kan justeras, både fram och bak
 
jQuery Carousel Evolution är en enkel karusell med många användningsfall.
 
12. Sexig skjutreglage
 
Sexy Slider är inte längre lika sexig som tidigare.  Men på grund av sin ålder är detta reglage pålitligt.
 
 
Reglaget ser inte särskilt imponerande ut vid första anblicken, men om du anpassar det väl kommer det att passa perfekt in i din design.  Möjligheter:
 
Automatisk uppspelning av bilder
 
Bildtexter
 
Kontinuerlig bilduppspelning
 
6 övergångseffekter
 
Sexy Slider väntar på att du ska låsa upp dess fulla kraft och potential.
 
13. jQuery Image & Content Scroller med Lightbox
 
Med alla dessa mobilvänliga design och stöd för pekskärm är det trevligt att se ett jQuery-reglage som inte har glömt bort stationära datorer.
 
 
jQuery Image & Content Scroller med Lightbox stöder tangentbordsinmatning och mushjul, samt andra funktioner:
 
Horisontell och vertikal orientering
 
Texttexter inuti eller utanför skjutreglaget
 
Möjlighet att ställa in ett visst antal bilder på en gång
 
Inline-bilder, Flash, iframe, Ajax och inline-innehåll
 
Reglaget har även en inbyggd ljuslåda.  Om du vill, i jQuery Image & Content Scroller w/ Lightbox kan du inte starta själva reglaget, utan starta ljuslådan separat.
 
14. Translucent – ​​Adaptiv bannerrotator/slider
 
De flesta jQuery-skjutreglagen har sin egen design.  Du kan anpassa det själv, men ibland vill du bara att allt ska vara inne i reglaget.  Vi presenterar för dig Translucent.
 
 
Reglaget har många förinställningar.  Du kanske bara behöver ställa in vissa inställningar och det är allt.  Möjligheter:
 
6 olika stilar
 
4 övergångseffekter
 
2 svep övergångar
 
Anpassningsbara knappar och bildtexter
 
Precis som de andra är den här reglaget beröringskänslig, lyhörd och hårdvaruaccelererad.  Genomskinlig – skjutreglage med minimal design, vilket sätter själva innehållet i främsta rummet.
 
15. FSS - Full Screen Sliding Website Plugin
 
Vill du göra en helskärmswebbplats bestående av bilder?  Då behöver du FSS.
 
 
Faktum är att med denna JQuery-skjutreglage är det extremt enkelt att skapa en helskärmsreglagewebbplats.  Möjligheter:
 
AJAX-stöd
 
Rullningslist
 
Stöd för djuplänkteknik
 
2 olika övergångseffekter
 
Det är också värt att uppmärksamma tangentbordsstödet och den 11-sidiga guiden.  Det verkliga intrycket är dock vikten av FSS, endast 5Kb.
 
16. Zozo Accordion – Adaptiv pekskärmsreglage
 
Ett annat exempel på ett jQuery-skjutreglage som fokuserar på styling och gör ett bra jobb.  Zozo Accordion är ett måste för den som letar efter ett bra dragspelsreglage med möjlighet att ändra stil.
 
 
Denna CSS3 animerade skönhet har också ett ganska brett utbud av funktioner:
 
Horisontellt och vertikalt dragspel
 
Semantisk HTML5 och SEO-optimering
 
Stöd för touch, tangentbord och WAI-ARIA
 
Mer än 10 skal och 6 layouter
 
Och mycket mer
 
På Zozo Accordion gratis support och ständiga uppdateringar, såväl som alla funktioner du vill se i jQuery dragspel.
 
17. jQuery Responsive OneByOne Slider Plugin
 
jQuery Responsive OneByOne Slider Plugin är mer som en enkel animation än en skjutreglage.  Istället för att visa en bild i taget, fyller den här instansen skärmen med bilder ett steg i taget tills det inte finns mer utrymme kvar i området innan du går vidare till nästa bild.
 
 
CSS3-animering fungerar under Animate.css, den är lätt, består av flera lager och är vänlig med Mobil enheter.  Flera funktioner:
 
Det finns också ett dra och släpp-navigeringsalternativ.  jQuery Responsive OneByOne Slider Plugin drivs av Twitter Bootstrap Carousel.
 
18. Accordionza - jQuery-plugin
 
Det finns inget jQuery-skjutreglage enklare än så här.  För att fungera behöver du bara ladda ner 3Kb av skjutreglaget, vilket gör Accordionza till det lättaste dragspelsreglaget.
 
 
Om du inte gillar de tre stilalternativen kan du justera HTML och CSS själv.  Möjligheter:
 
Tangentbordsnavigering
 
Lätt att anpassa effekter och knappar
 
Progressiv förbättringsteknik - fungerar utan JavaScript
 
Kom ihåg att Accordionza kan visa många varianter av blandat innehåll, vilket gör det extremt flexibelt.
 
19. mightySlider – Responsivt multifunktionsreglage
 
MightySlider är ett verkligt kraftfullt reglage.  Den kan användas inte bara som en enkel bildreglage, utan också som en enkelriktad helskärmsreglage med menyalternativnavigering.  Med dess hjälp kan du skapa en underbar ensidig webbplats.
 
 
Under huven hittar du många alternativ:
 
Tangentbord, mus och pekstöd
 
CSS3-övergångar med hårdvaruacceleration
 
Ren giltig uppmärkning och SEO-optimering
 
Obegränsat antal bilder, lager för bildtexter och effekter för dem
 
API:et är mycket kraftfullt och utvecklarvänligt, vilket öppnar upp olika sätt dess användning.  MightySlider är ett utmärkt, progressivt jQuery-skjutreglage med ren och välkommenterad kod.
 
20. Parallax Slider - Responsivt jQuery-plugin
 
Parallax Slider fungerar som jQuery Responsive OneByOne Slider Plugin och låter dig animera varje lager separat inom en enda bild.  Du kan animera alla bilder eller till och med bara en genom att lägga till parallaxanimering.
 
 
Inkluderar 4 reglage olika typer, alla med parallaxeffekt.  Liksom andra jQuery-skjutreglage har den:
 
Fullt anpassningsbar
 
Beröringsstöd
 
Fullt lyhörd, obegränsade lager
 
Autoplay, looping, höjd- och breddjustering och timer
 
Animerade lager handlar inte bara om text eller bilder.  Du kan också lägga till YouTube-, Vimeo- och HTML5-videor.  Parallax Slider - ytterligare en bra exempel hur du kan simulera Flash-effekter ännu bättre än själva Flash, som också stöds på alla enheter.
 
Slutsats
 
Det är intressant att se hur jQuery-skjutreglagen har vuxit från något som helt enkelt ersatte en bild med en annan till en enorm uppsättning kreativa verktyg.  Nu finns det 3D, parallaxreglage, helsidesreglage, adaptiva reglage och de som kan ses på både stationära datorer och smartphones.
 
Om du inte gillade någon av reglagen från denna lista, kan du alltid ta jQuery Code Tutorial på Envato och utveckla något helt nytt och unikt.
 
Eller kolla in andra reglage på Envato Market - det finns massor att välja mellan.  Vilket är ditt favoritreglage för jQuery och varför?