Membuat Design Slider dengan HTML & CSS

Halo teman teman kursus website dumet School, kali ini kita akan belajar membuat design Slider dengan HTML & CSS, nah perlu di ingat ini hanya desain nya saja yah teman teman, kalo fungsi fungsi nya belum bisa berjalan, di artikel berikutnya kita akan membahas membuat slider dengan vanilla javascript yah teman teman. oke langsung saja kita praktekan yah teman teman.

pertama tama siapkan delapan gambar untuk di jadikan bahan membuat design slider kita nanti, di sini saya sudah menyiapkan delapan gambar ini, temen teman bisa download di google atau di manapun itu yah teman teman. nah gambar gambar ini ubah nama namanya supaya mudah di panggilnya dan di simpan dalam forder img yah yah teman teman jangan lupa.

setelah itu buka text editor kalian lalu setelah itu kita buat file index.html, dan buat struktur htmlnya jangan lupa di save yah. struktur htmlnya seperti berikut yah teman teman.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slider Click</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="imgBig">
			<img src="img/img1.jpg" alt="">
		</div>
		<div class="imgSmall">
			<img src="img/img1.jpg" alt="">
			<img src="img/img2.jpg" alt="">
			<img src="img/img3.jpg" alt="">
			<img src="img/img4.jpg" alt="">
			<img src="img/img5.jpg" alt="">
			<img src="img/img6.jpg" alt="">
			<img src="img/img7.jpg" alt="">
			<img src="img/img8.jpg" alt="">
		</div>
	</div>
</body>
</html>

setelah itu teman teman buat file css nya beri nama file dengan nama style. css jgn lupa di save. di dalam style. css ketikan kode berikut yah teman teman.

body{
	background: #333;
}

.container {
	width: 760px;
	margin: auto;
	background: #fff;
}
.imgBig img,
.imgSmall img {
	width: 100%;
}
.imgBig{
	border: 5px solid #fff;
}
.imgSmall{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5px;
	padding:0 5px 5px 5px;
}

nah hasilnya akan seperti berikut teman teman.

mudah bukan teman teman, seperti itu tutorial membuat design Slider dengan HTML dan CSS, untuk tutorial berikutnya saya akan membahas bagaimana membuat slidernya dengan vanila Javascript yah teman teman, semoga tutorial ini bermanfaat yah :D.

Membuat Design Slider dengan HTML & CSS

Kategori