<!DOCTYPE html>
<html>

<head>
  <title>Слайдер на CSS, шаг 4</title>
  <meta charset="utf-8">
  <base href="/assets/course76/">
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400,400' rel='stylesheet' type='text/css'>
</head>

<body>
  <section>
    <h1>Дизайн визиток</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://static.tildacdn.com/tild6561-6533-4861-a439-333266383066/Us_Business_Card_Moc.jpg">
          <img src="https://static.tildacdn.com/tild6539-3031-4139-b065-343937363164/photo.jpg">
          <img src="https://static.tildacdn.com/tild3361-3839-4230-b032-326132333833/photo.jpg">

        </div>
      </div>
    </div>
  </section>
</body>

</html>
html,
body {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "Unbounded";
}

section {
  width: 450px;
  margin: 40px auto;
  background: white;
  box-shadow: 0 0 3px #ccc;
}

h1 {
  padding: 5;
  margin: 0;
  font-size: 36px;
  font-weight: Bold;
  text-align: center;
}

.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 {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -40px;
  z-index: 100;
  text-align: center;
}

.slider-controls label {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 3px;
  background: #ccc;
  cursor: pointer;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  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"] {
}

#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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.