Looking for a simple solution for creating a pure CSS slider with buttons? In this tutorial, I will create a responsive slideshow which you can use for images or content.
The slider comes with a control button to slide next or previous image or content. It is built with CSS3 animation. It’s lightweight and easy to customize.
This basic slideshow also comes with radio buttons for dot navigation which makes it easier to navigate. It is a clean and basic slider with the fastest loading experience.
Furthermore, You can easily make it fullscreen slider by adding the code without a fixed container. By placing the HTML code inside the fixed container you can turn it into a small slider according to chosen container width size.
How to build Pure CSS3 Image Slider with Prev/Next Buttons.
To get start building this slider, You need to add a CSS file of image slider called slider.css
in the document.
<link rel="stylesheet" type="text/css" href="slider.css" />
Next, We will create the markup for CSS3 slider as follows.
<div class='slider'> <input checked id='slide-1' name='active' type='radio'> <div class='slide' data-content='1'></div> <nav class='nav'> <label class='prev' for='slide-4'></label> <label class='next' for='slide-2'></label> </nav> <nav class='dots'> <label class='dot' for='slide-1'></label> <label class='dot' for='slide-2'></label> <label class='dot' for='slide-3'></label> <label class='dot' for='slide-4'></label> </nav> <input id='slide-2' name='active' type='radio'> <div class='slide' data-content='2'></div> <nav class='nav'> <label class='prev' for='slide-1'></label> <label class='next' for='slide-3'></label> </nav> <nav class='dots'> <label class='dot' for='slide-1'></label> <label class='dot' for='slide-2'></label> <label class='dot' for='slide-3'></label> <label class='dot' for='slide-4'></label> </nav> <input id='slide-3' name='active' type='radio'> <div class='slide' data-content='3'></div> <nav class='nav'> <label class='prev' for='slide-2'></label> <label class='next' for='slide-4'></label> </nav> <nav class='dots'> <label class='dot' for='slide-1'></label> <label class='dot' for='slide-2'></label> <label class='dot' for='slide-3'></label> <label class='dot' for='slide-4'></label> </nav> <input id='slide-4' name='active' type='radio'> <div class='slide' data-content='4'></div> <nav class='nav'> <label class='prev' for='slide-3'></label> <label class='next' for='slide-1'></label> </nav> <nav class='dots'> <label class='dot' for='slide-1'></label> <label class='dot' for='slide-2'></label> <label class='dot' for='slide-3'></label> <label class='dot' for='slide-4'></label> </nav> </div>
You can easily customize the next/prev navigation by editing following CSS.
.nav { padding: 20px; position: fixed; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); width: 100%; z-index: 0; } .prev { cursor: pointer; float: left; } .prev::after { border-top: 2px solid #FFF; border-left: 2px solid #FFF; border-radius: 1px; content: ''; display: block; height: 20px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 20px; } .next { cursor: pointer; float: right; } .next::before { border-top: 2px solid #FFF; border-right: 2px solid #FFF; border-radius: 1px; content: ''; display: block; height: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 20px; }
If you want to customize the design of dots navigation then you need to edit following CSS.
.dots { padding: 20px; position: absolute; bottom: 0; z-index: 1; text-align: center; width: 100%; } .dot { border: 2px solid #FFF; border-radius: 50%; cursor: pointer; display: inline-block; height: 10px; width: 10px; }
For more customization, You can see the slider.css file.
Can’t we do auto slide in this?
Hi Gulshan!
We can add autoplay functionality in this slider. But we need to change the whole concept of code. You can check out the following similar image sliders with the autoplay feature:
1. Pure CSS Slideshow Autoplay without JavaScript
2. Automatic Image Slider in HTML & CSS