Как включить стрелки в слайдер изображений css / html?

Question

Я пытаюсь добавить стрелки с левой и правой стороны ползунка, но даже несмотря на то, что Z-индекс стрелок ниже, чем Z-индекс навигации, поверхность над стрелками неактивна.

Все остальное работает, но у вас не может быть слайдера изображений, стрелки которого нельзя щелкнуть, даже если его окружение.

Пожалуйста, я все перепробовал, мой ум мог придумать. Вы знаете, что могло вызвать эту проблему? А как исправить?

body {
  margin: 0;
}

#container {
  width: 960px;
  height: 740px;
  position: relative;
  margin: 0px;
}

#container input {
  display: none;
}

.images {
  width: 100%;
  height: 100%;
  position: absolute;
}

.images img {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.prev,
.next {
  height: 100%;
  width: 12%;
  position: absolute;
  top: 0;
  transition: .15s;
  z-index: 100;
  margin: 0px;
}

.prev:hover,
.next:hover {
  cursor: pointer;
  /* background: rgba(10, 10, 10, .5);*/
}

.prev {
  left: 0
}

.next {
  right: 0
}

#nav {
  width: 100%;
  height: 35px;
  position: absolute;
  bottom: 0px;
  text-align: center;
  cursor: arrow;
  z-index: 100;
}

.dots {
  width: 12px;
  height: 12px;
  margin: 0 4px;
  border-radius: 50%;
  background: rgba(10, 10, 10, .7);
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.dots:hover {
  *background: rgba(245, 245, 245, .7);
}

#one,
#two,
#three {
  z-index: -1;
}

#inp1:checked~#one,
#inp2:checked~#two,
#inp9:checked~#three {
  z-index: 10;
}

#inp1:checked~#nav #dot1,
#inp2:checked~#nav #dot2,
#inp9:checked~#nav #dot3 {
  background: white;
  opacity: 70%;
}

.arrow:hover {
  cursor: pointer;
}

.arrow {
  border: solid white;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 10px;
  color: white;
  opacity: 70%;
  margin: 0px;
  z-index: 11;
  left: 0;
  right: 0;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: relative;
  left: 900px;
  top: 400px;
}

.left {
  transform: rotate(135deg);
  position: relative;
  top: 400px;
  right: 0px;
}

<div id='container'>
  <input type='radio' name="image" id='inp1' checked>
  <input type='radio' name="image" id='inp2'>
  <input type='radio' name="image" id='inp3'>
  <i class="arrow right"></i>
  <i class="arrow left"></i>
  <div class='images' id='one'>
    <img src='img/image1.jpeg'>

    <label for='inp3' class='prev'></label>
    <label for='inp2' class='next'></label>
  </div>
  <div class='images' id='two'>
    <img src='img/image2.jpeg'>

    <label for='inp1' class='prev'></label>
    <label for='inp3' class='next'></label>
  </div>
  <div class='images' id='three'>
    <img src='img/image3.jpeg'>

    <label for='inp2' class='prev'></label>
    <label for='inp1' class='next'></label>
  </div>
  <div id='nav'>
    <label class='dots' id='dot1' for='inp1'></label>
    <label class='dots' id='dot2' for='inp2'></label>
    <label class='dots' id='dot3' for='inp3'></label>
  </div>
</div>