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.
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.
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.
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.
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.
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.
Baca juga : Cara Membuat View Counter di Template Blogger JetTheme dan juga untuk ke step ke2 yaitu: Cara Membuat Slideshow Responsive di Blog dengan HTML, CSS, dan JavaScript dengan Mudah.
Download Source code
Download Source code untuk membuat Slider image dengan html dan css melalui tombol download di bawah ini.
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!
saya menambahkan img src ke lima dst kok tidak bisa tampil ya mas?
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