Membuat Gambar Slideshow menggunakan CSS dan HTML
Assalamualaikum wr.b
Pagi kawan, pada hari ini saya akan sharing tentang bagaimana cara membuat Slideshow menggunakan CSS dan HTML
A. Pengertian
Pengertian slideshow adalah tampilan objek foto, gambar, dan objek lainnya yang dalam beberapa saat saling bergantian. Misalnya dari slide foto atau gambar pertama,ganti ke slide kedua, begitu selanjutnya sampai kembali ke slide pertama dan akan berulang terus menerus. Fungsi slideshow antara lain adalah untuk mempercantik tampilan blog sehingga terkesan elegan,
B. Latar belakang
Latar belakang belajar tentang materi kali ini adalah agar kita bisa membuat Slideshow gambar dengan cara dasar yaitu menggunakan CSS dan HTML
C. Alat dan bahan
- Komputer / Laptop
- Text Editor
D. Tujuan
Agar kalian tahu bagaimana cara membuat gambar slideshow Untuk Pemula
E. Langkah - langkah
1. Membuat file " Index.html ".
2. Isi file " Index.html " dengan script dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Membuat Slideshow dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<input type="radio" name="slide" class="radio-nav" id="nav-1" checked/>
<input type="radio" name="slide" class="radio-nav" id="nav-2"/>
<input type="radio" name="slide" class="radio-nav" id="nav-3"/>
<ul class="slide">
<li class="slide-1">
<img src="images/1.jpg"/>
<div class="caption"></div>
</li>
<li class="slide-2">
<img src="images/2.jpg"/>
<div class="caption"></div>
</li>
<li class="slide-3">
<img src="images/3.jpg"/>
<div class="caption"></div>
</li>
</ul>
<div class="nav-arrow nav-next">
<label class="nav-1" for="nav-1">></label>
<label class="nav-2" for="nav-2">></label>
<label class="nav-3" for="nav-3">></label>
</div>
<div class="nav-arrow nav-prev">
<label class="nav-1" for="nav-1"><</label>
<label class="nav-2" for="nav-2"><</label>
<label class="nav-3" for="nav-3"><</label>
</div>
</div>
</body>
</html>
3. Kemudian buat file " style.css "
4. Isi file " style.css " dengan script dibawah ini
* {
padding:0;
margin:0;
}
img {
max-width: 100%;
height: auto;
}
ul,ol {
list-style-type: none;
}
.container {
margin: auto;
position: relative;
overflow: hidden;
}
.container, ul.slide li img{
width:1300px; /* Kanggo Lebare */
height: 670px; /* Kanggo Dawane */
}
ul.slide {
position: absolute;
display: block;
width:300%;
}
.caption {
position: absolute;
background-color: rgba(0,0,0,0.5);
bottom:0;
padding:10px;
color:#fff;
left: 0;
right: 0;
}
/* Iki Script Slideshowne */
ul.slide li {
display: inline-block;
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
ox-sizing:border-box;
-webkit-transition: -webkit-transform 2000ms;
-moz-transition: -moz-transform 2000ms;
transition: -webkit-transform 2000ms, transform 2000ms;
}
ul.slide li.slide-1 {
left: 0%;
}
ul.slide li.slide-2 {
left: 100%;
}
ul.slide li.slide-3 {
left: 200%;
}
#nav-1:checked ~ ul.slide li{
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
transform: translateX(0%);
}
#nav-2:checked ~ ul.slide li{
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
#nav-3:checked ~ ul.slide li {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
transform: translateX(-200%);
}
.radio-nav {
display: none;
}
/* Kanggo Tombol pindah Slideshow */
.nav-arrow {
position: absolute;
top:45%;
width:50px;
height: 50px;
}
.nav-next {
right:10px;
}
.nav-prev {
left:10px;
}
.nav-arrow label {
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
background-color: rgba(0,0,0,0.3);
color: #fff;
border-radius: 50%;
display: block;
position: absolute;
padding:15px 20px;
cursor: pointer;
z-index: 1;
opacity: 0;
font-weight: bold;
line-height: 1;
}
.container:hover .nav-arrow label{
background-color: rgba(0,0,0,0.7);
}
#nav-1:checked ~ .nav-prev label.nav-3,
#nav-1:checked ~ .nav-next label.nav-2,
#nav-2:checked ~ .nav-prev label.nav-1,
#nav-2:checked ~ .nav-next label.nav-3,
#nav-3:checked ~ .nav-prev label.nav-2,
#nav-3:checked ~ .nav-next label.nav-1 {
z-index: 2;
opacity: 1;
}
Sekian share kali ini, selamat mencoba dan semoga bermanfaat, terimakasih.
Wassalamualaikum wr.wb