JSFiddle - React, Tailwind, and code Playground

by Davide Brognoli

HTML

<div>
    <input type="radio" name="slider" id="img1" checked>
    <img src="https://codiceplastico.com/assets/images/team/ale-m-550.png">

    <input type="radio" name="slider" id="img2">
    <img src="https://codiceplastico.com/assets/images/team/ema-550.png">

    <input type="radio" name="slider" id="img3">
    <img src="https://codiceplastico.com/assets/images/team/vale-550.png">

    <input type="radio" name="slider" id="img4">
    <img src="https://codiceplastico.com/assets/images/team/madda-550.png">

    <input type="radio" name="slider" id="img5">
    <img src="https://codiceplastico.com/assets/images/team/pietro-550.png">

    <input type="radio" name="slider" id="img6">
    <img src="https://codiceplastico.com/assets/images/team/bonny-550.png">

    <input type="radio" name="slider" id="img7">
    <img src="https://codiceplastico.com/assets/images/team/chiara-550.png">

    <input type="radio" name="slider" id="img8">
    <img src="https://codiceplastico.com/assets/images/team/umb-550.png">

    <input type="radio" name="slider" id="img9">
    <img src="https://codiceplastico.com/assets/images/team/paolo-550.png">

    <input type="radio" name="slider" id="img10">
    <img src="https://codiceplastico.com/assets/images/team/dav-550.png">

    <input type="radio" name="slider" id="img11">
    <img src="https://codiceplastico.com/assets/images/team/alb-550.png">

    <input type="radio" name="slider" id="img12">
    <img src="https://codiceplastico.com/assets/images/team/mary-550.png">

    <input type="radio" name="slider" id="img13">
    <img src="https://codiceplastico.com/assets/images/team/jac-550.png">

    <input type="radio" name="slider" id="img14">
    <img src="https://codiceplastico.com/assets/images/team/gio-550.png">

    <input type="radio" name="slider" id="img15">
    <img src="https://codiceplastico.com/assets/images/team/cla-550.png">

    <input type="radio" name="slider" id="img16">
    <img...

CSS

html, body{
  height: 100%;
}

div{
    position: relative;
    height: 100%;
}

img{ 
    margin: auto;
    display: none;
    max-height: 90%;
}

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;
}