Pure HTML/CSS Responsive Slider/Slideshow

Preview:

Description:

A slideshow/slider is a perfect way for displaying your images and showing them to your users in an organized way. There are thousands of sliders on the web, but we are going to look at a solution that’s entirely based on HTML & CSS and that works on modern browsers.

This slider/slideshow is built with CSS and HTML radio buttons. Comes with a smooth slide animation and a bottom navigation control. Adding new images should be easy if you know some basic CSS and HTML.

How to use it:

1. The required HTML structure for the slider/slideshow.

<div class="content">
  <div class="slides">
    <input type="radio" name="slide" id="slide1" checked />
    <input type="radio" name="slide" id="slide2" />
    <input type="radio" name="slide" id="slide3" />
    <input type="radio" name="slide" id="slide4" />
    <input type="radio" name="slide" id="slide5" />
    <div class="slide s1">
      <img
        src="1.jpg"
        alt="Alt 1"
      />
    </div>
    <div class="slide">
      <img
        src="2.jpg"
        alt="Alt 2"
      />
    </div>
    <div class="slide">
      <img
        src="3.jpg"
        alt="Alt 3"
      />
    </div>
    <div class="slide">
      <img
        src="4.jpg"
        alt="Alt 4"
      />
    </div>
    <div class="slide">
      <img
        src="5.jpg"
        alt="Alt 5"
      />
    </div>
  </div>
  <div class="navigation">
    <label class="bar" for="slide1"></label>
    <label class="bar" for="slide2"></label>
    <label class="bar" for="slide3"></label>
    <label class="bar" for="slide4"></label>
    <label class="bar" for="slide5"></label>
  </div>
</div>

2. The main CSS styles to convert the image group into a slider/slideshow.

.content {
  height: 52rem;
  width: 93.5rem;
  border-radius: 2rem;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input {
  display: none;
}
.slides {
  display: flex;
  width: 500%;
  height: 100%;
}
.slide {
  width: 20%;
  transition: 0.6s;
}
.slide img {
  width: 100%;
  height: 100%;
}
#slide1:checked ~ .s1 {
  margin-left: 0;
}
#slide2:checked ~ .s1 {
  margin-left: -20%;
}
#slide3:checked ~ .s1 {
  margin-left: -40%;
}
#slide4:checked ~ .s1 {
  margin-left: -60%;
}
#slide5:checked ~ .s1 {
  margin-left: -80%;
}
.navigation {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%);
  display: flex;
}
.bar {
  width: 2rem;
  height: 2rem;
  border: 2px solid white;
  border-radius: 50%;
  margin: 0.4rem;
  cursor: pointer;
}
.bar:hover {
  background-color: #ffffff8e;
  transition: 0.2s;
}
@media (max-width: 500px) {
  .content {
    height: 18rem;
    width: 35rem;
    border-radius: 1rem;
    overflow: hidden;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  img {
    max-width: 100%;
  }
  .navigation {
    bottom: 0.8rem;
  }
  .bar {
    width: 1.5rem;
    height: 1.5rem;
  }
}