<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"><img src="/src/img/MyCollages (1).jpg" alt=""></div>
<div class="slides slide2"><img src="img/MyCollages (2).jpg" alt=""></div>
<div class="slides slide3"><img src="/src/img/MyCollages (4).jpg" alt=""></div>
<div class="slides slide4"><img src="/src/img/единомышленники.jpg" alt=""></div>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
.wrapper
height: 685px
margin: 00px auto 0
position: relative
width: 920px
margin-bottom: 40px
.controls
left: 50%
margin-left: -108px
position: absolute
label
cursor: pointer
display: inline-block
height: 16px
margin: 25px 12px 0 16px
position: relative
width: 16px
-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
&:after
border: 4px solid #fdfdfd
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%
&: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)
background: #ffffff
.slider
border-radius: 150px
background-color: #fafafa
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
.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)
как вариант использовать другой слайдер:D
