Slide show dengan image dan capture

BUKA →

Kode berikut merupakan implementasi dari slideshow otomatis menggunakan HTML, CSS, dan JavaScript. Berikut adalah penjelasan cara kerja dan fungsi dari setiap bagian kode tersebut:...

Automatic Slideshow

Change image every 3 seconds:

1 / 3

Caption Text

2 / 3

Caption Two

3 / 3

Caption Three

... --

1. CSS Styling:

   - `* {box-sizing: border-box;}`: Mengatur model kotak untuk semua elemen agar termasuk padding dan border dalam perhitungan lebar dan tinggi.

   - `body {font-family: Verdana, sans-serif;}`: Menetapkan jenis font untuk teks pada body.

   - `.mySlides {display: none;}`: Mengatur elemen dengan kelas `mySlides` menjadi tidak terlihat (hidden).

   - `img {vertical-align: middle;}`: Mengatur tata letak vertikal gambar.

   - `.slideshow-container`: Menetapkan gaya untuk wadah slideshow, termasuk lebar maksimum, posisi relatif, dan margin otomatis.

   - `.text`, `.numbertext`: Menetapkan gaya untuk teks dan nomor pada gambar slideshow.

   - `.dot`: Menetapkan gaya untuk elemen dot/bullet/indicator pada slideshow.

2. HTML Structure:

   - Elemen-elemen HTML digunakan untuk menunjukkan struktur dasar halaman, termasuk heading (`<h2>`), paragraf (`<p>`), dan wadah slideshow (`<div>`).

3. JavaScript Script:

   - Variabel `slideIndex` digunakan untuk melacak indeks gambar yang sedang ditampilkan.

   - Fungsi `showSlides()` mengatur tampilan slideshow dengan mengubah properti `display` dari elemen-elemen gambar dan mengganti kelas aktif pada elemen dot.

   - Perulangan `for` digunakan untuk menyembunyikan semua gambar dan menghapus kelas "active" dari semua dot.

   - Gambar dan dot yang sesuai dengan `slideIndex` ditampilkan dan diberikan kelas "active".

   - Fungsi ini kemudian dijalankan secara rekursif setiap 3000 milidetik (3 detik) menggunakan `setTimeout`.

4. Media Query:

   - Terdapat aturan media query untuk menyesuaikan ukuran teks pada elemen dengan kelas `.text` jika lebar layar kurang dari 300 piksel.

Pada intinya, kode ini membuat tampilan slideshow otomatis dengan transisi fade antara gambar-gambar, dilengkapi dengan nomor dan dot sebagai navigasi. Fungsi JavaScript dijalankan secara terus menerus untuk mengubah gambar setiap 3 detik dan memberikan efek fade.

0 comments