JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<input type="radio" name="slider" id="img1" checked>
<img src="http://sandropaganotti.com/wp-content/goodies/misc/img/img1.jpg">

<input type="radio" name="slider" id="img2">
<img src="http://sandropaganotti.com/wp-content/goodies/misc/img/img2.jpg">

<input type="radio" name="slider" id="img3"> 
<img src="http://sandropaganotti.com/wp-content/goodies/misc/img/img3.jpg">
    
<input type="radio" name="slider" id="img4"> 
<img src="http://sandropaganotti.com/wp-content/goodies/misc/img/img4.jpg">
    
<input type="radio" name="slider" id="img5"> 
<img src="http://sandropaganotti.com/wp-content/goodies/misc/img/img5.jpg">
</div>

CSS

div{
    position: relative;
}

img{ 
    margin: auto;
    display: none;
}

input{
    position: absolute;
    top: 50%;
    left: 30px;
    margin-top: -25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 50px;
    line-height: 50px;
    font-size: 30px;
    text-align: center;
    background: black;
    color:white;
    cursor: pointer;
}

input:after{
    content: '<';
}

input:checked + img{
    display: block;
}

input:checked{
    display: none;
}

input:checked ~ input{
    left: auto;
    right: 30px;
    z-index: 1;
}

input:checked ~ input:after{
     content: '>';
}

input:checked + img + input{
    z-index: 2;
}