Responsive css Slider

• 

<style> /* slider */ .slider {width: 800px;max-width: 100%;max-height: 100%;margin: 0 auto;position: relative;background: #eee;border: 5px #7ab040 ;}.slider__inner {position: relative;margin: 0 auto;padding-top: 50%;overflow: hidden;background: #ddd;}.slider__slides {position: absolute;top: 0;left: 0;z-index: 1;width: 400%;height: 100%;overflow-y: hidden;-webkit-transition: margin-left 0.4s;transition: margin-left 0.4s;}.slider__slide {display: block;float: left;position: relative;width: 25%;height: 100%;background: no-repeat 50% 50%;background-size: cover;}.slider__slide img {width: 100%;max-width: 100%;height: auto;}.slider__radiobox-label {display: block;position: absolute;z-index: 2;cursor: pointer;}.slider__radiobox-label--item {bottom: 10%;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);padding: 7px;border-radius: 50%;background:#f8c900;opacity: 0.3;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.slider__radiobox-label--item:hover {opacity: 0.5;}.slider__radiobox-label--item--1 {margin-left: -36px;}.slider__radiobox-label--item--2 {margin-left: -12px;}.slider__radiobox-label--item--3 {margin-left: 12px;}.slider__radiobox-label--item--4 {margin-left: 36px;}.slider__radiobox-label--prev, .slider__radiobox-label--next {display: none;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);height: 0;border: 15px solid #f8c900;border-top-color: transparent;border-bottom-color: transparent;opacity: 0;-webkit-transition: left 0.2s, right 0.2s, opacity 0.2s;transition: left 0.2s, right 0.2s, opacity 0.2s;}.slider__radiobox-label--prev {left: -6%;border-left: 0;border-right-width: 17px;}.slider__radiobox-label--next {right: -6%;border-right: 0;border-left-width: 17px;}.slider__radiobox {display: none;}.slider__radiobox--1:checked ~ .slider__slides {margin-left: 0;}.slider__radiobox--2:checked ~ .slider__slides {margin-left: -100%;}.slider__radiobox--3:checked ~ .slider__slides {margin-left: -200%;}.slider__radiobox--4:checked ~ .slider__slides {margin-left: -300%;}.slider__radiobox--1:checked + .slider__radiobox-label--item--1, .slider__radiobox--2:checked + .slider__radiobox-label--item--2, .slider__radiobox--3:checked + .slider__radiobox-label--item--3, .slider__radiobox--4:checked + .slider__radiobox-label--item--4 {opacity: 1;}.slider__radiobox--1:checked ~ .slider__radiobox-label--prev--4, .slider__radiobox--1:checked ~ .slider__radiobox-label--next--2, .slider__radiobox--2:checked ~ .slider__radiobox-label--prev--1, .slider__radiobox--2:checked ~ .slider__radiobox-label--next--3, .slider__radiobox--3:checked ~ .slider__radiobox-label--prev--2, .slider__radiobox--3:checked ~ .slider__radiobox-label--next--4, .slider__radiobox--4:checked ~ .slider__radiobox-label--prev--3, .slider__radiobox--4:checked ~ .slider__radiobox-label--next--1 {display: block;}.slider:hover .slider__radiobox-label--prev, .slider:hover .slider__radiobox-label--next {opacity: 1;}.slider:hover .slider__radiobox-label--prev {left: 6%;}.slider:hover .slider__radiobox-label--next {right: 6%;} </style> <section class="slider"><div class="slider__inner"> <input checked="" class="slider__radiobox slider__radiobox--1" id="slider__radiobox--1" name="slider__radiobox" type="radio" /><label class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item--1" for="slider__radiobox--1"></label><label class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev--4" for="slider__radiobox--4"></label><label class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next--2" for="slider__radiobox--2"></label> <input class="slider__radiobox slider__radiobox--2" id="slider__radiobox--2" name="slider__radiobox" type="radio" /><label class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item--2" for="slider__radiobox--2"></label><label class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev--1" for="slider__radiobox--1"></label><label class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next--3" for="slider__radiobox--3"></label> <input class="slider__radiobox slider__radiobox--3" id="slider__radiobox--3" name="slider__radiobox" type="radio" /><label class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item--3" for="slider__radiobox--3"></label><label class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev--2" for="slider__radiobox--2"></label><label class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next--4" for="slider__radiobox--4"></label> <input class="slider__radiobox slider__radiobox--4" id="slider__radiobox--4" name="slider__radiobox" type="radio" /><label class="slider__radiobox-label slider__radiobox-label--item slider__radiobox-label--item--4" for="slider__radiobox--4"></label><label class="slider__radiobox-label slider__radiobox-label--prev slider__radiobox-label--prev--3" for="slider__radiobox--3"></label><label class="slider__radiobox-label slider__radiobox-label--next slider__radiobox-label--next--1" for="slider__radiobox--1"></label> <div class="slider__slides"> <div class="slider__slide slider__slide--1" style="background-image: url('http://4tipsbd.com/wp-content/uploads/2018/08/Amazing-Assassins-Creed-Origins-Wallpaper-HD.jpg');"> </div> <div class="slider__slide slider__slide--2" style="background-image: url('http://4tipsbd.com/wp-content/uploads/2018/08/assassins-creed-origins-2017-wx-1366x768.jpg');"> </div> <div class="slider__slide slider__slide--3" style="background-image: url('http://4tipsbd.com/wp-content/uploads/2018/08/Assassins-Creed-Origins-3.jpg');"> </div> <div class="slider__slide slider__slide--4" style="background-image: url('http://4tipsbd.com/wp-content/uploads/2018/08/assassin_s_creed_origins_4tipsbd.jpg" alt="" width="1191" height="670" class="alignnone size-full wp-image-564');"> </div> </div> </div> </section> <!--end-->