Penggeser Gambar Latar Belakang CSS Murni

sukma
sukma
3 minute read

Mencari slider gambar latar belakang CSS murni untuk ditambahkan sebagai latar belakang? Muncul dengan fungsi putar otomatis yang sempurna untuk menjalankannya sebagai latar belakang. Ini dikembangkan dengan CSS dan sepenuhnya responsif.

Ini sangat ringan. Apakah kamu tidak percaya padaku? Lihat demo dan unduh sumbernya dan temukan beberapa baris CSS dan HTML.

Pada saat yang sama, slider ini juga sederhana tanpa navigasi Titik atau panah. Karena didesain untuk latar belakang jadi tidak memiliki fungsi thumbnail.

Tetapi Anda dapat menemukan tutorial kami sebelumnya tentang membuat slider Gambar CSS dengan thumbnail yang juga mendukung navigasi panah untuk pengalaman pengguna yang mudah.

Fungsi putar otomatis termasuk dalam slider ini yang mengubah foto secara otomatis. Dengan bantuan animasi CSS3, Kami akan melakukannya @keyframesmembuat animasi kiri ke kanan.

Untuk membuat slider menutupi semua halaman, Kami akan menggunakan elemen VH yang membuat slider dalam ketinggian penuh pada setiap jenis resolusi layar.

Kami tidak memerlukan JavaScript untuk menangani fungsinya dan masih mendukung banyak browser. Namun untuk browser lama, Anda perlu menyediakan fallback.

Cara Membuat Slider Gambar Latar Belakang CSS

Markupnya sangat sederhana. Kita perlu mendefinisikan ID bgslider dan kemudian tempatkan elemen HTML5 gambar di dalamnya.

Kami hanya akan menambahkan gambar seperti yang ditunjukkan di bawah ini.

<div id="bgslider">     <figure>         <img src="https://codeconvey.com/css-background-image-slider/images/slide1.jpg" alt="Slider">         <img src="images/slide2.jpg" alt="Slider">         <img src="images/slide3.jpg" alt="Slider">         <img src="images/slide4.jpg" alt="Slider">         <img src="images/slide5.jpg" alt="Slider">     </figure> </div>

CSS

Anda mungkin berpikir bahwa CSS mungkin besar tetapi tidak seperti itu. Anda tidak perlu menulis CSS halaman panjang tetapi hanya perlu menggunakan sedikit gaya.

Kami akan mengaturnya#bgslider overflow tersembunyi.

Selanjutnya, kami akan mengatur lebar 500% untuk gambar. Mengapa 500%? Karena kita punya lima gambar di slider jadi tiap gambar butuh lebar 100%

Posisi atribut HTML5 gambar slider kami akan relatif, dan di sini kami juga akan menambahkan animasi.

#bgslider { 	overflow: hidden; } #bgslider figure {   position: relative;   width: 500%;   margin: 0;   left: 0;   text-align: left;   font-size: 0;   animation: 30s slidy infinite; }

Kami mengatur setiap gambar menjadi 20% dari lebar karena kami memiliki lima gambar di slider sehingga masing-masing harus dibagi rata. Kami menggunakan tinggi VH agar sesuai dengan layar penuh di setiap jenis perangkat.

#bgslider figure img { 	width: 20%; 	float: left; 	height:100vh; }

Pada akhirnya, kami akan menggunakan @keyframes untuk menggeser penggeser gambar.

@keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } }

Inilah yang saya coba lakukan dengan tampilan slide latar belakang yang responsif. Anda dapat mencoba bermain dengannya dan melakukan kustomisasi sesuai keinginan.

Ada banyak Animasi CSS3 yang dapat digunakan untuk membuatnya meluncur dengan cara yang berbeda. Semoga Anda menyukai tutorial ini, silakan bagikan ini dengan teman-teman Anda di Facebook atau media sosial lainnya.