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.
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.
Demikian yang dapat kami sampaikan pada posting kali ini tentang Cara Membuat Slideshow Otomatis dengan HTML dan CSS untuk membuat gambar berganti 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.