[Merl]

Есть такой слайдер.
Если коротко, работает он так, всем слайдам задаётся position: absolute, тем самым складываем их в одну стопку, и задаём opacity: 0; , делая их прозрачными(невидимыми). Далее задаю правило input[type="radio"]:checked + img{opacity: 1;}, тоесть, когда input выделен, стоящий за ним img становиться видимым. Input активируем нажатием на label , связаный с ним через id.
Так же есть две кнопки, вперёд и назад, для них я прописал js, в котором меняют значение checked у inputю
Но мне нужна рамка для выделеного label, прописал тоже через js, и теперь когда нажимаем на label иму присваивается класс border и одновременно удаляет этот класс у других label.
Через перебор кнопками тоже добавляеться класс border, ниже представлен код js.
И здесь появилась проблема, так как присвоение class="border" я выполняю двумя разными способами, когда я нажимаю на третий label, и тем самым выделяю его, а потом жму на кнопку вперёд, у меня появляется два элемента с классом border.
Извините, если уже успел заморочить голову)
Я хочу определить какой из input checked и задать элементу label, который связан с ним по id класс.
Такое возможно?

его Html:

<div class="slider_wrap">
          <div class="slider_control">
           <div  class="prev"> </div>
           <label for="sld1" class="border"></label>
           <label for="sld2" ></label>
           <label for="sld3"></label>
           <label for="sld4"></label>
           <div class="next"> </div>
         </div> <!-- slider_control -->
  	 		 <div class="fotos">
  	 		 	  <input type="radio" name="slider" id="sld1" class="input" checked>
  	 		    <img src="images/slide1.jpg" alt="foto" >
  	 		    <input type="radio" name="slider" id="sld2" class="input">
  	 		    <img src="images/1300696623_zara-colordresses_2011.jpg"  alt="foto">
  	 		    <input type="radio" name="slider" id="sld3" class="input">
  	 		    <img src="images/41604028.36c0xb1atp.png" alt="foto">
  	 		    <input type="radio" name="slider" id="sld4" class="input">
  	 		    <img src="images/platje-v-goroshek-05.jpg" alt="foto">
  	 		 </div> <!-- foto -->
  	 		
 </div> <!-- slider_wrap -->

его css:

.slider_wrap{
	width: 47%;
	max-width: 511px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

.fotos{
 	width: 78%;
	padding-bottom: 125%;
	position: relative;
	margin-left: auto;


	input[type="radio"]{
		display: none;
	}

	input[type="radio"]:checked + img{
		opacity: 1;
	}
}


 .fotos img{
	position: absolute;
	top: 0;
	left: 0;
	opacity:0;
	transition: opacity 1.25s;
}

.slider_control {
	width: 14.3%;
    
    label{
    		display: block;
	      width: 73px;
	      height: 98px;
	      background-size: cover;
	      background-repeat: no-repeat;

	      &:first-of-type{
	      	background-image: url(../images/1.jpg);
	      }
	      &:nth-of-type(2){
	      	background-image: url(../images/2.jpg);
	      }
	      &:nth-of-type(3){
	      	background-image: url(../images/3.jpg);
	      }
	      &:last-of-type{
	      	background-image: url(../images/4.jpg);
	      }
    } /* label */

   
 }
  .border{
  	outline: 2px solid @orange;
  }

  .prev{
	       .arrow(5%, 49%,  2%, 17%, 45deg);
	       margin: 0 auto 15px;

    }

   .next{
   	   .arrow(5%, 49%,  10%, 17%, -135deg);
   	    margin: 15px auto 0;
   }

Но мне необходимы ещё кнопки вперёд и назад,
здесь уже действовал через javascript:

var btn_prev = document.querySelector('.slider_wrap .slider_control .prev');
var btn_next = document.querySelector('.slider_wrap .slider_control .next');
var i = 0;

btn_prev.onclick = function(){
		input[i].checked = ' '; // убираем checked у предыдущего
	  i--;
	if(i < 0){
		i = input.length - 1;
	} // условие, чтобы слайды шли по кругу
	input[i].checked = true;  //ставим checked следующему 
}



btn_next.onclick = function(){
	 input[i].checked = ' '; // убираем checked у предыдущего
   
	 i++;
	if(i >= input.length){
		i = 0;
	} // условие, чтобы слайды шли по кругу
	input[i].checked = true; //ставим checked следующему 	
}

И здесь всё работает. Но, для полного счастья, мне необходимо добавить рамку активному элементу Label. Я прописал стиль .border и сделал следующим образом:

var labels = document.querySelectorAll('.slider_control label');
// выбираем все label

 function activeBorder() {
      for(var i = 0; i < labels.length; i++){
         labels[i].classList.remove('border');
      } // удаляю стиль .border установленый до этого 
      this.classList.toggle('border');  // присваиваю элементу по которому нажали
 }

// далее запускаю функцию
  for(var j = 0; j < labels.length; j++){
   labels[j].onclick = activeBorder;
 }

Но вот как сделать добавление рамок при переборе слайдов кнопками вперёд и назад???

Я переделал немножко script переключения слайдов кнопкой и теперь он выглядит так:

btn_prev.onclick = function(){
		input[i].checked = ' '; // убираем checked у предыдущего
                labels[i].classList.remove('border'); // убираем border у предыдущего
	      i--;
	if(i < 0){
		i = input.length - 1;
	}// условие, чтобы слайды шли по кругу
	input[i].checked = true; //ставим checked следующему   
        labels[i].classList.add('border'); //ставим border следующему   
}