Sesuai dengan judulnya Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery. Kali ini kita akan membuat sebuah slide dengan menggunakan kode JavaScript, disini kita tidak akan menggunakan bantuan plugin dan juga Jquery. Kode yang akan kita gunakan benar-benar asli Javascript.
Membuat sebuah slide pada sebuah website akan membuat daya tarik tersendiri bagi pangunjung yang berkunjung ke website anda. Biasanya slide akan berisi gambar-gambar menarik. Tidak jarang website lain seperti bukalapak menggunakan slide pada halaman utamanya untuk mempromosikan fitur baru mereka.
Bila anda tertarik maka ini saatnya kita untuk belajar membuat sebuah slide. Yang akan saya ajarkan disini adalah contoh slide sederhana dimana transisi gambar hanya satu fariasi, yaitu gambar bergeser ke kiri.
Sebelum memulai ada baiknya anda menyiapkan gambar yang akan di jadikan slide terlebih dahulu. Jika sudah silahkan buat sebuah folder dengan nama "Slide", didalam folder slide buat lagi folder dengan nama gambar. Letakkan gambar anda di dalam folder gambar. Sekarang buat sebuah file dengan nama "index.html". Isi index ini sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Slide Dengan Javascript</title>
<style type="text/css">
body{
margin: unset;
overflow: hidden;
}
.utama{
width: 100%;
overflow: hidden;
}.isi{
width: 50%;
height: 100%;
margin: auto;
overflow: hidden;
}.isi_gambar{
width: 25%;
float: left;
}.isi2{
width: 400%;
}
.utama img{
width: 100%;
float: left;
}
</style>
</head>
<body>
<div class="utama">
<div class="isi">
<div class="isi2" id="slide">
<div class="isi_gambar" >
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/1.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/2.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/3.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/4.jpg">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var a=-100;
setInterval(function(){
if (a!=0) {
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;transition: 1s ease-in;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;
}else{
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;
}
}, 2000);
</script>
</body>
</html>
<html>
<head>
<title>Belajar Membuat Slide Dengan Javascript</title>
<style type="text/css">
body{
margin: unset;
overflow: hidden;
}
.utama{
width: 100%;
overflow: hidden;
}.isi{
width: 50%;
height: 100%;
margin: auto;
overflow: hidden;
}.isi_gambar{
width: 25%;
float: left;
}.isi2{
width: 400%;
}
.utama img{
width: 100%;
float: left;
}
</style>
</head>
<body>
<div class="utama">
<div class="isi">
<div class="isi2" id="slide">
<div class="isi_gambar" >
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/1.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/2.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/3.jpg">
</div>
<div class="isi_gambar">
<img id="slide" src="file:///C:/Users/Samsung/Desktop/membuat_slide_dengan_javaScript/gambar/4.jpg">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var a=-100;
setInterval(function(){
if (a!=0) {
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;transition: 1s ease-in;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;
}else{
slide = document.getElementById('slide');
slide.style="margin-left:"+a+"%;";
if (a== -300) {
a=0;
}else{
a=a+-100;
}
return a;
}
}, 2000);
</script>
</body>
</html>
Hasilnya akan seperti ini:
Ingat ganti lokasi pada src="" sesuai dengan lokasi gambar anda. Jika tidak berjalan seperti yang saya terapkan di atas berarti anda perlu melihat apakah lokasi gambar sudah sesuai atau belum. Jika memang sudah sesuai coba periksa lagi koding anda.
Do you have
ReplyDelete- Love problem
- Financial Problem
- Career Issues
- Enemy Problem
-Political Issues
Please visit Datuk Marijan's website. We will solve your Problem with Magic Spell MANTRA