Cara membuat slide gambar di html

Halo sobat blogger, bagaimana kabar teman – teman semua ? Mudah – mudahan baik – baik saja ya. Dalam kesempatan yang baik ini saya akan membagikan tutorial yang berjudul “Cara membuat slide show dengan html, css, dan javascript”. Untuk teman – teman yang sudah biasa coding website mungkin hal ini sudah sangat sering dibuat, jadi teman – teman dapat melewati saja tutorial ini. Langsung saja ke tutorialnya.

1)    Langkah pertama buka dulu text editor kesayangan teman – teman.
       Disini penulis     menggunakan Microsoft Visual Studio Code (VS Code).
2)    Buat folder projectnya, misal diberi nama slideshow.
3)    Di dalam folder slideshow buat folder image dan file index.html
       Untuk lebih jelasnya dapat dilihat seperti contoh dibawah ini :

4)    Masukan gambar yang akan dijadikan slideshow ke dalam folder image
5)    Buka file index.html dan tulislah code seperti dibawah ini :

(Baca Juga : Crud codeigniter mysql bootstrap)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active {
background-color: #717171;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="image/img-1.jpeg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="image/img-2.jpeg" style="width:100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="image/img-4.jpeg" style="width:100%">
<div class="text">Caption Three</div>
</div>

</div>
<br>

</body>
</html>

Setelah selesai menuliskan code di file index.html, coba buka file index.html dengan browser kesayangan anda. Penulis menggunakan firefox web browser. Jika penulisan code benar maka akan menampilkan tampilan seperti berikut ini :

(Baca Juga : Membuat restfull api dengan codeigniter )

(Baca Juga: Cara melakukan join 3 table atau lebih di MySQL )
Bagaimana teman – teman , mudah bukan. Jangan lupa tinggalkan coment apabila ada yang perlu ditanyakan. Semoga article ini membantu teman – teman semua yang sedang belajar cara membuat slide show dengan html,css, dan javascript.

Untuk teman – teman yang mau mendownload filenya silakan buka laman ini.

Salam Blogger.