Carousel Effect & Bootstrap Style Bootstrap carousel

Deze slider is gebaseerd op het populaire webontwikkelingsframework ‘Bootstrap’. Hij maakt gebruik van eenvoudige kleuren en gebruikersinterface elementen voor een zuivere en minimalistisch aanblik, terwijl hetzelfde lettertype en ontwerpkeuzes gebruikt worden als bij Bootstrap. Zodoende is het eenvoudig om deze slider te integreren met elke website die is gebouwd met dit framework.

Het meest opmerkelijke deel van dit sliderontwerp is het transitie-effect. Deze maakt gebruik van een carousel basic effect, waarbij elke slide wegdraait naar de zijkant. Dit effect zorgt voor een 3D effect dat de slider helpt op te vallen en er is een hoop beweging waardoor hij in het oog springt.

Je kunt ook kiezen uit een hele reeks andere overgangseffecten, maar om hetzelfde opvallende uiterlijk te creëren, wil je er een kiezen met veel beweging. ‘Book’ en ‘Blinds’ zijn beide goede keuzes.

De slider heeft één kleur voor tekst en elementen voor de navigatie. In deze demo is dit wit, wat goed afsteekt bij donkere en kleurrijke afbeeldingen. Je kunt deze kleur gemakkelijk wijzigen, afhankelijk van de soorten afbeeldingen die je hebt of om het bij de rest van je website te laten passen.

De navigatiepijlen zijn eenvoudige witte pijlpunten. Ze zijn semi-transparant totdat de gebruiker er iets mee doet, op dat moment worden ze ondoorzichtig. Klikken op de pijlen laat de gebruiker vooruit en achteruit door de slides bladeren.

De gebruiker kan de slider ook bedienen door het gebruiken van de rondjes aan de onderkant van de afbeelding. Elke punt representeert een slide en door hierop te klikken, kan de gebruiker slides overslaan. Dit is handig als je veel slides hebt en de gebruiker niet wil wachten tot er een hele cyclus voorbij is voordat ze de afbeelding zien waar ze het meest in geïnteresseerd zijn. De gebruiker wordt aangemoedigd om deze vorm van navigatie te gebruiken door de voorbeeldafbeeldingen die tevoorschijn komen als de gebruiker met de muis over een rondje gaat. Bovendien is de punt die bij de huidige slide hoort, gemarkeerd (de doorzichtige cirkel met witte rand wordt ondoorzichtig wit), wat de gebruikers helpt te begrijpen hoe deze vorm van navigatie werkt.

Het onderschrift bestaat uit een titel en een beschrijving. Het lettertype is Helvetica Neue, dezelfde als in het Bootstrap framework. Het is een opgeruimd en modern sans-serif lettertype. Een subtiele schaduw helpt de tekst van de pagina te tillen en deze op te laten vallen.

Deze slider is volledig responsief en werkt op smartphone, tablet, desktop computer en smart TV. Op een kleiner scherm verdwijnen de navigatie-elementen zoals de pijlen en rondjes, waardoor er meer ruimte overblijft voor de afbeeldingen en deze optimaal gebruik kunnen maken van de ruimte. Het onderschrift blijft echter staan.

Dit sliderontwerp zou perfect zijn voor elk bedrijf dat een moderne en professionele uitstraling wil hebben voor hun bezoekers. Hij is in het bijzonder erg geschikt voor minimalistische ontwerpen, technologiewebsites en bloggers.