Slider Konten CSS Murni tanpa Javascript
Hari ini, saya akan membuat slider konten CSS murni tanpa JavaScript. Sekarang, Anda tidak perlu mengatur banyak skrip JS atau konten slider. Saya akan menjelaskan setiap langkah yang diperlukan untuk membuatnya bekerja.
Anda tidak perlu memberikan fallback atau skrip lain untuk menangani fungsinya. Itu dibangun dengan teknik CSS3 sederhana.
Menambahkan banyak konten pada halaman agar pengguna dapat menggulir dan menggulir bukanlah ide yang baik. Daripada melakukan ini, lebih baik mengatur teks dengan cara yang lebih baik.
Salah satu cara menyusun foto atau konten adalah dengan menggunakan tampilan slide putar otomatis atau penggeser konten.
Saya tidak akan menggunakan JavaScript atau jQuery Perpustakaan. Hanya HTML Dasar dan kemudian CSS3 akan melakukan pekerjaan itu. Ini adalah penggeser konten khusus CSS yang tidak memerlukan skrip apa pun.
Ini sederhana, bersih dan slider ringan yang memungkinkan Anda dengan mudah menyesuaikan dengan mengedit HTML atau CSS. Penggesernya responsif dan berfungsi dengan baik di semua jenis perangkat. Ini adalah penggeser yang ramah seluler dan mendukung hampir semua browser.
Ini ditulis dengan baik kode slider teks CSS murni sederhana, dan itu kode minimal satu. Kami telah melihat banyak slider di sana yang dibuat hanya dengan CSS tetapi bagaimana dengan kode minimum?
Juga bagaimana dengan kemudahan untuk mengedit slide dan menambahkan lebih banyak atau lebih sedikit slide. Itulah hal penting yang harus diperhatikan dalam tayangan slide ini.
Penggeser Konten CSS Murni tanpa JavaScript
Pertama-tama kita perlu mendefinisikan pembungkus utama dan kita memiliki ID slides adalah pembungkus utama kami. Ini akan menampung sisa HTML.
Selanjutnya, kami menentukan tombol radio yang menangani fungsi slider kiri atau kanan. Kami memiliki empat slide jadi di sini kami akan mengatur empat tombol radio dengan masing-masing ID unik.
Markup
<div id="slides"> <input checked type="radio" name="slider" id="slide1" class="set" /> <input type="radio" name="slider" id="slide2" class="set" /> <input type="radio" name="slider" id="slide3" class="set" /> <input type="radio" name="slider" id="slide4" class="set" /> </div>
Tepat di bawah tombol radio, kami mendefinisikan topeng kelas dan div batin dengan overflow kelas. Keduanya nantinya akan membantu satu menangani dengan CSS.
Sekarang kita hanya menambahkan empat slider dan yang kita lakukan perlu menambahkan empat div dengan setiap slide nama kelas. Di dalam div ini, kami akan menempatkan teks biasa kami.
<div class="mask"> <div class="overflow"> <div class="slide">Slide One</div> <div class="slide">Slide Two</div> <div class="slide">Slide Three</div> <div class="slide">Slide Four</div> </div> </div>
Tepat di bawah topeng nama kelas div, kami akan menambahkan kontrol. Pengontrol ini memungkinkan kita untuk mengubah slide saat diklik. Div pengontrol memiliki empat label. Label ini ditangani dengan tombol radio yang kami tentukan di atas.
<div id="controls" onclick=""> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> </div>
Lihat demo dan temukan kode sumber lengkapnya. Kami baru saja menggunakan kembali slider csscience.com untuk membuatnya kembali dan menjadikannya dukungan slider konten alih-alih gambar.
Sebelum menerapkan di situs langsung atau produksi Anda, Anda perlu memastikan dukungan browser. Ini mendukung berbagai browser tetapi tidak berhasil dalam transisi di IE9. Itu juga tidak mendukung ~ selector di iOS5.
Harap Anda menyukai tayangan slide teks ini, lalu jangan menunggu untuk berbagi dengan teman dan orang lain. Juga tinggalkan umpan balik, apa pendapat Anda tentang itu.
