Navigatie

Multiple lightweight image swipe carousel

Voor een afbeeldings-slider wilde ik een carousel of ouderwetse marquee met user controls realiseren. Echter, de bootstrap carousel plugin kon hooguit één slide of afbeelding per keer tonen, ik wilde er meerdere...

Uiteindelijk ben ik zelf gaan puzzelen, omdat ik geen gebruik wilde maken van kant-en-klare plugins waarvan ik de helft van de functionaliteiten en dus code niet zou gebruiken. Ik ben gaan spelen met de jquery mobile swipe functionaliteit, echter als los onderdeel omdat ik het binnen een Bootstrap website omgeving wilde gebruiken.

Dezelfde website werd responsive, en dus moest men de mogelijkheid hebben de slider met meerdere afbeeldingen tegelijk in beeld, tevens met vingerbewegingen te kunnen besturen. Tevens wilde ik afbeeldingen netjes gecentreerd hebben (middels li { display: inline-block; } op de list-items en ul { text-align: center; } op de parent).

Multiple image slider previews

Ik ben tot de volgende basis-opzet gekomen, waarin ik al mijn wensen heb verwerkt:

Features multiple image swipe carousel

Mijn wensenlijst was als volgt, en zit hier dan ook in:

  • Oneindig vooruit of terug kunnen swipen;
  • Navigatie knoppen voor desktop en tablets;
  • Voor smartphones/responsive ondersteuning, swipe-functionaliteit;
  • Bootstrap friendly (dus swipen als los jquery mobile onderdeel);
  • Afbeeldingen centreren voor nettere weergave;
  • Enig basis-effect / animation;
  • Lightweight;

*update: Een live voorbeeld is inmiddels te zien op mijn homepagina. Gebruik en pas de code dus naar hartelust aan, bouw er desnoods een jquery plugin omheen (laat het me in dat geval even weten), om hem te laten voldoen aan je eigen wensen.

Lees meer

Geen reacties

Er is nog niet gereageerd op dit nieuwsbericht. U kunt de eerste zijn: