Cara Membuat Slideshow Otomatis dengan HTML dan CSS


Cara Membuat Slideshow Otomatis dengan HTML dan CSS Dengan tampilan Penggeser Gambar Otomatis hanya menggunakan HTML dan CSS. Slideshow adalah tampilan gambar yang disajikan secara bergantian dengan interval waktu tertentu yang telah disesuaikan.

Pada artikel ini, Anda akan belajar cara membuat slider image dengan html dan css. Dimana Anda akan melihat gambar berganti otomatis di html. Saat ini untuk membuat slider gambar seperti slideshow otomatis Anda dapat menggunakan berbagai pilihan library untuk digunakan dalam melakukan perubahan tampilan gambar secara otomatis.

Pilihan library yang digunakan antara lain menggunakan s3slider, coinslider, wowslide, flexslider dan sebagainya. Pertama kita mendesain halaman web dan kemudian kita membuat kotak di sana. Kotak ini adalah struktur kode untuk penggeser gambar otomatis yang telah ditambahkan dengan berbagai gambar yang diperlukan.


Di sini kita akan menggunakan border of 10px yang semakin meningkatkan keindahannya. Gambar yang digunakan di sini berubah setiap detik. Namun, Anda dapat mengubah jumlah waktu sesuai dengan kebutuhan Anda. Sebelum memulai tutorial akan lebih baik jika Anda mempelajari Pengenalan Dasar HTML dan Dasar CSS beserta contohnya pada postingan sebelumnya di blog ini.

Dalam tutorial ini, saya akan menunjukkan cara membuat slideshow otomatis hanya dengan menggunakan kode HTML dan CSS. Untuk itu simak ulasannya di bawah ini sampai selesai agar kamu bisa membuat slider image yang berubah secara otomatis.

Saya menggunakan batas 10px yang semakin meningkatkan keindahannya. Gambar yang digunakan di sini berubah setiap detik. Namun, Anda dapat mengubah jumlah waktu yang Anda butuhkan. Di bawah ini saya telah memberikan demo langsung yang akan membantu Anda mengetahui cara kerjanya. Anda juga bisa mengetahui Cara Menggunakan Codepen di Postingan Blogger untuk memahaminya.

 
Semoga Anda bisa belajar dari live demo di atas bagaimana cara kerja Slideshow Otomatis dengan HTML dan CSS di blog ini.



Cara Membuat Slideshow Tanpa Aplikasi


Sekarang saya telah membagikan tutorial lengkap di bawah ini tentang bagaimana saya membuat desain ini. Jika Anda hanya ingin download kode sumber , gunakan tab On this Content diatas dan pilih download source code atau bisa juga download di bagian bawah artikel. Jika Anda seorang pemula maka Anda harus mengikuti tutorial Cara Membuat Slideshow Tanpa Aplikasi di bawah ini.

Dalam tutorial ini, saya akan menunjukkan cara membuat slideshow otomatis hanya dengan menggunakan kode HTML dan CSS. Untuk itu simak ulasannya di bawah ini sampai selesai agar Anda bisa Membuat Slideshow Otomatis di HTML tanpa ribet. 

Langkah 1 : Desain halaman web


Saya merancang halaman web menggunakan sejumlah kecil kode CSS di bawah ini. Saya hanya mengubah warna latar belakang halaman web di sini.


Anda bisa melihat tampilan hasil dari kode di atas menjadi desain halaman web seperti di bawah ini.


Cara Membuat Slideshow Otomatis dengan HTML dan CSS 

Langkah 2 : Buat struktur dasar slider


Sekarang saya telah membuat kotak di halaman tersebut dengan menggunakan kode HTML dan CSS . Saya akan menyimpan semua gambar di kotak ini. Saya telah menggunakan lebar kotak ini 85vh. Batas 10 px telah digunakan di sekitar kotak ini yang semakin meningkatkan keindahannya. 

Pada akhirnya saya memutuskan untuk menggunakan box-shadow. Jika Anda menonton demo, Anda akan mengerti bahwa ada bayangan hitam di sekitar slider ini. Saya menggunakan box-shadow untuk membuatnya.



Anda dapat melihat hasil dari kode di atas yang telah ditambahkan dan menjadi desain halaman web seperti di bawah ini.


Cara Membuat Slideshow Tanpa Aplikasi 

Langkah 3 : Tambahkan slideshow otomatis gambar slider


Saya telah menambahkan gambar yang diperlukan dalam slideshow otomatis gambar slider ke bagian class="wrapper" menggunakan kode berikut. Di sini saya hanya menggunakan empat gambar. Anda dapat menggunakan lebih banyak gambar jika Anda mau.


Saya telah menempatkan gambar-gambar ini dengan rapi di slider menggunakan kode CSS di bawah ini. Di sini saya telah menambahkan animasi. Saya menggunakan animasi 16 detik yang berarti akan membutuhkan durasi 16 detik untuk mengubah keempat gambar ini.

