Penggeser gambar otomatis dalam unduhan gratis html css

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

Bagaimana cara membuat penggeser gambar otomatis di HTML dan CSS?

Bagaimana saya bisa membuat banyak penggeser gambar dalam HTML dan CSS?