Code

The Room - 3D Slider - Pure CSS with dark mode / less / sass

The Room - 3D Slider - Pure CSS with dark mode / less / sass

The Room – pure CSS / HTML image slider with 3D animation.

Dark mode

Dark and light mode – switch by button or use auto OS dark mode

Animation

Each image with own description will rotate in this gallery which we called a room.

Responsive

The gallery is fully responsive and fluid web design,

Customizable

Fully customizable – use CSS variables or LESS / SASS file with variables and mixin, set your width, height, colors and shadows of walls

Navigate

Two ways of navigation: arrows and indicators.

Zoom in

You can zoom in using button – this interaction will enlarge the image,

That all works only with HTML and CSS, no need JS at all, this technology is pure magic,

Try it live

Note: With this plugin you have ability to apply any JS events or trigger method on input tag to manipulate slider behavior (slide, turn on/off zoom, turn on/off dark mode etc) – it’s very easy.

by
by
by
by
by
by