Простой и легкий адаптивный слайдер на CSS

<div class="osnova_slayda">
  <input checked type="radio" name="respond" id="desktop">
  <article id="polnaya_snimka">
  <input checked type="radio" name="polnaya_snimka" id="vekucela1">
  <input type="radio" name="polnaya_snimka" id="vekucela2">
  <input type="radio" name="polnaya_snimka" id="vekucela3">
  <input type="radio" name="polnaya_snimka" id="vekucela4">
  <div id="slayd-shou">
  <div id="kepolnene">
  <div class="image">
  <article><img src="Первый кадр изображение для слайдера.1 jpg"></article>
  <article><img src="Второй кадр изображение для слайдера.2 jpg"></article>
  <article><img src="Третий кадр изображение для слайдера.3 jpg"></article>
  <article><img src="Четвертый кадр изображение для слайдера.4 jpg"></article>
  </div>
  </div>
  </div>
  <div id="kanoliruys">
  <label for="vekucela1"></label>
  <label for="vekucela2"></label>
  <label for="vekucela3"></label>
  <label for="vekucela4"></label>
  </div>
  <div id="aktivnya">
  <label for="vekucela1"></label>
  <label for="vekucela2"></label>
  <label for="vekucela3"></label>
  <label for="vekucela4"></label>
  </div>
  </article>
  </div>

/*Слайдер*/
#polnaya_snimka { /*положение слайдера*/
  position: relative;
  text-align: center;
  top: 10px;
}

#polnaya_snimka{ /*центровка слайдера*/
  margin: 0 auto;
}

#slayd-shou article{ /*все изображения справа друг от доруга*/
  width: 20%;
  float: left;
}

#slayd-shou .image{ /*устанавливает общий размер блока с изображениями*/
  width: 500%;
  line-height: 0;
  height: 100px;
}

#kepolnene{ /*сркывает все, что находится за пределами этого блока*/
  width: 100%;
  overflow: hidden;
  max-height: 500px;
}

article img{ /*размер изображений слайдера*/
  width: 100%;
}

#desktop:checked ~ #polnaya_snimka{ /*размер всего слайдера*/
  max-width: 960px; /*максимальная длинна*/
}

label, a{ /*при наведении на стрелки или переключатели - курсор изменится*/
  cursor: pointer;
}

.osnova_slayda input{ /*скрывает стандартные инпуты (чекбоксы) на странице*/
  display: none;
}

/*позиция изображения при активации переключателя*/
#vekucela1:checked ~ #slayd-shou .image{
  margin-left: 0;
}

#vekucela2:checked ~ #slayd-shou .image{
  margin-left: -100%;
}

#vekucela3:checked ~ #slayd-shou .image{
  margin-left: -200%;
}

#vekucela4:checked ~ #slayd-shou .image{
  margin-left: -300%;
}

#switch5:checked ~ #slayd-shou .image{
  margin-left: -400%;
}

#kanoliruys{ /*положение блока всех управляющих элементов*/
  margin: -25% 0 0 0;
  width: 100%;
  height: 50px;
}

#aktivnya label{ /*стиль отдельного переключателя*/
border-radius: 12px;
  display: inline-block;
  width: 45px;
  height: 12px;
  background: #504f4f;
}

#aktivnya{ /*расположение блока с переключателями*/
  margin: 23% 0 0;
  text-align: center;
}

#aktivnya label:hover{ /*поведение чекбокса при наведении*/
  background: #7a1277;
  border-color: #403939 !important; /*выполнение в любом случае*/
}

/*цвет активного лейбла при активации чекбокса*/
#vekucela1:checked ~ #aktivnya label:nth-child(1),
#vekucela2:checked ~ #aktivnya label:nth-child(2),
#vekucela3:checked ~ #aktivnya label:nth-child(3),
#vekucela4:checked ~ #aktivnya label:nth-child(4),
#switch5:checked ~ #aktivnya label:nth-child(5){
  background: #1463a7;
  border-color: #3867d7 !important;
}

#slayd-shou .image{ /*анимация пролистывания изображений*/
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#kanoliruys label:hover{ /*прозрачность стрелок при наведении*/
  opacity: 0.6;
}

#kanoliruys label{ /*прозрачность стрелок при отводе курсора*/
  transition: opacity 0.2s ease-out;
}