Saya telah membuat struktur dasar penggeser gambar ini menggunakan kode berikut. Gambar dapat ditemukan di area ini.
Lebar. 200px dan tinggi. 100px dari kotak ini telah digunakan. Perbatasan putih solid telah digunakan di sekitar kotak
* {
batas. 0;
lapisan. 0;
ukuran kotak. kotak perbatasan;
}
tubuh{
Latar Belakang. #0293cc;
}
wadah {
lebar. 100%;
perataan teks. tengah;
}
#penggeser {
batas. 50px otomatis;
menampilkan. memblokir;
meluap. tersembunyi;
lebar. 200px;
berbatasan. 5px putih solid;
tinggi. 100px;
}
Tambahkan gambar ke Penggeser Otomatis
Sekarang saatnya menambahkan gambar ke struktur dasar itu. Berikut adalah lima gambar yang dapat Anda gunakan sesuai kebutuhan
Di sini semua gambar telah ditambahkan ke 'gambar'. 'Gambar' ini adalah area dasar dari gambar
Karena lebar setiap gambar adalah 100% dan 5 gambar digunakan di sini, lebar 'gambar' adalah 500%
Juga digunakan di sini adalah 'animasi. penggeser 20-an'. Artinya, setiap gambar dapat dilihat kembali setelah 20 detik. Sejak 5 gambar telah digunakan di sini. Jadi kita bisa melihat setiap gambar selama 4 detik
#gambar penggeser {
posisi. relatif;
lebar. 500%;
batas. 0;
kiri. 0;
animasi. penggeser 20-an tak terbatas;
}
# figur penggeser. gambar {
lebar. 20%;
mengambang. kiri;
}
img {
lebar. 100%;
tinggi. mobil;
}
Aktifkan perubahan gambar otomatis
Sekarang penggeser gambar otomatis ini telah diaktifkan menggunakan @keyframes. Lebar penggeser total adalah 100%, dan karena 5 gambar digunakan di sini, lebar setiap gambar adalah 20%. Dengan ini, total waktu penggeser adalah 20 detik
Disini kondisi tersebut telah diaktifkan menggunakan keyframes. Untuk 20% dari total waktu penggeser, kita dapat melihat setiap gambar
@keyframes penggeser {
0% { tersisa. 0;
20% { tersisa. 0;
25% { tersisa. -100%;
45% { tersisa. -100%;
50% { tersisa. -200%;
70% { tersisa. -200%;
75% { tersisa. -300%;
95% { tersisa. -300%;
100% { tersisa. -400%;
}
Jadikan Penggeser Gambar Otomatis Responsif
Sekarang penggeser gambar otomatis ini telah dibuat responsif sehingga pengguna perangkat apa pun dapat menggunakannya dengan sangat mudah. Menggunakan @media, kode yang berbeda telah digunakan untuk perangkat dengan ukuran berbeda
Layar @media dan (min-width. 400px) {
#penggeser {
lebar. 400px;
tinggi. 200px;
}
}
Layar @media dan (min-width. 600px) {
#penggeser {
lebar. 600px;
tinggi. 300px;
}
}
Mudah-mudahan, Anda telah mempelajari cara saya membuat Penggeser Gambar Otomatis Responsif ini menggunakan kode di atas
Jika Anda ingin membuat gambar jenis yang lebih canggih, Anda dapat melihat desainnya. Namun, penggeser gambar CSS ini cukup untuk pemula
Jika Anda kesulitan menyalin dan merangkai kode di atas, gunakan tombol di bawah ini. Pastikan untuk mengomentari bagaimana Anda menyukai penggeser gambar otomatis ini