Membuat Modern slider dengan Javascript

Halo teman teman kursus website dumet School, berbicara tentang slider biasanya kita memasang slider dengan bantuan plugin javascript atau jquery, tapi kali ini kita akan belajar Membuat Modern slider dengan Javascript, nah kalo sebelum di artikel sebelum nya kita telah membuat desain slider dan menyiapkan gambar gambarnya dengan hMTL dan CSS, nah kali ini kita akan membuat slider nya dengan Javascript, oke langsung saja kita praktekan yah teman teman.

kita bisa lihat kode index html kita seperti ini 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>

nah sebelum penutup tag body teman teman ketikan kode javascript berikut yah teman teman

<script>
const[imgBig, imgSmall, opacity] =[
document.querySelector(‘.imgBig img’),
document.querySelectorAll(‘.imgSmall img’),
0.5
];
imgSmall[0].style.opacity = opacity;
imgSmall.forEach(img=>img.addEventListener(‘click’, imgClick));

function imgClick(e){
imgSmall.forEach(img=>img.style.opacity=1);
imgBig.classList.add(‘fade-in’);
setTimeout(()=>imgBig.classList.remove(‘fade-in’),500)

imgBig.src = e.target.src;
e.target.style.opacity = opacity;
}
</script>

kalo di lihat keseluruhan kodenya seperti berikut teman teman.

nah sekarang kita tinggal menambahkan sedikit animasi di style css nya yah teman teman, ketikan di css nya berikut.

@keyframes fadeIn {
to{
opacity:1;
}
}

.fade-in {
opacity: 0;
animation: fadeIn 0.5s ease-in 1 forwards;
}

keseluruhan kode css nya sperti gambar berikut yah teman teman

dan struktur folder nya seperti ini yah teman teman.

mudah bukan teman teman membuat nya, sekian tutorial Membuat Modern slider dengan Javascriptt, semoga bermanfaat yah teman teman. 😀