Почему не работает checked?

Question

[Глеб Жуков]

Пытаюсь сделать слайдер и застрял кнопках переключения. Не работает :checked
Здесь здесь смотрите как выглядит.
Вот HTML

<div class= "slider-wrapper">
      <div class="slider">
      <div class="slide1"></div>
      <div class="slide2"></div>
      <div class="slide3"></div>
      <div class="slide4"></div>
      <div class="slide5"></div>
      </div>
      <div class="controls">
      <input type="radio" name="slider-radio" id="radio1">
      <lable for="radio1"></lable>
      <input type="radio" name="slider-radio" id="radio2">
      <lable for="radio2"></lable>
      <input type="radio" name="slider-radio" id="radio3">
      <lable for="radio3"></lable>
      <input type="radio" name="slider-radio" id="radio4">
      <lable for="radio4"></lable>
      <input type="radio" name="slider-radio" id="radio5">
      <lable for="radio5"></lable>
      </div>

Вот CSS

.slider-wrapper input{
  display:none;
}
lable{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #000;
  display:inline-block;
  cursor:pointer;
    
}
.controls{
  margin:5px auto;
  width:150px;
 }

#radio1:checked + lable,
#radio2:checked + lable,
#radio3:checked + lable,
#radio4:checked + lable,
#radio5:checked + lable{
  background:#ccc;
}

Answer 1

[bogdanchez]

не lable, а label