Image Slider – Pure CSS carousel with dark mode & fullscreen / less / sass
The Slider – pure CSS / HTML picture slider with fade animation.
Special for non-technical customers, simply paste the html code and go.
The easiest option to apply your picture slider on the web site witout any JS. Put your urls to pictures and begin utilizing! that each one!
OK! however why I would like pure css slider?
- with Slider you possibly can simply create picture carousel with any HTML creator (WYSIWYG) that you’ve entry to avoid wasting html with enter and elegance tag! For instance, weblog publish, wordpress web page, discussion board publish and so on.
- you’ll spend less time to put in sophisticated plugins and library in your mission – simply copy & previous,
- efficiency is your key.
- in your mission You don’t have entry to JS or there are NO-JS necessities.
Easy to begin however – it’s a very highly effective software! We have quite a lot of capabilities.
Displaying photographs – frozen ratio or auto ratio
The Slider has 5 sorts of ratio preset – 1:1, 2:1, 4:3, 16:9, 21:9, and in addition the handbook mode (for instance you possibly can set 100% of window peak). You may also choose a picture that can cowl your area or include it.
Dark mode
Dark and light-weight mode – arrange your owns model for every mode – gentle and dark – use css variables and begin to use dark mode.
Animation – fade or transfer? or none
Responsive – slider is totally responsive
Full display screen mode
The slider has full display screen mode – could be change by button – or use JS to alter enter checked() state
Two option to navigate – as befits a slider
Pagination (indicators) with dots.
Navigation with two predefined model.
Fully customizable – use CSS variables or LESS / SASS file with variables and mixin, colours, shadows, shapes of UI components and so on.
That all works solely with HTML and CSS, no want JS in any respect, this know-how is pure magic.
Note: With this plugin you may have means to use any JS occasions or set off methodology on enter tag to control slider habits (slide, activate/off fullscreen and so on) – it’s very straightforward.
