Hello to all!
Found a cool CSS slider. I tried to make it possible to call it in a modal window by clicking on the button ... in a modal window above the main page it is not difficult to place it, but I am not sure that such a construction can be called up and hidden by clicking on a link to pure CSS and HTML . Proffi, tell me, is it possible to do this at all?
Here is the slider itself:
/* CSS Document */ #slider { width: 600px; margin: 0 auto; position: relative; } #slides { background: #fff; padding: 5px; box-shadow: 2px 2px 4px #333, inset 1px 1px 0 #ddd; border-radius: 5px; } .inner { width: 500%; } .inner:after { content: ''; display: block; height: 0; clear: both; } .page { float: left; width: 20%; } .page img { width: 588px; height: 250px; } #overflow { overflow: hidden; } #slider input { display: none; } #controls { position: absolute; width: 100%; top: 120px; left: 0; height: 50px; } #controls label { display: none; opacity: 0.3; cursor: pointer; } #controls label:hover { opacity: 0.8; } /* перелистывание фотографий */ #slide1:checked~#controls label:nth-child(2), #slide2:checked~#controls label:nth-child(3), #slide3:checked~#controls label:nth-child(4), #slide4:checked~#controls label:nth-child(5), #slide5:checked~#controls label:nth-child(1) { /* первые пять значений создадут стрелку справа*/ width: 0; height: 0; border-top: 20px solid transparent; border-left: 20px solid #333; border-bottom: 20px solid transparent; float: right; margin-right: -30px; /* за блок*/ display: block; } #slide1:checked~#controls label:nth-child(5), #slide2:checked~#controls label:nth-child(1), #slide3:checked~#controls label:nth-child(2), #slide4:checked~#controls label:nth-child(3), #slide5:checked~#controls label:nth-child(4) { /*стрелка слева*/ width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid rgb(51, 51, 51); float: left; display: block; margin-left: -30px; } #slide1:checked~#slides .inner { margin-left: 0; } #slide2:checked~#slides .inner { margin-left: -100%; } #slide3:checked~#slides .inner { margin-left: -200%; } #slide4:checked~#slides .inner { margin-left: -300%; } #slide5:checked~#slides .inner { margin-left: -400%; } <div id="slider"> <input type="radio" name="slider" id="slide1" checked=""> <input type="radio" name="slider" id="slide2"> <input type="radio" name="slider" id="slide3"> <input type="radio" name="slider" id="slide4"> <input type="radio" name="slider" id="slide5"> <div id="slides"> <div id="overflow"> <div class="inner"> <div class="page"> <img src="http://placehold.it/588x250" /> </div> <div class="page"> <img src="http://placehold.it/588x250" /> </div> <div class="page"> <img src="http://placehold.it/588x250" /> </div> <div class="page"> <img src="http://placehold.it/588x250" /> </div> <div class="page"> <img src="http://placehold.it/588x250" /> </div> </div> <!--inner--> </div> <!--overflow--> </div> <!--slides--> <div id="controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> <label for="slide5"></label> </div> </div> 
