Cara Mudah Membuat Slider Menggunakan HTML5 Dan CSS3

Mungkin tampilan website akan terasa kaku jika tidak adanya animasi-animasi yang membuat mata kita terpesona pada effect-effect yang dibuat oleh web designer, saya ambil contoh sederhana jika website tanpa slider atau bisa disebut dengan metode gambar yang bergerak dengan sendirinya, itu sebagian kecil sudah umum untuk ditampilkan di website

tujuannya agar website tidak kaku kaku banget hehe .. oke pada pembahasan ini saya ingin membahas tentang Cara Mudah Membuat Slider Menggunakan HTML5 Dan CSS3, berbeda dengan yang lain kali ini saya membuatnya menggunakan CSS3, tidak dengan jQuery, penasaran, ikuti langkah berikut yah, dan perlu disiapkan gambar sebanya 5 yahlalu salinkan scriptnya dibawah sini :

<html>
<head>
	<meta charset="UTF-8">
	<title>SLIDER</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="slider">
		<figure>
			<img src="images/slider-1.jpg" alt="">
			<img src="images/slider-2.jpg" alt="">
			<img src="images/slider-3.jpg" alt="">
			<img src="images/slider-4.png" alt="">
			<img src="images/slider-5.jpg" alt="">
		</figure>
	</div>
</body>
</html>

style.css

* {padding: 0; margin: 0}

@keyframes slider {

	0% { left: 0 }
	20% { left: 0 }
	25% { left: -100% }
	45% { left: -100% }
	50% { left: -200% }
	70% { left: -200% }
	75% { left: -300% }
	95% { left: -300% }
	100% { left: -400% }
}

.slider {overflow: hidden;}
.slider figure img { width: 20%; float: left; }
.slider figure { position: relative;
				 width: 500%; margin:0;
				 left: 0; text-align:left;
				 animation: 20s slider infinite;}

Jika sudah save dan jalankan, cukup mudah buka? Sekian tutorial tentang Cara Mudah Membuat Slider Menggunakan HTML5 Dan CSS3. Sampai bertemu di artikel selanjuntya dan sampai jumpa.

#KeeLearn

#IsmetMA