Sesuai dengan judulnya Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery. Kali ini kita akan menciptakan sebuah slide dengan memakai instruksi JavaScript, disini kita tidak akan memakai dukungan plugin dan juga Jquery. Kode yang akan kita gunakan benar-benar orisinil Javascript.
Membuat sebuah slide pada sebuah website akan menciptakan daya tarik tersendiri bagi pangunjung yang berkunjung ke website anda. Biasanya slide akan berisi gambar-gambar menarik. Tidak jarang website lain menyerupai bukalapak memakai slide pada halaman utamanya untuk mempromosikan fitur gres mereka.
Bila anda tertarik maka ini saatnya kita untuk mencar ilmu menciptakan sebuah slide. Yang akan kami ajarkan disini merupakan tumpuan slide sederhana dimana transisi gambar hanya satu fariasi, merupakan 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 menyerupai ini:
Ingat ganti lokasi pada src="" sesuai dengan lokasi gambar anda. Jika tidak berjalan menyerupai yang kami terapkan di atas berarti anda perlu melihat apakah lokasi gambar sudah sesuai atau belum. Jika memang sudah sesuai coba periksa lagi koding anda.
Post a Comment