Membuat Slider dengan CSS

halo teman-teman, apa kabarnya 🙂
Untuk tulisan kali ini, kita akan mencoba membuat efek slider dengan hanya menggunakan CSS. Ternyata kita bisa membuat sebuah slider dengan menggunakan CSS. Tentunya hal ini akan membuat lebih simple dan mudah, jika dibandingkan dengan menggunakan Plugin jQuery atau murni JavaScript.

Buat file index.html

<!DOCTYPE html>
<html>
<head>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title></title>
</head>
<body>
	<div class="slider">
		<figure>
			<div class="slide">
				<img src="images/slide_one.jpg">
			</div>

			<div class="slide">
				<img src="images/slide_two.jpg">
			</div>

			<div class="slide">
				<img src="images/slide_three.jpg">
			</div>

			<div class="slide">
				<img src="images/slide_four.jpg">
			</div>

			<div class="slide">
				<img src="images/slide_five.jpg">
			</div>
		</figure>
	</div>
</body>
</html>

Teman-teman harus perhatikan, disana sebelumnya sudah kita siapkan source untuk gambarnya, yang coba kita tempatkan di dalam folder images.

Lanjutkan dengan membuat file style.css dengan membuat sebuah folder dengan nama 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%;
	}
}

Untuk hasilnya akan terlihat seperti berikut: