Introduktion till Splide.js

Squeeds Julkalender | 2023-12-05 | Philip Gistedt

Som frontendutvecklare är vi bekanta med den fina balansakten mellan att skapa en snygg och smidig användarupplevelse och se till att information presenteras på ett bra sätt. Vi har alla varit där – bläddrande genom bibliotek och plugins, viktande mellan funktionalitet och prestanda, design och användbarhet. Det är inte alltid lätt att veta vilket verktyg som är det rätta för jobbet, särskilt när det gäller gränssnitt som ska vara både snyggt, interaktivt, gärna ha lite animationer och fungera utåt sett. Splide.js kan vara ett bra verktyg för att lösa mycket av detta.

Låt säga att en UX-designer har tagit fram och presenterar en design på interaktiv tidslinje för ett företags historia, det ska vara en karusell, slider som användarna kan klicka på pilar eller svepa genom för att se företagets viktigaste milstolpar och prestationer genom åren. Min första tanke är att ”Åh kul, den bygger jag själv”. Men man kan också spara en hel del tid och pengar på att använda ett redan befintligt bibliotek för just detta. Även om jag anser att man ska vara försiktig med att ha för många dependencyn i sitt projekt så finns det såklart en hel del tredjepartsbibliotek som man till fördel kan använda. Jag tycker Splide.js är ett sådant:

Så här beskriver Splide sig själva:
”Splide is a flexible, lightweight and accessible slider written in TypeScript. It helps you to create various kinds of sliders by just changing options, such as multiple slides, thumbnails, nested sliders, vertical direction and more. And no lighthouse errors”.

Och ja, det är väldigt lätt, flexibelt och smidigt att integrera med befintliga projekt oavsett om det är React, Vue eller Svelte som du jobbar med. Det spelar ingen roll om du bygger en dynamisk webbapplikation eller en statisk hemsida; Splide kan anpassa sig efter dina behov. Men det finns också en nackdel: Om ditt projekt kräver väldigt specifika och anpassade animationer eller interaktioner som går lite bortom standard så kan Splide bli lite begränsat. Dock ska det mycket till vågar jag påstå. På deras hemsida kan du se alla olika varianter som finns att använda och den hittar du genom att klicka HÄR!

Det är superlätt att komma igång och du kan installera Splide.js antingen via rekommenderad pakethanterare NPM eller genom CDN och sen använda script-taggen i ditt projekt.`$ npm install @splidejs/splide`
Länk till CDN

Som exempel på hur Splide kan användas så satte jag ihop på en karusell som bläddrar genom 5 resmål jag gärna skulle vilja göra någon gång i framtiden!
ENJOY!

Klicka här för att komma till codepen!

Läs gärna andra inslag som tillhör Julkalender 2023