TEST SLIDESHOW

body{ margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #fffaef; } .slider{ width: 800px; height: 500px; border-radius: 10px; overflow: hidden; } .slides{ width: 500%; height: 500px; display: flex; } .slides input{ display: none; } .slides{ width:20%; transition: 2s; } .slide img{ width: 800px; height:500px } /*css for manual slide navigation*/ .navigation-manual{ position: absolute; width: 800px; margin-top: -40px; display: flex; justify-content: center; } .manual-btn{ border: 2px solid; padding: 5px; border-radius: 10px; cursor: pinter; transition: 1s; } .manual-btn:not(:last-child){ margin-right: 40px; } .manual-btn:hover{ background: #a9c4e2; } #radio1: checked ~ .first{ margin-left: 0; } #radio2: checked ~ .first{ margin-left: -20%; } #radio3: checked ~ .first{ margin-left: -40%; } #radio4: checked ~ .first{ margin-left: -60%; } /*css for automatic navigation*/ .navigation-auto{ position: absolute; display: flex; width: 800px; justify-content: center; margin-top: 460px; } .navigation-auto div{ border: 2px solid; padding: 5px; border-radius: 10px; transition: 1s; } .navigation-auto div:not(:last-child){ margin-right: 40px; } #radio1:checked~ .navigation-auto .auto-btn1{ background: #a9c4e2; } #radio2:checked~ .navigation-auto .auto-btn2{ background: #a9c4e2; } #radio3:checked~ .navigation-auto .auto-btn3{ background: #a9c4e2; } #radio4:checked~ .navigation-auto .auto-btn4{ background: #a9c4e2; }