Slider With CSS

Membuat Slider hanya dengan menggunakan CSS

by Miftah Faroq

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700"></script>
<div class="slider">
		<figure>
			<div class="slide">
				<img src="https://cdn.stocksnap.io/img-thumbs/960w/NV5A5D7JPU.jpg">
			</div>

			<div class="slide">
				<img src="https://cdn.stocksnap.io/img-thumbs/960w/3EXIOEFB53.jpg">
			</div>

			<div class="slide">
				<img src="https://cdn.stocksnap.io/img-thumbs/960w/ONPRW7FMP7.jpg">
			</div>

			<div class="slide">
				<img src="https://cdn.stocksnap.io/img-thumbs/960w/NMHVXCOPGH.jpg">
			</div>

			<div class="slide">
				<img src="https://cdn.stocksnap.io/img-thumbs/960w/LRCLSUE3EV.jpg">
			</div>
		</figure>
	</div>

CSS

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

.slider{
	overflow: hidden;
	height: 350px;
}

.slider figure div{
	width: 20%;
	float: left;
}

.slider figure img{
	width: 100%;
	float: left;
}

.slider figure{
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: 20s slidy infinite;
}

@keyframes slidy{
	0%{
		left: 0%
	}

	10%{
		left: 0%;
	}

	12%{
		left: -100%;
	}

	22%{
		left: -100%;
	}

	24%{
		left: -200%;
	}

	34%{
		left: -200%;
	}

	36%{
		left: -300%;
	}

	46%{
		left: -300%;
	}

	48%{
		left: -400%;
	}

	58%{
		left: -400%;
	}

	60%{
		left: -300%;
	}

	70%{
		left: -300%;
	}

	72%{
		left: -200%;
	}

	82%{
		left: -200%;
	}

	84%{
		left: -100%;
	}

	94%{
		left: -100%;
	}

	96%{
		left: 0%;
	}

	100%{
		left: 0%;
	}
}