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

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 slider?

  • With this Slider you can easily create image carousel on 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 have less time to install complicated plugins and library in your project – just plug and play,
  • 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 and shadows etc.

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





DEMO

https://codecanyon.net/item/image-slider-pure-css-carousel-with-dark-mode-fullscreen-less-sass/29498159