Cara Membuat Slideshow Otomatis di HTML Website

Cara Membuat Slideshow Otomatis di HTML Website

Diposting pada

Cara Membuat Slideshow Otomatis di HTML – Slideshow otomatis di HTML dengan bantuan CSS dan juga ditambah Javascript, cara membuat Slideshow sangat mudah dengan kombinasi antara 3 elemen tersebut anda bisa atur slideshow otomatis yang ada website anda.

Slideshow sendiri ialah tayangan gambar yang digunakan pada sebuah website untuk memberikan informasi secara singkat menggunakan visual (gambar slide).

Cara ini digunakan untuk membantu pengunjung website anda lebih mengetahui konten ataupun informasi yang disajikan dalam bentuk gambar yang menarik dan juga lebih dapat efisien terhadap ruang template website anda.

Cara Membuat Slideshow Otomatis di HTML

Pada tutorial kali ini kita akan menggunakan bahasan pemrograman berupa HTML, CSS dan juga javascript, untuk itu kita membutuhkan sebuah situs akses visual yang menyediakan ketiga bahasa tersebut. Untuk tutorial ini saya gunakan Codepen : buka sini.

Langkah Membuat Slideshow Otomatis

1. Persiapkan gambar desain website anda (saya mencontohkan menggunakan gambar blog ini sebanyak 3 gambar) anda bisa atur jumlah gambar tersebut.

2. Masuk ke codepen dan Copy HTML kode dibawah ini:

<body>    
<h1>Mang Otep Slideshow</h1>
<div>
<center><!-- Sesuaikan jumlah gambar -->
<img class="slideshow" src="https://www.mangotep.com/wp-content/uploads/2019/12/Cara-Mengobati-Luka-Bakar-yang-Menggelembung.png">
<img class="slideshow" src="https://www.mangotep.com/wp-content/uploads/2019/12/TUTORIAL-LENGKAP-Menempatkan-Kata-Kunci-di-Artikel.png">
<img class="slideshow" src="https://www.mangotep.com/wp-content/uploads/2019/12/Cara-Melihat-Responsive-Blog-atau-Website-anda.png">
</center>
</div>
</body>

3. Selanjutnya, copy Javascript dibawah ini:

    var myIndex = 0;
carousel();

function carousel() {
	var i;
	var x = document.getElementsByClassName("slideshow");
	for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";  
	}

	myIndex++;
	if (myIndex > x.length) {myIndex = 1}    
	x[myIndex-1].style.display = "block";  
	setTimeout(carousel, 3000); //Ubah gambar setiap 3 detik
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var myIndex = 0;
carousel();
 
function carousel() {
	var i;
	var x = document.getElementsByClassName("slideshow");
	for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";  
	}
 
	myIndex++;
	if (myIndex > x.length) {myIndex = 1}    
	x[myIndex-1].style.display = "block";  
	setTimeout(carousel, 3000); //Ubah gambar setiap 3 detik
	}

4. Kemudian anda tambahkan desain CSS yang anda inginkan, untuk tutorial ini saya buat sederhana agar dapat diedit dengan mudah. Copy kode ini dibagian CSS.

body {text-align:center;background-color:#eee}
.slideshow {max-width:630px;width:100%;content-align:center;display: none;}

5. Simpan kode tersebut dan lihat hasilnya.

Sudah terlihat hasil yang anda dapatkan setelah melakukan beberapa langkah diatas ? saya berikan Live demo agar anda bisa lebih mudah untuk melihat hasil yang seharusnya.

Diatas adalah tutorial bagaimana Cara Membuat Slideshow Otomatis, sebenarnya ada cara yang lebih mudah dengan menggunakan google slide, anda bisa lihat disini : Google Slide Presentasion.

Semoga artikel ini dapat membantu anda dalam pembelajaran bahasa pemrograman lainnya, share artikel ini jika bermanfaat dan terimakasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *