Fullfjädrad Slider/Carousel Plugin – Splide
Dela är en lätt, kraftfull och flexibel reglage och karusell, skriven i ren JavaScript utan några beroenden.
Nyheter
- Förvandla Splidejs till organisationen.
- Lägg till |_+_| och |_+_| alternativ.
- Lägg till typdefinitioner för maskinskriven.
- Reager Splide är släppt.
- Delad vy är släppt.
- Lägg till |_+_| och |_+_| alternativ.
- Brytpunkter accepterar |_+_| och |_+_|.
- Lägg till några teman .
- Rutnät förlängning släpps.
- Autobredd genomförs. Varje bild kan ha sin egen bredd.
- Brytpunkter acceptera alternativet 'förstöra'.
- Slå samman Slides-komponenten till Elements.
- Splid kan förstöras.
- Lägg till eller ta bort bilder dynamiskt.
- Video förlängning släpps.
- URL Hash Navigation förlängning släpps.
Funktioner
- Ren JavaScript utan några beroenden
- Liten storlek, mindre än 29 kB (11 kB gzippad)
- Flexibel och utdragbar
- Flera bilder
- Skjut eller tona övergång med CSS
- Responsiva, stödjande brytpunkter
- Acceptera CSS-relativa enheter, som vw, %, rem, etc
- Inget behov av att beskära bilder
- Automatisk uppspelning med förloppsindikator och uppspelnings-/pausknappar
- Höger till vänster och vertikal riktning
- Dra och tryck med musen svep
- Kapslad reglage
- Lat lastning
- Miniatyrreglage
- Tillgänglighetsvänlig, stöder tangentbordskontroll och ARIA-attribut
- Lägga till/ta bort bilder dynamiskt
- Internet Explorer 10
Installation
Det finns tre sätt att installera Splide på din webbplats.
- NPM
- Ladda ner
- CDN
Endast NPM-sättet förklaras i följande steg. Besök denna sida för andra metoder.
- Hämta den senaste versionen av NPM:
- Länk till stilmallen:
- Skriv HTML för att bygga en reglage:
- Initiera Splide. Väljaren accepterar ett ID, ett klassnamn eller ett element själv:
- Observera att endast det första elementet initieras även om du använder ett klassnamn.
Se den Integration avsnitt för ditt Vue- eller React-projekt.
alternativ
Ändra alternativ
Skicka ett objekt till det andra argumentet i |_+_| konstruktör:
|_+_|
Eller ställ in en |_+_| attribut till ett rotelement i ett JSON-format:
|_+_|tillgängliga val
Här är en lista över alternativ och korta förklaringar. Besök denna sida för mer detaljer.
- typ: Bestäm en reglagetyp.
- spola tillbaka: Om ett reglage ska spolas tillbaka före den första bilden eller efter den sista.
- hastighet: Övergångshastighet i millisekunder.
- rewindSpeed: Övergångshastighet vid bakåtspolning i millisekunder.
- waitForTransition: Om åtgärder ska förhindras medan ett skjutreglage övergår.
- bredd: Definiera skjutreglagets maxbredd.
- höjd: Definiera skjutreglagets höjd.
- fixedWidth: Fixa bredden på diabilderna.
- fixedHeight: Fixa höjden på rutschbanorna.
- höjdförhållande: Bestäm höjden på objektglasen genom förhållande till en skjutreglagebredd.
- autoWidth: Om det är sant, kommer bildens bredd att bestämmas av själva elementets bredd. Detta är för ett horisontellt reglage.
- autoHeight: Om det är sant, kommer glidhöjden att bestämmas av själva elementhöjden. Detta är för en vertikal reglage.
- perPage: Bestäm hur många bilder som ska visas per sida.
- perMove: Bestäm hur många bilder som ska flyttas när ett skjutreglage går till nästa eller föregående sida.
- kloner: Bestäm manuellt hur många kloner som ska genereras på ena sidan.
- start: Startindex.
- fokus: Bestäm vilken bild som ska fokuseras.
- gap: gap mellan diabilder.
- padding: Ställ in padding-vänster/höger i horisontellt läge eller padding-top/bottom i vertikalt läge.
- easing: Animationstidsfunktion för CSS-övergång.
- pilar: Om pilar ska läggas till.
- arrowPath: Ändra pilens SVG-sökväg.
- paginering: Om paginering ska läggas till (indikatorpunkter).
- autoplay: Om autoplay ska aktiveras.
- intervall: Autouppspelningsintervall i millisekunder.
- pauseOnHover: Om autouppspelning ska stoppas medan ett skjutreglage förs över.
- pauseOnFocus: Om autouppspelning ska stoppas medan ett skjutreglage är fokuserat.
- resetProgress: Om förloppet för autoplay-timern ska återställas när den återupptas.
- lazyLoad: Aktivera lazy load för bilder.
- preloadPages: Bestäm hur många sidor runt en aktiv bild som ska laddas i förväg. Detta fungerar bara alternativet lazyLoad är i närheten.
- tangentbord: Om ett skjutreglage ska styras via tangentbordet.
- dra: Om du vill tillåta att dra och trycka med musen.
- dragAngleThreshold: Vinkeltröskeln för drag.
- swipeDistanceThreshold: Avståndströskel för att avgöra om åtgärden är snärt eller svep.
- flickVelocityThreshold: Hastighetströskel för att avgöra om åtgärden är snärt eller svep.
- flickPower: Bestäm kraften för flick. Ju större antal detta är, desto längre går ett reglage med snärt.
- flickMaxPages: Begränsa ett antal sidor för att flyttas med snärt.
- riktning: Skjutriktning.
- cover: Om en img src ska konverteras till bakgrundsbild av dess överordnade element. höjd, fastHöjd eller höjdförhållande krävs.
- tillgänglighet: Om tillgänglighet (ARIA-attribut) ska aktiveras eller inte.
- slideFocus: Om tabindex=0 ska läggas till i synliga bilder eller inte.
- isNavigation: Bestäm om ett skjutreglage är navigering för en annan.
- trimSpace: Om utrymmen ska trimmas före nävens glidning eller efter den sista.
- updateOnMove: Om det är sant läggs is-active-klassen till i slide-elementet före övergången.
- throttle: Throttle-varaktighet för resize-händelsen.
- brytpunkter: brytpunkter definitioner.
- klasser: Samling av klassnamn.
- i18n: Samling av texter för i18n.
Tillägg
- Video : Tilldela HTML-video, YouTube eller Vimeo till bilder.
- URL Hash Navigation : Lyssna på hashändring och flytta en skjutreglage till en bild med hashdataattributet.
- Rutnät : Skapa rader och kolor i ett skjutreglage.
Integration
Lätt att integrera Splide-reglaget eller karusellen i ditt Vue- eller React-projekt.
API och tillägg
Splide tillhandahåller några API:er och sättet att anpassa beteendet programmatiskt.
Nedladdningsinformation:
Författare: Splidey
Live-demo: https://splidejs.com/