Postingan ini berawal dari sahabat yang kemarin bertanya pada saya lewat Facebook. Karna kebetulan saya paham, jadi disini saya akan coba jelaskan. Dengan saya posting di blog mudah-mudahan saja manfaatnya juga bisa dirasakan oleh sahabat lainnya.

Saya sebenarnya sempat bingung mau bikin tutorial ini dengan judul apa. Tapi kalau dari cara kerjanya sih memang lebih cocok dibilang Gambar Slide. Hampir mirip kayak gambar slide kebanyakan juga. Yang biasanya akan  memunculkan tiap satu gambar bergantian secara otomatis. Ada yang menggunakan animasi @keyframes. Ada juga yang memakai JavaScript ataupun JQuery.

Gambar Slide Berlanjut Manual Tanpa Script

Hari ini kita akan membuat yang agak berbeda dari biasanya. Kita akan membuat gambar slide yang akan muncul bergantian hanya ketika kita meng-klik-nya saja. Bertukarnya gambar gak secara otomatis. Dan hebatnya kita hanya akan menggunakan trik CSS sederhana saja. Tanpa bantuan script apapun.

Awalnya saya kepikiran ini akan menggunakan bentuk link dengan gambar. Seperti bentuk umum berikut:

<a href='http://info.chaidir.web.id/'>
<img src='http://info.chaidir.web.id/file/images/admin.jpg'/></a>

Sedangkan yang mau kita buat adalah gambar yang bertukar ketika di-klik. Misalkan ada 4 (empat) gambar. Pertama yang terlihat hanya gambar pertama. Saat gambar pertama di-klik maka akan berganti dengan gambar kedua. Saat di-klik lagi akan berganti dengan gambar ketiga. Kira-kira begitu lah prinsip kerja gambar slider ini.

Dan ternyata bentuk umum diatas gak begitu cocok untuk kita gunakan. Karna tag link disini biasa dipakai untuk membuka halaman tertentu. Bukan untuk mengganti gambar.

Supaya kalian bisa membayangkan aplikasi coding ini bentuknya seperti apa, baiknya lihat dulu halaman Gambar Slide yang sudah saya buat. 😀

Membuat Gambar Slide dengan Tag Input Radio

Trik rahasianya adalah kita akan menggunakan tag Input Radio. Tag jenis ini biasa digunakan untuk membuat semacam pilihan. Yang mana dari beberapa pilihan kita hanya boleh memilih salah satu saja. Dan ini sangat cocok untuk kasus Membuat Gambar Slide seperti yang kita inginkan.

Secara sederhana kita dapat menyusun struktur elemen body seperti berikut:

<div class='slide'>
  <input type='radio' name='radio-set' checked='checked' />
  <img src='./images/gambar1.jpg'/>

  <input type='radio' name='radio-set' />
  <img src='./images/gambar2.jpg'/>

  <input type='radio' name='radio-set' />
  <img src='./images/gambar3.jpg'/>

  <input type='radio' name='radio-set' />
  <img src='./images/gambar4.jpg'/>
</div>

Hampir mirip juga seperti bentuk yang pertama. Cuman lagi disini kita tidak memakai tag link. Sebagai gantinya kita pasang tag input sebelum tag gambar. Yang perlu kalian perhatikan untuk input yang pertama harus dipasang atribut checked=’checked’ untuk memenuhi prinsip dari tag radio ini. Yaitu kita harus memilih salah satu dari pilihan yang ada.

Mengatur Gambar Slide Hanya dengan CSS

Berikutnya kita tinggal mengatur tampilan gambar slide ini lewat bagian CSS. Tadinya saya mau jelaskan detail tentang trik CSS yang akan kita gunakan disini. Tapi saya pikir lebih bagus kalau nanti saya buatkan ditulisan lain saja. Biar kita lebih fokus belajarnya. Dan yang penting kalian bisa praktek sendiri. 😀

Teknik CSS yang kita gunakan untuk menyelesaikan gambar slide ini adalah:

  1. Pseudo-class bentuk :checked untuk membuat kondisi hanya satu gambar yang muncul.
  2. Pseudo-selector bentuk :nth-child untuk memunculkan tag input yang akan di-klik berikutnya.
  3. Selector Sibling Combinator untuk memanggil hanya tag gambar atau hanya tag input dalam satu elemen parent.
  4. Atribut layer bentuk z-index untuk membuat urutan tag input agar dimulai dari gambar pertama.
  5. Atribut visibility dan opacity untuk menyembunyikan tag input dan tag gambar yang tidak dipilih.

Sekarang kita tinggal menyusun bagian CSS seperti berikut:

<style type='text/css'>
.slide {
position:relative;
margin:0 auto;
width:1000px;
height:490px;
overflow:hidden
}

.slide input {
display:block;
position:absolute;
width:960px;
height:450px;
left:0;
top:0;
opacity:0;
cursor:pointer;
margin:0;
padding:0
}

.slide img {
visibility:hidden;
opacity:0;
height:450px;
position:absolute;
left:0;
top:0;
width:960px;
border:20px solid #ddd;
border-radius:20px;
transition:all .5s ease-out
}

.slide input:checked + img {
visibility:visible;
opacity:1
}

.slide input:checked { display:none }

.slide input:nth-child(1) { z-index:13 }
.slide input:nth-child(3) { z-index:12 }
.slide input:nth-child(5) { z-index:11 }
.slide input:nth-child(7) { z-index:10 }

.slide input:nth-child(1):checked ~ input:nth-child(3),
.slide input:nth-child(3):checked ~ input:nth-child(5),
.slide input:nth-child(5):checked ~ input:nth-child(7) { z-index:15 }
</style>

Oke, selesai. Kalian tinggal letakkan bagian CSS tersebut di antara tag head. Kalau mau tambahkan tag title biar ada judul di bagian title bar browser. Terakhir kalian bisa simpan coding ini dalam format HTML. Lihat hasilnya menggunakan browser kesayangan kalian masing-masing. 🙂

Untuk kalian yang malas ngetik atau mau terima hasil udah jadinya bisa download dari tombol yang ada di awal tulisan ini.

Kode-kode HTML dan CSS yang saya berikan hanya berupa bentuk dasarnya saja. Untuk membuat tampilan gambar slide-nya agar lebih menarik, kalian bisa kreasikan sendiri. Sesuai dengan kreatifitas masing-masing. Tinggal otak-atik sedikit saja. Bisa kan?

Berikut ini cuplikan gambar slide yang berhasil saya buat:

membuat-gambar-slide-berlanjut-manual-dengan-klik

Kalau ada pertanyaan atau masukan silahkan tinggalkan lewat kotak komentar dibawah tulisan ini yaa. Nanti biar kita diskusikan sama-sama. Semoga tutorial sederhana ini bisa bermanfaat.

Salam Semangat,
[email protected]