Membuat Design Slider dengan HTML CSS
Halo teman teman kursus situs Source Code Aplikasi, kali ini kita akan belajar membangun design Slider dengan HTML CSS, nah perlu di ingat ini hanya desain nya saja yah teman teman, kalo manfaat manfaat nya belum dapat berjalan, di artikel berikutnya kita akan membahas membangun slider dengan vanilla javascript yah teman teman. oke seketika saja kita praktekan yah teman teman.
pertama-tama tama siapkan delapan gambar bagi di jadikan bahan membangun design slider kita nanti, di sini saya telah menyiapkan delapan gambar ini, temen teman dapat unduh di google atau di manapun itu yah teman teman. nah gambar gambar ini ubah nama namanya supaya gampang di panggilnya dan di simpan pada forder img yah yah teman teman jangan lupa.
setelah itu buka text editor kalian lalu setelah itu kita bikin file index.html, dan bikin 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=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
</div>
<div class=imgSmall>
<img src=img/img1.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
<img src=img/img2.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
<img src=img/img3.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
<img src=img/img4.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
<img src=img/img5.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
<img src=img/img6.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
<img src=img/img7.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
<img src=img/img8.jpg alt=Halo teman teman kursus situs Source Code Aplikasi Membangun Design Slider dengan HTML CSS>
</div>
</div>
</body>
</html>
setelah itu teman teman bikin file css nya beri nama file dengan nama style. css jgn lupa di save. di pada 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.
gampang bukan teman teman, seperti itu panduan membangun design Slider dengan HTML dan CSS, bagi panduan berikutnya saya akan membahas bagaimana membangun slidernya dengan vanila Javascript yah teman teman, semoga panduan ini bermanfaat yah :D.
Sumber https://kursuswebsite.org
