KLXM Studio – Home
Get in touch

Demo · core blocks “Image gallery” and “Slider”

Showing images, accessibly.

Gallery as grid, masonry or rows, with a lightbox on click. The slider moves by arrow, dot, keyboard or swipe – autoplay only with a pause button and never with “reduce motion”.

Image gallery

Grid with lightbox

Click an image; in the large view arrow keys browse, Esc closes.

  • A kingfisher perched on a branch by the water
    Kingfisher · Kanenori/Pixabay
  • A squirrel sitting on a branch, nibbling
    Squirrel · Amazing3D/Pexels
  • Waves in the golden light of sunset
    Evening light · Danil_Shostak/Pixabay
  • A white kitten in a meadow with flowers
    Kitten · MrWashingt0n/Pixabay
  • A hand sketching in a notebook with a pencil
    Sketch · Coverr-Free-Footage/Pixabay
  • A steaming cup of cappuccino on a wooden table
    Cappuccino · Visual_Laurence/Pixabay
  • A hiker with a backpack next to a bench at sunset
    Evening walk · Matthias_Groeneveld/Pixabay

Slider – slides with text

Arrows, dots, keyboard (←/→) and swipe.

Waves in the golden light of sunset

Slide 1

Evening light on the water

Text on a darkened overlay – readable on any image.

A kingfisher perched on a branch by the water

Slide 2

Kingfisher in the morning

Text box instead of darkening.

A hiker with a backpack next to a bench at sunset

Slide 3

Evening off

Transition: fade.

How it works

Individually or from a collection.

  • Collections

    Instead of picking images one by one, the block shows a media library collection – new images appear automatically.

  • Alt texts from the library

    You maintain alt text and title once – per language – and they apply everywhere.

  • Accessible

    Lightbox and slider are keyboard-operable and respect “reduce motion”.

More demos

Try more.

All examples at a glance – with demo data you can safely try out.

All demosTutorials