Pure CSS Slider/ Slideshow

To learn how to create the CSS Slider/ Slideshow follow the steps below:

Demo:

*to see the pure CSS slider/ slideshow on the website click here.

Step1.

Add HTML

<div class="slider">
  <div>
  <input type="radio" id="one" name="slideshow" value="one">
  <label class="one" for="one">
    <div class="r-button1"></div>
  </label>
  </div>
  <div>
  <input type="radio" id="two" name="slideshow" value="two">
  <label class="two" for="two">
    <div class="r-button2"></div>
  </label>
  </div>
  <div>
  <input type="radio" id="three" name="slideshow" value="three">
  <label class="three" for="three">
    <div class="r-button3"></div>
  </label>
  </div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.slider {
  position: relative;
  overflow: hidden;
  width: 320px;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 10px solid #dad7cd;
  box-shadow: 7px 7px 7px rgba(0,0,0,0.4);
}

Add the images:

.one, .two, .three {
  top:0;
  left:0;
  position: absolute;
  width: 320px;
  height: 240px;
  transition: .3s;
}

.one {
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/10/css-pumpkin.jpg);
  background-size: 320px 240px;
}

.two {
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg);
}

.three {
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/10/css-vampire.jpg);
  background-size: 320px 240px;
}

Make the slider work:

input#one:checked ~ .one {
  display: block;
  z-index:1;
}

input#two:checked ~ .two {
  display: block;
  z-index:1;
}

Style the radio buttons:

input {
  opacity: 0;
  cursor: pointer;
  display: block;
  position: absolute;
  outline: none;
  left: 0;
  z-index: 10;
}

input[type=radio]:checked + label .r-button1:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button1:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button1 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button2:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button2:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button2 {
  border-color: #a3b18a;
}

input[type=radio]:checked + label .r-button3:before {
  background-color: #dad7cd;
}
input[type=radio]:checked:hover + label .r-button3:before {
  background-color: #a3b18a;
}

input[type=radio]:hover + label .r-button3 {
  border-color: #a3b18a;
}

.r-button1, .r-button2, .r-button3 {
  position: relative;
  display: block;
  border-radius: 50%; 
  background-color: transparent;
  cursor: pointer;
  border: 3px solid #dad7cd;
  transition: .3s;
  width:10px;
  height: 10px;
  z-index:10;
  top:210px;
}

.r-button1:before, .r-button2:before, .r-button3:before {
  content:"";
  position: absolute;
  height:7px;
  width:7px;
  background-color: transparent;
  transform: translate(-50%, -50%);
  left:50%;
  top:50%;
  border-radius:50%;
}

.r-button1 {
  left:125px;
}

.r-button2 {
  left:155px;
}

.r-button3 {
  left: 185px;
}

Enjoy coding!

Share this: