HTML - Slider

 Crea un slider con boton para cambiar imagen con HTML5 y CSS

He acá el código.

HTML

 <section>

      <h1>GATOS</h1>

      <div class="slider">

        <input type="radio" id="btn-1" name="toggle" checked />

        <input type="radio" id="btn-2" name="toggle" />

        <input type="radio" id="btn-3" name="toggle" />

        <div class="slider-controls">

          <label for="btn-1"></label>

          <label for="btn-2"></label>

          <label for="btn-3"></label>

        </div>

        <div class="slider-inner">

          <div class="slider-slides">

            <img

              src="https://htmlacademy.ru/assets/courses/76/keks-1-small.jpg"

              alt="Кекс смотрит на еду"

            />

            <img

              src="https://htmlacademy.ru/assets/courses/76/keks-2-small.jpg"

              alt="Кекс смотрит на тебя"

            />

            <img

              src="https://htmlacademy.ru/assets/courses/76/keks-3-small.jpg"

              alt="Кекс не хочет никуда смотреть"

            />

          </div>

        </div>

      </div>

    </section> CSS

section {

  margin: 40px auto;

  width: 450px;

  background-color: white;

  box-shadow: 0 0 3px #cccccc;

}

h1 {

  margin: 0;

  padding: 10px 0;

  text-align: center;

  font-weight: normal;

  font-size: 28px;

}

.slider {

  position: relative;

}

.slider input[type="radio"] {

  display: none;

}

.slider-inner {

  overflow: hidden;

}

.slider-slides {

  width: 300%;

  transition: transform 0.8s ease;

}

.slider-slides img {

  float: left;

  width: 450px;

  height: 320px;

}

.slider-controls {

  margin-bottom: 10px;

  text-align: center;

}

.slider-controls label {

  display: inline-block;

  margin: 0 3px;

  width: 10px;

  height: 10px;

  border: 4px solid white;

  border-radius: 50%;

  background-color: #cccccc;

  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);

  cursor: pointer;

  transition: background-color 0.2s;

}

#btn-1:checked ~ .slider-controls label[for="btn-1"],

#btn-2:checked ~ .slider-controls label[for="btn-2"],

#btn-3:checked ~ .slider-controls label[for="btn-3"] {

  background-color: #666666;

}

#btn-1:checked ~ .slider-inner .slider-slides {

  transform: translate(0);

}

#btn-2:checked ~ .slider-inner .slider-slides {

  transform: translate(-450px);

}

#btn-3:checked ~ .slider-inner .slider-slides {

  transform: translate(-900px);

}