JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider_wrap">
  <div class="slides">
    <input type="radio" name="slide" id="slide1" checked>
    <img src="https://github.com/MerlKori/slider/raw/master/images/fullimage4.jpg" alt="foto">
    <input type="radio" name="slide"  id="slide2">
    <img src="https://github.com/MerlKori/slider/raw/master/images/fullimage6.jpg" alt="foto">
    <input type="radio" name="slide" id="slide3">
    <img src="https://github.com/MerlKori/slider/raw/master/images/fullimage7.jpg" alt="foto">
  </div>
 
 
  <div class="slider_control">
    <div class="prev">предыдущий</div>
    <label for="slide1" class="border"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <div class="next">следующий</div>
  </div>
</div>



 <script>
window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".slider_wrap"), function(item) {
        var btn_prev = item.querySelector(".prev");
        var btn_next = item.querySelector(".next");
        var labels = item.querySelectorAll("label");
        var len = labels.length - 1;
        var i = 0;
        var slider = item.querySelectorAll(".slides");
        
        function sliderShow() {
            slider[i].classList.add("slidesStart")
        }
 
        function cleanout() {
            labels[i].classList.remove("border")
        }
 
        function addcls() {
            labels[i].classList.add("border")
        }
 
        function limit() {
            i < 0 && (i = len);
            i > len && (i = 0)
        }
        btn_prev.addEventListener("click", function() {
            cleanout();
            i--;
            limit();
            labels[i].click();
 
        });
        btn_next.addEventListener("click", function() {
            cleanout();
            i++;
            limit();
            labels[i].click();
        });
        [].forEach.call(labels, function(label, k) {
            label.addEventListener("click", function() {
               ...

CSS

body{
  width: 100%;
  margin: 0;
  padding: 0;
}
 
.slider_wrap{
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
}
 
.slides{
  position: relative;
  padding-top: 360px;
    display:none;
    z-index: -2;
}

.slidesStart{
    display: block;
    transition: display 1s;
}

 .slides img{
  position: absolute;
  top: 0;
  left: 0;
  opacity:0;
  transition: opacity 1.25s;
}
 
.slides input[type="radio"]{
    display: none;
  }
 
.slides input[type="radio"]:checked + img{
    opacity: 1;
  }
 
.slider_control{
  width: 100%;
  margin-top: 15px;
  text-align: center;
 
}
.slider_control label{
            display: inline-block;
        width: 100px;
        height: 100px;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 10px ;
 
}
 
.slider_control label:first-of-type{
            background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage4.jpg);
        }
.slider_control label:nth-of-type(2){
            background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage6.jpg);
        }
.slider_control label:last-of-type{
            background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage7.jpg);
        }
.prev,
.next{
   display: inline-block;
   padding: 5px 10px;
   background: #000;
   color: #fff;
   vertical-align: middle;
   cursor: pointer;
}
 
.prev:active,
.next:active{
  background: #666;
}
 
.border{
  outline: 2px solid green;
}