Galeri Gambar Layar Penuh Responsif CSS3 Murni

sukma
sukma
5 minute read

Hari ini kita datang dengan tutorial lain yang disebut galeri gambar layar penuh responsif CSS3 murni. Galeri ini dibuat menggunakan teknik CSS3 terbaru tanpa menggunakan JavaScript atau jQuery tetapi memiliki semua fitur seperti galeri JavaScript lainnya.

Ini memiliki fungsi dan fitur yang luar biasa. Ini termasuk tombol putar otomatis, Putar / Jeda, dan banyak lagi.

Selain itu, galeri yang sepenuhnya responsif dan berfungsi di semua jenis perangkat seperti iPad, iPhone, dan laptop. Kami menyertakan beberapa fungsionalitas hebat di galeri ini dengan menggunakan animasi CSS3.

Satu-satunya masalah dengan galeri ini, Ini tidak mendukung gambar mini tetapi Anda dapat melihat tutorial kami berikutnya tentang membuat galeri gambar CSS murni dengan gambar mini yang juga dibangun dengan CSS saja.

Fitur yang disertakan dalam galeri ini biasanya dimungkinkan dengan jQuery tetapi sekarang Anda tidak perlu menerapkan kode jQuery atau JavaScript untuk mendapatkan fungsi lanjutan semacam itu.

Izinkan saya menjelaskan kepada Anda fungsi apa saja yang disertakan dalam galeri ini.

Beberapa Fitur Galeri Gambar Layar Penuh Responsif CSS3

  • Galeri latar belakang layar penuh ini harus menyertakan panah navigasi kiri / kanan yang memungkinkan perpindahan ke slide berikutnya atau sebelumnya.
  • Ini juga mencakup fungsi putar otomatis dengan, Putar, Jeda, dan tombol berhenti. Saat tombol Putar diklik, galeri secara otomatis memulai dan memindahkan setiap slide setelah jangka waktu yang ditentukan. Anda bisa menghentikannya dan bisa menggesernya secara manual dengan menggunakan tombol berikutnya / sebelumnya.
  • Ini memindahkan gambar seperti slider gambar sehingga Anda dapat menggunakannya sebagai slider dengan penyesuaian dalam kode CSS.
  • Ini juga termasuk bilah pengatur waktu yang dimulai saat galeri di putar otomatis.
  • Kami juga menambahkan navigasi titik buletin yang dapat diklik dan mengubah gambar saat pengguna mengkliknya.

Markup untuk Galeri

Untuk membangun galeri ini, Pertama-tama, kita akan mengimplementasikan sistem navigasi dengan menggunakan radio button tipe Input. Blok tombol pertama digunakan untuk memilih setiap slide dan blok tombol lainnya menangani fungsi putar, hentikan, dan jeda.

  <!-- 	INPUT FOR BUTTON SELECT SLIDE --> <input type="radio" name="next" id="slide1" checked> <input type="radio" name="next" id="slide2"> <input type="radio" name="next" id="slide3"> <input type="radio" name="next" id="slide4"> <!-- 	INPUT FOR BUTTON STOP&PLAY --> <input type="radio" name="sto" id="play"> <input type="radio" name="sto" id="stop" checked> <input type="radio" name="sto" id="pause">

Selanjutnya, kita perlu mengimplementasikan fungsi panah kiri dan kanan. Setiap slide membutuhkan dua label, satu untuk kiri dan satu lagi untuk slide kanan.

    <label for="slide4" class="int manage_one left"></label>     <label for="slide2" class="int manage_one right"></label>     <label for="slide1" class="int manage_two left"></label>     <label for="slide3" class="int manage_two right"></label>     <label for="slide2" class="int manage_tre left"></label>     <label for="slide4" class="int manage_tre right"></label>     <label for="slide3" class="int manage_for left"></label>     <label for="slide1" class="int manage_for right"></label>

Sekarang kita perlu menambahkan gambar. Anda perlu menentukan nama kelas DIV image. Semua gambar didefinisikan sebagai pengganti div itu. Lihat kode HTML di bawah ini:

<!-- IMAGE --> <div class="image">     <img src="https://codeconvey.com/css3-fullscreen-image-gallery/images/1.jpg" class="oneP" 	alt="Flash">     <img src="images/2.jpg" class="twoP" 	alt="Superman">     <img src="images/3.jpg" class="threeP"  alt="Team">     <img src="https://codeconvey.com/css3-fullscreen-image-gallery/images/1.jpg" class="fourP" 	alt="Joker"> </div>

Pada akhirnya, kita perlu mengatur bilah pengatur waktu dan titik buletin bawah yang dapat dilakukan sebagai berikut.

<!-- ANIMATION LINE --> <div class="aline">   <div class="line"></div>   <div class="bord"><span></span></div>   <div class="bord"><span></span></div>   <div class="bord"><span></span></div>   <div class="bord"><span></span></div> </div> <!-- BOTTOM LINE --> <div class="but">   <label for="slide1" class="select_but select1" onclick="">   <div></div>   </label>   <label for="slide2" class="select_but select2" onclick="">   <div></div>   </label>   <label for="slide3" class="select_but select3" onclick="">   <div></div>   </label>   <label for="slide4" class="select_but select4" onclick="">   <div></div>   </label> </div>

Pertama, kita berbicara tentang penataan sebuah gambar. Karena kami memiliki empat gambar di galeri kami, jadi kami harus membagi 4/100 = 25%

Itu artinya, kita perlu mengatur setiap lebar gambar% 25. Seperti yang Anda lihat di bagian HTML di atas, kami telah menyertakan semua gambar di DIV yang memiliki nama kelas .image Jadi di sini kita juga perlu mengatur lebar menjadi 400% untuk DIV yang nama kelasnya image

img{ 	width: 25%; 	-webkit-background-size: contain; 	-moz-background-size: contain; 	background-size: contain; 	display: inline-block; 	float: left; 	margin: 0; 	padding: 0; } .image{ 	display: block; 	width: 400%; 	height: 100%; 	position:fixed; }

Untuk menangani fungsi play dan stop, Kita perlu menambahkan CSS berikut.

/*BUTTON PLAY&STOP*/ .menu{ 	position: absolute; 	width: 94px; 	height: 30px; 	margin: 20px 0px 0px 30px; 	z-index: 1; } .tooltip{ 	width: 80px; 	height: 40px; 	margin-top: -34px; 	margin-left: -94px; 	display: inline-block;     float: left;     border-radius: 2px;     background: #fff;     z-index: -10;     opacity: .8;     -webkit-animation: tool ease-in 6s;     -webkit-animation-fill-mode: forwards;     animation: tool ease-in 6s;     animation-fill-mode: forwards; }

Itu tidak cukup untuk dilakukan dan kami masih perlu menambahkan lebih banyak CSS untuk menangani fungsi dan desain galeri. Tidak mungkin bagi saya untuk menjelaskan setiap fungsi di sini karena beberapa di antaranya agak rumit.

Tapi jangan khawatir, Anda dapat menemukan semua gaya di demo dan mengunduh file. Anda dapat mengunduh file dan membuat penyesuaian sesuai keinginan.

Jika Anda memiliki masalah, dengan senang hati saya akan membantu Anda. Anda dapat meninggalkan komentar dan memberi tahu saya jika Anda mengalami masalah saat implementasi. Beri tahu saya pendapat Anda tentangnya dan bagaimana hal itu membuat hidup Anda mudah.