Membuat Modern slider dengan Javascript
Halo teman teman kursus laman Source Code Aplikasi, berbicara mengenai slider biasanya kita memasang slider dengan bantuan plugin javascript atau jquery, tapi kali ini kita akan belajar Membangun Modern slider dengan Javascript, nah kalo sebelum di artikel sebelum nya kita telah membangun desain slider dan menyiapkan gambar gambarnya dengan hMTL dan CSS, nah kali ini kita akan membangun slider nya dengan Javascript, oke seketika saja kita praktekan yah teman teman.
kita dapat 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=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
</div>
<div class =imgSmall>
<img src =img/img1.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
<img src =img/img2.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
<img src =img/img3.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
<img src =img/img4.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
<img src =img/img5.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
<img src =img/img6.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
<img src =img/img7.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
<img src =img/img8.jpg alt=Halo teman teman kursus laman Source Code Aplikasi Membangun Modern slider dengan Javascript>
</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 kini 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.
gampang bukan teman teman membangun nya, sekianlah panduan Membangun Modern slider dengan Javascriptt, semoga bermanfaat yah teman teman. 😀
Sumber https://kursuswebsite.org
