Image Slider

An image slider (also called a carousel) cycles through a set of images in a single frame. Pagination sits in a translucent capsule over the foot of the image — the active marker stretches into a pill and fills like a progress bar, then advances to the next image at intervals.

Playing
UOB customer working on a laptop in a bright workspace
Smiling couple enjoying an outdoor festival beside a UOB EVOL Visa card
UOB headquarters tower lit at dusk above the city skyline
States
Default (playing) The current image is shown with its marker stretched into a pill. The blue fill grows left to right over 3 seconds; when it completes, the slider advances to the next image.
Paused While the pointer hovers the slider, or a control has keyboard focus, autoplay pauses and the fill freezes at its current position. It resumes from the same point when the pointer leaves.
First image The first marker is active. Choosing Previous from here loops to the last image, so navigation always wraps around.
Last image The last marker is active. When its fill completes, the slider loops back to the first image and continues.
Single image With only one image there is nothing to page through, so the capsule, arrows and autoplay are hidden. The image is shown on its own.
Behaviour
Autoplay & timing
  • Each image is shown for 3 seconds. The active marker fills from left to right as a visual countdown.
  • When the fill completes, the slider advances to the next image and the timer restarts.
  • After the last image, autoplay loops back to the first.
Navigation
  • The chevrons move to the previous or next image. Choosing a marker jumps straight to that image.
  • Any manual navigation restarts the 3-second timer for the image the user lands on.
  • Navigation wraps: Previous on the first image goes to the last, and Next on the last returns to the first.
Pause
  • Autoplay pauses while the pointer is over the slider or a control has keyboard focus, so the image does not change while the user is reading it.
  • The fill freezes in place and resumes from the same point once the pointer leaves and focus moves away.
Keyboard & accessibility
  • Arrows and markers are buttons — reachable by Tab and activated with Enter or Space. Left and Right arrow keys move between images when the slider is focused.
  • Each image carries descriptive alt text; markers are labelled with their position (for example, "Go to image 2").
  • If the user's system requests reduced motion, autoplay is switched off and the slider stays on the first image until the user navigates.
Specs

The slider is a single fixed-ratio image frame with one floating pagination capsule. All controls live inside the capsule — there is nothing outside the image.

1
Image frame
  • Image: 560x315px, JPG, <300KB
2
Pagination capsule
  • Translucent dark frosted pill, centred above the foot of the image.
3
Previous / next chevrons
  • Controls image cycle
4
Active progress marker
  • The current image's dot stretches to a pill and fills with blue over the 3-second (Default) interval.
  • Interval customisable
5
Inactive markers
  • White circles, one per image.
1
Dos and Don'ts
  1. Use the Image Slider for promotional or lifestyle imagery on marketing-style forms — not for essential form content.
  2. Keep it short: 2 to 5 images. Fewer, stronger visuals are easier to take in than a long reel.
  3. Always provide meaningful alt text for every image so the message survives when images can't be seen.
  4. Keep any wording that matters in the page itself, not baked into the image — never put instructions or required information only inside a slide.
  5. Don't autoplay without a way to stop: always let hover, focus and reduced-motion settings pause the slider.
  6. Don't overcrowd the image with text or extra buttons — the only controls are the pagination capsule at the foot.