Hello Sobat Young Informatics Masih dengan Kami Young Informtics yang pada kesempatan kali ini kami akan membahas tentang cara mudah membuat slide show murni dengan fungsi html dan css yuk langsung saja ikuti step-step seperti dibawah ini.
1.Hal yang harus anda lakukan untuk membuat slide show pertama kali adalah membuat kode seperti dibawah ini lalu simpan dengan nama mySlide.html
<html>
<head>
<title> Membuat Slide show untuk halaman web </title>
<link rel="stylesheet" type="text/css" href="slide.css">
</head>
<body>
<div class="slideshow">
<div class="layer1">
</div>
<div class="layer2">
</div>
<div class="layer3">
</div>
<div class="layer4">
</div>
<div class="layer5">
</div></div>
</body>
</html>
2. Nah Setelah Kode HTML tsb disimpan kita berlanjut ke langkah selanjutnya yakni membuat sintaks css nya, simpan file dibawah ini dengan nama slide.css
@keyframes layer2Anim {
0%{
opacity:0;
}
17%{
opacity:0;
}
33%{
opacity:1;
}
50%{
opacity:1;
}
67%{
opacity: 0;
}
83%{
opacity: 0;
}
100%{
opacity:0;
}
}
*{
box-sizing :border-box;
}
.slideshow{
position :relative;
width:100%;
height:29%;
overflow: hidden
}
.placeholder{
width:100%;
visibility:hidden;
}
.layer1,.layer2,.layer3{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-repeat: no-repeat;
}
.layer1{
background-image:url(slideshow/slide1.jpg);
}
.layer2{
background-image:url(slideshow/slide2.jpg);
animation: layer2Anim 7s infinite;
}
.layer3{
background-image:url(slideshow/slide3.jpg);
animation: layer2Anim 7s infinite;
}
.layer4{
background-image:url(slideshow/slide4.jpg);
animation: layer2Anim 7s infinite;
}
.layer5{
background-image:url(slideshow/slide5.jpg);
animation: layer2Anim 7s infinite;
}
3. Buatlah sebuah folder berinama slide dan masukan gambar anda kedalam folder tsb.
4. Setelah itu klik kanan pada pada file mySlide.html dan Open with browser maka gambar akan muncul dibrowser anda
gak work,, tolong lain kali posting yang sudah jelas2 work ya demi kenyamanan pembaca!!
BalasHapuscacacd hahah
BalasHapuszonkkkkkkkkkk
BalasHapus