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="slideshow-container">
<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>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</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 )
<!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="slideshow-container">
<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>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</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.
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.
Makasi bang
ReplyDeleteSama - sama kak, semoga bermanfaat
Deletemakasi dan
ReplyDeletemakasih banyak bang
ReplyDeletekak bagaimana cara mengurangi kecepetan silde nya kak
ReplyDeletekarena perpindahan foto ke foto nya cepet kali kak
untuk mengurangi kecepatn rubah saja pada setTimeout(showSlides, 2000); 2000 berarti 2 detik
Deletemakasih bang , berkat ini ada penambahan ilmu bagi saya
ReplyDelete