Artinya setiap gambar akan terus berubah setiap 4 detik. Bahkan jika Anda ingin gambar berubah cepat atau lambat, Anda dapat mengubah nilai dalam kode seperti berikut.


Maka hasilnya akan terlihat seperti dibawah ini.

slideshow otomatis gambar slider 
Langkah 4 : Mengaktifkan Auto-Player dengan CSS


Pada gambar di atas kami telah membuat slider gambar lengkap . Sekarang saya telah menambahkan autoplay di dalamnya yang berarti saya telah menggunakan kode CSS berikut untuk mengubah gambar secara otomatis.

Saya telah mengubah gambar menggunakan persentase menggunakan @keyframes. Ini adalah metode yang sangat sederhana. Saya telah mengubah setiap gambar di sepanjang sumbu x menggunakan transformasi. Saya telah menentukan 100% dari total lebar penggeser yang akan membutuhkan waktu 18 detik untuk menyeberang.


Catatan : Karena saya telah menggunakan empat gambar di sini, saya telah membagi jarak total (100%) dengan empat. Dengan demikian, dibutuhkan 4 detik untuk beralih dari 0 hingga 25 persen. Ini akan memakan waktu 4 detik lagi dari 25 hingga 50.

Jadi dari 0 sampai 25 disini saya atur nilai translateX menjadi 0. Artinya tidak akan ada perubahan, kita akan melihat gambar pertama. Kemudian dari 25 hingga 50, saya menggunakan nilai translateX -100% yang berarti saya akan mengubah gambar pertama dan melihat gambar kedua. Karena panjang setiap gambar adalah 100%.

Demikian pula dari 50 hingga 75, saya telah menggunakan -200 yang berarti saya akan melihat gambar ketiga setelah meninggalkan gambar kedua. Demikian pula, saya telah menggunakan nilai translateX -300 untuk 75 hingga 100 yang berarti kita akan melihat gambar keempat alih-alih gambar ketiga. Saya menetapkan waktu 16 detik untuk mengubah seluruh penggeser gambar ini.


Maka gambar akan terlihat seperti ini.

Mengaktifkan Auto-Player dengan CSS 

Download Source code


Download Source code untuk membuat Slider image dengan html dan css melalui tombol download di bawah ini.

Download Here 


Semoga dapat membantu Anda belajar dari tutorial ini bagaimana saya membuat slider gambar otomatis hanya menggunakan kode HTML dan CSS . Selain itu, Anda juga dapat belajar untuk membuat kalkulator dengan HTML, CSS, JavaScript di Notepad untuk mengasah skill agar dapat menguasai pemrograman.


Kesimpulan


Cara Membuat Slideshow Otomatis yang dibuat menggunakan HTML dan CSS. Membuat slideshow di blog dapat membantu Anda seperti menjelaskan sesuatu kepada pengguna. Seperti menunjukkan antarmuka demo dari program yang dimuat. Bisa juga menambah wawasan anda untuk membuat slideshow di postingan blog tanpa harus mengedit Template di Edit HTML. Demikian yang dapat kami sampaikan pada postingan kali ini tentang Cara Membuat Slideshow Otomatis dengan HTML dan CSS untuk membuat gambar berubah secara otomatis di html. Kami harap Anda menyukai artikel ini. Jika Anda memiliki keraguan, pertanyaan, atau umpan balik, beri tahu kami di bagian komentar di bawah.


Demikian posting kali tentang Cara Membuat Slideshow Otomatis dengan HTML dan CSS. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
Next Post Previous Post
2 Comments
  • Johanes Gaga
    Johanes Gaga February 23, 2023 at 6:29 PM

    saya menambahkan img src ke lima dst kok tidak bisa tampil ya mas?

    • samuelpasaribu.com
      samuelpasaribu.com February 28, 2023 at 9:09 AM

      Apabila gambar-gambar tidak tampil, kemungkinan terdapat kesalahan dalam file gambar atau file HTML yang telah dibuat. Berikut adalah beberapa hal yang dapat diperiksa untuk memastikan gambar dapat ditampilkan di halaman web:

      1. Periksa kembali apakah file gambar tersedia pada direktori yang sesuai.
      2. Pastikan bahwa file gambar tersebut memiliki format yang didukung oleh browser seperti JPEG, PNG, atau GIF.
      3. Periksa apakah URL file gambar yang dijadikan sebagai src pada tag img sudah benar dan dapat diakses.
      4. Periksa apakah terdapat kesalahan penulisan pada tag img atau atributnya, seperti alt, height, atau width.
      5. Pastikan bahwa tidak ada adblocker atau plugin lain yang menghalangi gambar untuk ditampilkan.
      Setelah memastikan semua hal di atas, gambar seharusnya sudah dapat ditampilkan dengan benar di halaman web.

      Selain itu sobat juga bisa mencoba membuat slide show yang lebih responsive di artikel: Cara Membuat Slideshow Responsive di Blog dengan HTML, CSS, dan JavaScript

Add Comment
comment url