Slider Gambar CSS Murni dengan Thumbnail
Anda pasti mencoba banyak slider thumbnail JavaScript, bukan? Tapi itu membebani situs Anda dan Anda ingin membuat versi slider ringan yang sangat mungkin hanya dengan CSS. Dalam tutorial ini, kami akan mendemonstrasikan slider gambar responsif CSS murni dengan thumbnail. Selain itu, carousel ini hadir dengan dukungan lintas browser.
Kami menggunakan teknik yang sama seperti yang kami lakukan untuk membuat Slideshow CSS Autoplay tetapi dikodekan dengan cara yang berbeda untuk mencapai ini. Slider ini memiliki fitur mengesankan termasuk Next / Pre dan thumbnail yang dapat diklik.
Ini responsif dan berfungsi dengan baik di semua jenis browser dan perangkat. Ini adalah slider cantik yang hadir dengan desain yang bagus dan bersih. Anda dapat dengan mudah menyesuaikannya sesuai desain situs Anda.
Selanjutnya, Anda dapat dengan mudah mengubahnya menjadi penggeser gambar latar belakang CSS hanya dengan menghapus kelas kontainer. Penggesernya yang sederhana dan mudah untuk semua jenis situs.
Mengapa carousel hanya CSS perlu diperhatikan? Jawabannya sederhana, ringan dan mudah disesuaikan. Ini mengurangi waktu buka halaman dan tetap menjaga Anda dari kesalahan atau konflik JS.
Anda dapat dengan cepat menerapkan dan memainkannya sesuai keinginan. Ini memungkinkan untuk mengubah beberapa gambar dengan cepat dan memungkinkan untuk menambahkan lebih banyak atau lebih sedikit gambar.
Slider ini sama seperti slider JavaScript atau jQuery dan bekerja dengan cara yang sama. Anda dapat menambahkan animasi Anda dengan cepat jika Anda mengetahui perintah advance dari CSS3. BAIK! mari kita lihat cara kerjanya.
Cara Membuat Penggeser Gambar dengan Gambar Mini
Jika kita melihat HTML, kita akan menemukan itu lugas dan mudah dimengerti. Semua kode HTML slider berada di dalam sebuah main div dengan nama kelas "csslider".
Anda juga mencatat bahwa itu juga memiliki kelas tak terhingga dan ID "slider1" yang akan menangani dengan CSS nanti.
<div class="csslider infinity" id="slider1"> ...... </div>
Selanjutnya, kita perlu mendefinisikan tombol radio, seperti yang dilakukan oleh banyak slider Javascript lainnya. Setiap tombol radio memiliki ID yang unik juga hal yang penting untuk diperhatikan adalah checked="checked"elemen digunakan untuk slider pertama untuk mengaturnya sebagai slide default.
<input type="radio" name="slides" checked="checked" id="slides_1"/> <input type="radio" name="slides" id="slides_2"/> <input type="radio" name="slides" id="slides_3"/> <input type="radio" name="slides" id="slides_4"/>
Sekarang Anda perlu menentukan daftar tidak berurutan dan menempatkan gambar Anda di dalamnya. CSS mendukung total enam gambar, jadi jika Anda perlu menambahkan lebih banyak, Anda perlu mengubah CSS.
<ul> <li><img src="https://cdn.pixabay.com/photo/2016/12/13/22/25/kingfisher-1905255_960_720.jpg"/></li> <li><img src="https://cdn.pixabay.com/photo/2016/11/26/23/45/dog-1861839_960_720.jpg"/></li> <li><img src="https://cdn.pixabay.com/photo/2016/12/14/12/09/violin-1906127_960_720.jpg"/></li> <li><img src="https://cdn.pixabay.com/photo/2016/11/29/20/22/child-1871104_960_720.jpg"/></li> </ul>
Last but not least, kita perlu mendefinisikan panah dengan menambahkan elemen label. Kami akan menetapkan enam label, tetapi Anda mungkin berpikir mengapa enam? Ya, kami memiliki empat gambar, tetapi kami juga perlu mengatur label untuk pergi ke pertama dan pergi ke slider terakhir.
<div class="arrows"> <label for="slides_1"></label> <label for="slides_2"></label> <label for="slides_3"></label> <label for="slides_4"></label> <label class="goto-first" for="slides_1"></label> <label class="goto-last" for="slides_4"></label> </div>
Pada akhirnya, kita perlu menambahkan thumbnail, kita akan melakukannya dengan menggunakan Elemen label HTML dengan ID unik. Nama ID harus serupa dengan nama ID tombol radio yang kami definisikan di atas.
Kami akan menempatkan thumbnail di dalam tag label untuk membuatnya berfungsi sebagai slider gambar CSS murni.
<div class="navigation"> <div> <label for="slides_1"><img width="75" height="75" src="https://cdn.pixabay.com/photo/2016/12/13/22/25/kingfisher-1905255_960_720.jpg"/></label> <label for="slides_2"><img width="75" height="75" src="https://cdn.pixabay.com/photo/2016/11/26/23/45/dog-1861839_960_720.jpg"/></label> <label for="slides_3"><img width="75" height="75" src="https://cdn.pixabay.com/photo/2016/12/14/12/09/violin-1906127_960_720.jpg"/></label> <label for="slides_4"><img width="75" height="75" src="https://cdn.pixabay.com/photo/2016/11/29/20/22/child-1871104_960_720.jpg"/></label> </div> </div>
Kita sudah selesai sekarang dengan slider dan mari kita lihat CSS dan lihat demo di atas dan unduh kode sumber.
Semoga Anda menyukainya dan bermanfaat. Tinggalkan komentar dan bagikan dengan teman-teman Anda.
