• HTML
• CSS

HTML

<div class="contenedor">
    
    <input type="radio" name="rad" id="rad_1" checked>
    <input type="radio" name="rad" id="rad_2">
    <input type="radio" name="rad" id="rad_3">
    
    <div class="navegacion">
        <label for="rad_1" id="label1"></label>
        <label for="rad_2" id="label2"></label>
        <label for="rad_3" id="label3"></label>
    </div>
    
    <ul class="slider">
        <li>
            <img src="puno_img_1.png" alt="">
        </li>
        <li>
            <img src="puno_img_2.png" alt="">
        </li>
        <li>
            <img src="puno_img_3.png" alt="">
        </li>
    </ul>
</div>

CSS

/* Acomodando las imagenes */
.contenedor{
   width:400px;
   position:relative;
   overflow:hidden;
}
.contenedor input{
    display:none;
}
.slider{
    width:1200px;
    list-style:none;
    padding:0px;
    margin:0px;
     transition:0.8s all cubic-bezier(1, 0, 0, 1);
}
.slider li{
    width:400px;
    height:250px;
    float:left;  
}
.slide img{
    width:100%;
    height:100%;
}

/* Posicionando la navegación */

.navegacion{
    position:absolute;
    bottom:10px;
    left:40%;
    background:rgba(250,250,250,0.2);
    padding:4px;
    border-radius:10px;
    z-index:1;
}

.navegacion label{
    width:12px;
    height:12px;
    margin:0px 4px;
    border:2px solid #fff;
    border-radius:50%;
    float:left;
    cursor:pointer;
    
}

/*  Verificamos el checked de cada radio buttons */

#rad_1:checked ~ .slider{
    transform:translateX(0%);
}
#rad_2:checked ~ .slider{
    transform:translateX(-33.4%);
}
#rad_3:checked ~ .slider{
    transform:translateX(-66.6%);
}

#rad_1:checked ~ .navegacion label#label1,
#rad_2:checked ~ .navegacion label#label2,
#rad_3:checked ~ .navegacion label#label3{
    background:#fff;
}