Pure CSS Slider With Buttons | Responsive | Control Button

Category: Slideshow | May 24, 2019
Author: SMLMRKHLMS
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

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.

2 thoughts on “Pure CSS Slider With Buttons | Responsive | Control Button”

Comments are closed.