Cara menggunakan responsive image slider css

Cara Membuat Slideshow Otomatis dengan HTML dan CSS

Samuel Pasaribu

Table of Contents Show

Cara Membuat Slideshow Tanpa Aplikasi
Langkah 1 : Desain halaman web
Langkah 2 : Buat struktur dasar slider
Langkah 3 : Tambahkan slideshow otomatis gambar slider
Langkah 4 : Mengaktifkan Auto-Player dengan CSS
Download Source code
Samuel Pasaribu

14 Sep, 2021

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.

Baca juga : Cara Membuat Animasi Loading Page dengan HTML, CSS, dan JavaScript

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.

Baca juga : Cara menggabungkan html dan css menjadi satu file

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 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.

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.

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.

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.

Baca juga : Source Code Kalkulator Sederhana Menggunakan Javascript

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.

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.

Download Here

Baca juga : Cara Menghubungkan Hasil Form HTML dengan JavaScript

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.

Baca juga : Pengertian Teknologi Informasi dan Komunikasi Menurut Para Ahli

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!

Samuel Pasaribu

Samuel Pasaribu working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.