[html]<div class="wrapper">
<input type="radio" name="point" id="slide1" checked>
<input type="radio" name="point" id="slide2">
<input type="radio" name="point" id="slide3">
<input type="radio" name="point" id="slide4">
<input type="radio" name="point" id="slide5">
<div class="slider">
<div class="slides slide1"></div>
<div class="slides slide2"></div>
<div class="slides slide3"></div>
<div class="slides slide4"></div>
<div class="slides slide5"></div>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</div>

<style type="text/css">
.wrapper {
height: 838px;
margin: 20px auto 0;
    position: relative;
    width: 500px;
}

.slider {
background-color: #ddd;
height: inherit;
overflow: hidden;
position: relative;
width: inherit;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}
.wrapper > input {
display: none;
}
.slides {
height: inherit;
position: absolute;
width: inherit;
}

.slide1 { background-image: url(https://forumstatic.ru/files/001a/c6/f0/20589.jpg); }
.slide2 { background-image: url(https://forumstatic.ru/files/001a/c6/f0/54701.jpg); }
.slide3 { background-image: url(https://forumstatic.ru/files/001a/c6/f0/97494.jpg); }
.slide4 { background-image: url(https://forumstatic.ru/files/001a/c6/f0/80029.jpg); }
.slide5 { background-image: url(https://forumstatic.ru/files/001a/c6/f0/56844.jpg); }
.wrapper .controls {
left: 50%;
    margin-left: -98px;
    top: 795px;
    z-index: 5;
    position: absolute;
}

.wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

.wrapper label:after {
border: 2px solid #ddd;
content: " ";
display: block;
height: 12px;
left: -4px;
position: absolute;
top: -4px;
width: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.wrapper label {
cursor: pointer;
display: inline-block;
height: 8px;
margin: 25px 12px 0 16px;
position: relative;
width: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-transition: background ease-in-out .5s;
-moz-transition: background ease-in-out .5s;
-o-transition: background ease-in-out .5s;
transition: background ease-in-out .5s;
}

.wrapper label:hover,
#slide1:checked ~ .controls label:nth-of-type(1),
#slide2:checked ~ .controls label:nth-of-type(2),
#slide3:checked ~ .controls label:nth-of-type(3),
#slide4:checked ~ .controls label:nth-of-type(4),
#slide5:checked ~ .controls label:nth-of-type(5) {
background: #ddd;
}
.slides {
height: inherit;
opacity: 0;
position: absolute;
width: inherit;
z-index: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
-o-transition: transform ease-in-out .5s, opacity ease-in-out .5s;
transition: transform ease-in-out .5s, opacity ease-in-out .5s;
}

#slide1:checked ~ .slider > .slide1,
#slide2:checked ~ .slider > .slide2,
#slide3:checked ~ .slider > .slide3,
#slide4:checked ~ .slider > .slide4,
#slide5:checked ~ .slider > .slide5 {
opacity: 1;
z-index: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

</style>[/html]