Html kode tayangan slide otomatis tanpa javascript

Andreas Ströberg

Mengikuti

14 Agustus 2019

·

4 menit membaca

·

Khusus anggota

Pada artikel ini, Anda akan mempelajari cara membuat penggeser gambar otomatis hanya menggunakan HTML dan CSS. Sebelumnya saya berbagi dengan Anda lebih banyak jenis penggeser gambar manual dan otomatis

Pertama saya mendesain halaman web lalu saya membuat kotak di sana. Kotak ini adalah struktur penggeser yang telah saya tambahkan gambar yang diperlukan

✅ Tonton Pratinjau Langsung 👉👉 Penggeser Gambar Otomatis

Saya menggunakan border of 10px yang semakin meningkatkan keindahannya. Gambar yang digunakan di sini berubah setiap detik. Namun, Anda dapat mengubah jumlah waktu yang Anda butuhkan

Saya telah memberikan penjelasan langkah demi langkah lengkap dari setiap baris kode dalam tutorial berikut

Langkah 1. Desain halaman web

Saya mendesain halaman web menggunakan sedikit kode CSS di bawah ini. Saya hanya mengubah warna latar belakang halaman web di sini

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #7aacff;
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Langkah 2. Buat struktur dasar penggeser

Sekarang saya telah membuat kotak di halaman itu 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 menggunakan box-shadow. Jika Anda menonton demonya, Anda akan mengerti bahwa ada bayangan hitam di sekitar slider ini. Saya menggunakan bayangan kotak untuk membuatnya

 <div class="container">

 </div>

Masuk ke mode layar penuh Keluar dari mode layar penuh

.container{
    width: 85vmin;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: 10px 25px 30px rgba(0,0,0,0.3);
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Langkah 3. Tambahkan gambar ke penggeser gambar otomatis

Saya telah menambahkan gambar yang diperlukan di penggeser gambar menggunakan kode berikut. Di sini saya hanya menggunakan empat gambar. Anda dapat menggunakan lebih banyak gambar jika Anda mau

 <div class="wrapper">
   <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg">
   <img src="https://images6.alphacoders.com/462/thumb-1920-462371.jpg">
   <img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg">
   <img src="https://cdn.wallpapersafari.com/24/98/dwMtqD.jpg">
 </div>

Masuk ke mode layar penuh Keluar dari mode layar penuh

Saya telah menempatkan gambar-gambar ini dengan rapi di penggeser menggunakan kode CSS di bawah ini. Di sini saya telah menambahkan animasi. Saya menggunakan animation for 16 seconds yang artinya akan membutuhkan total 16 detik untuk mengubah keempat gambar ini

Artinya setiap gambar akan terus berubah setiap 4 detik. Meskipun Anda ingin gambar berubah lebih cepat atau lambat, Anda dapat mengubah nilainya

.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Langkah 4. Aktifkan putar otomatis dengan CSS

Di atas kami telah membuat penggeser gambar lengkap menggunakan html css. 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 @keyframes. Saya telah mengubah setiap gambar sepanjang sumbu x menggunakan transformasi. Saya telah menentukan 100% dari total lebar slider yang akan memakan waktu 16 detik untuk menyeberang

Karena saya menggunakan empat gambar di sini, saya membagi total jarak (100%) dengan empat. Dengan demikian, dibutuhkan 4 detik untuk berubah dari 0 menjadi 25 persen. Ini akan memakan waktu 4 detik lagi dari 25 menjadi 50

Dengan demikian, dari 0 hingga 25 di sini saya telah menetapkan nilai translateX ke 0. Artinya tidak akan ada perubahan, kita lihat dulu gambarnya. Kemudian dari 25 menjadi 50, saya menggunakan nilai translateX -100% yang berarti saya akan mengubah gambar terlebih dahulu 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 translateX value -300% untuk 75 hingga 100 yang berarti kita akan melihat gambar keempat, bukan gambar ketiga. Saya menetapkan waktu 16 detik untuk mengubah seluruh penggeser gambar otomatis ini

@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

Masuk ke mode layar penuh Keluar dari mode layar penuh

Pos Terkait

1. CSS HTML Footer Responsif
2. Daftar Todo JavaScript
3. Stopwatch sederhana menggunakan JavaScript
4. Kalkulator Usia Javascript
5. Pembuat Kata Sandi Acak JavaScript
6. Penggeser Gambar Otomatis dalam Html, CSS
7. Menu Sidebar Menggunakan HTML CSS

Semoga Anda belajar dari tutorial ini bagaimana saya membuat penggeser gambar otomatis dalam kode HTML CSS. Jika Anda ingin menavigasi dengan penggeser gambar ini, Anda dapat menonton tutorial lain yang saya buat. 😊

Bagaimana cara membuat tayangan slide otomatis dalam HTML tanpa JavaScript?

Bagaimana cara membuat tayangan slide otomatis dalam HTML?

Bagaimana cara membuat korsel dalam HTML tanpa JavaScript?

Bagaimana cara membuat tayangan slide otomatis hanya dalam HTML dan CSS?