3 augusti, 2021

Bygg din egen karusell-slider med jQuery

En ”slider” – eller bildspel på svenska – är ett snyggt inslag på en hemsida, som ger rörelse och tillåter dig att få plats med mer information på en begränsad yta. En ”carousel slider” är en lista med element, t.ex. bilder på rad som sakta rör sig runt och runt.

Det finns en mängd olika bildspel att välja på och ofta får man prova sig fram tills man hittar ett som passar projektet bäst och som kräver ett minimum av anpassning. Personligen har jag två favoriter, som båda använder jQuery som motor. Ni får gärna kalla mig gammalmodig, men jQuery har gott om användningsområden även om det finns ”flashigare” javascriptbibliotek numera.

Owl Carousel är ett jQuery-plugin som låter dig skapa egna karuseller från grunden.

Att implementera det är rena barnleken. Först laddar du upp filerna på din server och länkar till dem i din header. Sedan skapar man en lista med divs innehållandes elementen i din karusell, vilka man därefter aktiverar till en slider med hjälp av några rader javascript som anropar  CSS-klass. Principen är densamma för de flesta sliders.

Ett annat bra alternativ är Flexslider2 från Woothemes som jag har använt till flera projekt genom åren.

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *