Thecuriouscorp· html css · 5 min read
10 Pure CSS Slider / Slideshow
There are amazing designs for the CSS slider, slideshows. Many CSS slider are built alongside JavaScript to enhance its features. But sometimes you may just want a simple and lightweight slider built using pure HTML and CSS. Without JavaScript, it becomes very lightweight and will load faster on the browsers.
Keeping in mind that we are on a hunt for a lightweight pure CSS slider or slideshow, I have created a list of amazing pure CSS slider designs found on the internet.
You can use any of the slider in your web development projects. You can also take inspiration from below and create your own slider using HTML and CSS.
1. Simple Pure CSS Slider
See the Pen Pure CSS Slider by Damian Drygiel (@drygiel) on CodePen.
Author
Damian Drygiel
Link
Made With
Pug / Less
About The Code
This is a very simple CSS Slider that has a bouncy animation effect when it transitions to the next slide. You can move to the next page using the next arrow or the page bullets at the bottom of the slider itself.
2. Auto Next Page Slider
See the Pen Pure CSS slider content by John Louie Biñas (@johnlouie04) on CodePen.
Author
John Louie Biñas
Link
Made With
HTML / CSS
About The Code
It is a simple CSS slider with changes the slides automatically without any user interaction.
3. Slider with Text Animation
See the Pen Pure CSS3 slider by Aladin Bensassi (@Eliteware) on CodePen.
Author
Aladin Bensassi
Link
Made With
HTML / CSS
About The Code
This Slider has animation for texts when transitioning to next slide. It works automatically without any clicks.
4. SlideShow with Fade Effect
See the Pen Minimal pure css slider by Elton Kamami (@eltonkamami) on CodePen.
Author
Elton Kamami
Link
Made With
HTML / SCSS
About The Code
This is a very minimal design slider made. It has fade effect when it goes to next slide.
5. Horizontal CSS Slider with Tabs
See the Pen Pure CSS Horizontal Slide by David Conner (@davidicus) on CodePen.
Author
David Conner
Link
Made With
HTML / SCSS
About The Code
Slider can be created with tabs. This slideshow has tabs for each slide and has text animations for headlines.
6. Simple Image Slider
See the Pen Pure css slider by Kamil (@KamilDyrek) on CodePen.
Author
Kamil
Link
Made With
HTML / CSS
About The Code
This is very simple image slideshow which moves to next slide when clicked on bullets positions.
7. Pure CSS Slider with Custom Effects
See the Pen Pure css slider with custom effects by Nikolay Talanov (@suez) on CodePen.
Author
Nikolay Talanov
Link
Made With
HTML / SCSS
About The Code
Multiple custom animations are available for each slide in this slider.
8. Slider with Next / Previous Buttons
See the Pen CSS Fadeshow by Alexander Erlandsson (@alexerlandsson) on CodePen.
Author
Alexander Erlandsson
Link
Made With
HTML / SCSS
About The Code
Next and previous slide buttons are available on this pure CSS slideshow. Buttons auto-hide when no cursor is present in the region.
9. SlideShow Gallery
See the Pen Pure CSS Slideshow Gallery by Roko C. Buljan (@rokobuljan) on CodePen.
Author
Roko C. Buljan
Link
Made With
HTML / CSS
About The Code
This is a simple slideshow with next and previous buttons with slide animations.
10. Slider on Hover
See the Pen Pure CSS Slider by Husam Alrubaye (@husamui) on CodePen.
Author
Husam Alrubaye
Link
Made With
HTML / CSS
About The Code
It is a very different kind of CSS slider that works on mouse hover. The slider reveals the content when hovered over it. This will work awesome with a small amount of data to display.
11. Slider with Call to Text Button
Author
Rafał Wichowski
Link
Made With
HTML / SCSS
About The Code
This slider has different text animation with background images and calls to action buttons. These kinds of slider are best for lead generation method.