Cara Membuat Manual Slideshow - Hello Sobat Informatics Jumpa Lagi dengan kami yang pada kesempatan kali ini akan memberikan tutorial tentang manual slideshow, tutorial ini sangat sesuai ini bagi anda yang ingin membuat tampilan web dengan sangat menarik dan dengan kode yang singkat sekali yuk liat tutor kita sebagai berikut.
1. Pertama Kali yang anda harus lakukan adalah menyiapkan 4 buah gambar yang berbeda untuk tampilan slide shownya.
2. Setelah gambar anda siapkan, buatlah Sebuah File berinama mySlide.html pada notepad dan kopikan script dibawah ini sebagai berikut.
<html>
<title>Yong Informatics</title>
<link href="/lib/w3.css" rel="stylesheet"></link>
<body>
<h1 class="w3-center">
<span style="color: blue;">Slideshow</span></h1>
<h2 class="w3-center">
<span style="color: blue;">By : Young Informatics</span></h2>
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_fjords.jpg" style="width: 100%;" />
<img class="mySlides" src="img_lights.jpg" style="width: 100%;" />
<img class="mySlides" src="img_mountains.jpg" style="width: 100%;" />
<img class="mySlides" src="img_forest.jpg" style="width: 100%;" />
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
3. Setelah itu simpan script tsb dengan cara menekan tombol keyboart CTRL+S lalu klik kanan mouse dan open with browser maka akan muncul tampilan seperti berikut.
0 komentar:
Posting Komentar