I want to make a slider with a radio button so that the green slides at the top move a certain distance to the left, there are more slides behind the screen and that it works in two directions. How to do it I don’t know how to set the animation for another block when choosing a radio button.
html { overflow-x: hidden; width: 100%; } .main { padding: 3.5em 0 0 0; margin-left: auto; margin-right: auto; width: 940px; padding-bottom: 45px; } #slider { height: 160px; width: 4000px; overflow: visible; word-spacing: -.36em; line-height: 0; position: absolute; } .slide { width: 180px; height: 160px; background-color: green; display: inline-block; word-spacing: normal; margin-right: 10px; border-radius: 4px; } .slider__buttons input[type="radio"] { display: none; } .slider__buttons label { background-image: url(../img/unchecked.svg); background-repeat: no-repeat; background-position: center; margin-right: 30px; width: 25px; height: 25px; cursor: pointer; float: left; } .slider__buttons input[type="radio"]:checked + label { background-image: url(../img/checked.svg); background-repeat: no-repeat; background-position: center; } .marginfix { margin-top: 180px; padding-bottom: 30px; } .clearfix::after { content: ""; clear: both; display: table; } <div class="main clearfix"> <h2 class="arcticle__header">ILLUSTRATIVE WORKS</h2> <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> <div id="slider" class="clearfix"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <div class="slider__buttons marginfix"> <input name="1" type="radio" id="radio1" checked> <label for="radio1"></label> <input name="1" type="radio" id="radio2"> <label for="radio2"></label> <input name="1" type="radio" id="radio3"> <label for="radio3"></label> <input name="1" type="radio" id="radio4"> <label for="radio4"></label> </div> <h2 class="arcticle__header">GRAPHICAL WORKS</h2> <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> <!--Slider--> <h2 class="arcticle__header">CORPORATES</h2> <p class="arcticle__text">Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. Ut ut nisi in nisl convallis ultricies!<br> Curabitur tristique faucibus tincidunt. Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper.</p> <!--Slider--> 
