Bisakah kita melakukan slideshow menggunakan css?

Saya akan membantu Anda jika Anda ingin membuat Slideshow Gambar Otomatis. Di sini saya telah membuat Penggeser Gambar Otomatis yang dibuat hanya dengan html dan css

ya kamu benar
Slider ini dibuat hanya dengan html dan css, gambarnya akan berubah secara otomatis. Namun, saya sudah membuat slider menggunakan JavaScript. Namun, bagi banyak pengguna, ini tampak agak rumit. Tonton demo langsungnya untuk mempelajari cara kerjanya

Jadi saya membuat desain ini. Pertama penggeser dibuat oleh html dan gambar ditambahkan. Kemudian saya mendesain dengan css dan mengatur untuk mengubah gambar secara otomatis

Slideshow Gambar Otomatis dalam HTML CSS

Penggeser Gambar Otomatis dalam html css ini telah dibuat sedemikian sederhana sehingga Anda akan terkejut melihatnya

Pertama saya membuat kotak sederhana. Kotak width: 500px_ dan batas 10 px digunakan. Penggunaan batas sangat meningkatkan keindahan penggeser gambar ini

Kode HTML

Kode berikut adalah kode html yang telah ditambahkan struktur penggeser dan gambar. Disini saya menggunakan 4 gambar

<!--Basic structure of slider-->
<div class="container">
<!--Area of the images-->
   <div class="wrapper">
      <img src="https://filmswot.files.wordpress.com/2018/01/coco_dominates_chinese_box_office_.jpg">
      <img src="https://www.foundry.com/sites/default/files/inline-images/Images_003_0.jpg">
      <img src="https://www.foylefilmfestival.org/sites/default/files/COCO%20main%20image%203.jpg">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2017%2F11%2Fcoco_c330_56b_pub-pub16n-186_rgb-2000.jpg">
   </div>

</div>

Masuk ke mode layar penuh Keluar dari mode layar penuh

Kode CSS

Kode di bawah ini adalah css yang digunakan untuk merancang penggeser gambar dan mengimplementasikan konversi otomatis gambar

• Struktur dasar slider pertama kali dirancang oleh beberapa css
• Kemudian gambar dirancang. Lebar gambar dijaga sama dengan lebar slider
• Kemudian animasi ditambahkan di antara gambar dan diaktifkan oleh bingkai kunci

👉👉 Logika sederhana telah digunakan untuk mengubah gambar di sini. Di sini total waktu animasi dibagi dengan jumlah gambar. Saat itu kita akan melihat gambarnya

Artinya pada saat itu kita akan melihat gambar itu. Sejak 4 gambar telah digunakan di sini. Jadi kita bisa melihat setiap gambar hingga 25% dari total waktu

Karena total waktu animasi adalah 16 detik, kita dapat melihat setiap gambar for 4 seconds

/*The webpage has been designed*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #ffffff;
}

/*Basic structure of slider*/
.container{
    width: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 15px black;
}

/*Area of images*/
.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}
/*Animation activated by keyframes*/
@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

Semoga Anda tidak memiliki pertanyaan lagi tentang Slideshow Gambar Otomatis ini di HTML CSS. Beri tahu saya di komentar jika Anda memiliki pertanyaan

Saya telah membagikan tutorial tentang banyak penggeser gambar tingkat lanjut oleh JavaScript sebelumnya. Jika Anda mengetahui JavaScript maka Anda dapat melihat tutorial penggeser gambar otomatis itu

Bagaimana cara membuat slider menggunakan CSS?

Apa gunanya tayangan slide di CSS?

Bagaimana Anda membuat tayangan slide gambar dalam HTML dan CSS?

Bagaimana cara membuat tayangan slide dengan HTML dan CSS tanpa JavaScript?