Слайдер на CSS

<div class="slider-wrapper">

	<input type="radio" name="slides" id="slide1" checked>
	<input type="radio" name="slides" id="slide2">
	<input type="radio" name="slides" id="slide3">

	<div class="slider">
		<div class="captions">
			<div class="c1">Webnotes</div>
			<div class="c2">Css slider</div>
			<div class="c3">Lorem ipsum</div>
		</div>
		<div class="img img1">
			<div class="frag frag1"></div>
			<div class="frag frag2"></div>
			<div class="frag frag3"></div>
			<div class="frag frag4"></div>
			<div class="frag frag5"></div>
			<div class="frag frag6"></div>
		</div>
		<div class="img img2">
			<div class="frag frag1"></div>
			<div class="frag frag2"></div>
			<div class="frag frag3"></div>
			<div class="frag frag4"></div>
			<div class="frag frag5"></div>
			<div class="frag frag6"></div>
		</div>
		<div class="img img3">
			<div class="frag frag1"></div>
			<div class="frag frag2"></div>
			<div class="frag frag3"></div>
			<div class="frag frag4"></div>
			<div class="frag frag5"></div>
			<div class="frag frag6"></div>
		</div>
	</div>
	
	<div class="side-controls">
		<label for="slide1"></label>
		<label for="slide2"></label>
		<label for="slide3"></label>
	</div>
	<div class="controls">
		<label for="slide1"></label>
		<label for="slide2"></label>
		<label for="slide3"></label>
	</div>
</div>

.slider-wrapper {
	position: relative;
	height: 400px;
	margin: 25px auto 80px;
}

.slider-wrapper > input {display: none;}

.slider {
	position: relative;
	overflow: hidden;
	background-color: #000;
	border: 8px solid #eee;
	border-radius: 5px;
	box-shadow: 0 7px 20px rgba(0,0,0,.5);
	height: 100%;
}

.slider .img {
	position: absolute;
	perspective: 500px;
	margin-left: -8px;
	height: 100%;
}

.img1 .frag {background-image: url(https://web-notes.info/pictures/css-slider-slide-1.jpg);}
.img2 .frag {background-image: url(https://web-notes.info/pictures/css-slider-slide-2.jpg);}
.img3 .frag {background-image: url(https://web-notes.info/pictures/css-slider-slide-3.jpg);}

.frag {
	width: 132px;
	height: inherit;
	float: left;
	opacity: 0;
	z-index: 0;
	transform-origin: center right;
	transform: rotateY(90deg) translateZ(-100px) scale(1.5);
	transition: transform .6s, opacity .6s, filter 1.5s ease-out;
	filter: saturate(0) blur(10px) brightness(.7) contrast(1.5);
}

.img .frag2 {
	background-position: -132px 0;
	transition-delay: .2s;
}
.img .frag3 {
	background-position: -264px 0;
	transition-delay: .4s;
}
.img .frag4 {
	background-position: -396px 0;
	transition-delay: .6s;
}
.img .frag5 {
	background-position: -528px 0;
	transition-delay: .8s;
}
.img .frag6 {
	background-position: -660px 0;
	transition-delay: 1s;
}

.controls {
	position: absolute;
	bottom: -50px;
	left: 50%;
	margin-left: -115px;
}

.controls label {
	display: block;
	float: left;
	margin-right: 10px;
	width: 30px;
	height: 10px;
	background-color: #000;
	cursor: pointer;
	opacity: .2;
	transition: opacity .3s;
}

.controls label:hover,
.side-controls 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) {
	opacity: .8
}

#slide1:checked ~ .slider .img1 .frag,
#slide2:checked ~ .slider .img2 .frag,
#slide3:checked ~ .slider .img3 .frag {
	opacity: 1;
	z-index: 1;
	transform: rotateY(0) translateZ(0) scale(1);
	filter: saturate(1) blur(0) brightness(1) contrast(1);
}

.side-controls label {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: -15px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	cursor: pointer;
	opacity: .2;
	transition: opacity .5s;
}

#slide1:checked ~ .side-controls label:nth-of-type(3),
#slide2:checked ~ .side-controls label:nth-of-type(1),
#slide3:checked ~ .side-controls label:nth-of-type(2) {
	border-right: 40px solid #000;
	left: -40px;
}

#slide1:checked ~ .side-controls label:nth-of-type(2),
#slide2:checked ~ .side-controls label:nth-of-type(3),
#slide3:checked ~ .side-controls label:nth-of-type(1) {
	border-left: 40px solid #000;
	right: -40px;
}

.captions > div {
	position: absolute;
	right: 20px;
	bottom: 7px;
	color: transparent;
	text-shadow: 0 0 60px transparent;
	z-index: 1;
	font: bold 3em "Century Gothic", "AppleGothic", sans-serif;
	text-transform: uppercase;
	transition: text-shadow 1.5s;
}

#slide1:checked ~ .slider .captions .c1,
#slide2:checked ~ .slider .captions .c2,
#slide3:checked ~ .slider .captions .c3 {
	text-shadow: 0 0 0 rgba(255,255,255,.4);
}