The Slider – pure CSS / HTML image slider with fade animation.

Special for non-technical users, just paste the html code and go.

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 1

The simplest way to apply your image slider on the website witout any JS. Put your urls to images and start using! that all!

OK! but why I need pure css slider?

with Slider you can easily create image carousel with any HTML creator (WYSIWYG) that you have access to save html with input and style tag! For example, blog post, wordpress page, forum post etc.
you will spend less time to install complicated plugins and library in your project – just copy & past,
performance is your key.
in your project You don’t have access to JS or there are NO-JS requirements.

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 2

Easy to start but – it is a very powerful tool! We have a lot of functions.

Displaying images – frozen ratio or auto ratio

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 3

The Slider has 5 types of ratio preset – 1:1, 2:1, 4:3, 16:9, 21:9, and also the manual mode (for example you can set 100% of window height). You can also select an image that will cover your space or contain it.

Dark mode

Dark and light mode – set up your owns style for each mode – light and dark – use css variables and start to use dark mode.

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 4

Animation – fade or move? or none

Responsive – slider is fully responsive

Full screen mode

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 5

The slider has full screen mode – can be switch by button – or use JS to change input checked() state

Two way to navigate – as befits a slider

Pagination (indicators) with dots.

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 6

Navigation with two predefined style.

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 7

Image Slider - Pure CSS carousel with dark mode & fullscreen / less / sass - 8

Fully customizable – use CSS variables or LESS / SASS file with variables and mixin, colors, shadows, shapes of UI elements etc.

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

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 fullscreen etc) – it’s very easy.