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:

Laat ons weten wat je hiervan vindt!

  • Houd reacties relevant aan het onderwerp en wees redelijk en billijk naar anderen. Houd je bij het plaatsen van een reactie aan de Nederlandse wet.
  • Uw emailadres zal enkel gebruikt worden om u, indien aangegeven, op de hoogte te houden van nieuwe reacties op dit bericht.
  • Indien u er voor kiest uw emailadres weer te geven, zal deze voor bots onleesbaarder worden gemaakt.