Setelah mendapatkan banyak umpan balik, hari ini saya memiliki rencana untuk berbagi dengan Anda pemutaran otomatis tayangan slide CSS murni tanpa JavaScript. Muncul dengan dukungan navigasi titik. Selain itu, ini juga mendukung teks judul dan deskripsi pada setiap gambar slider. Anda dapat dengan mudah menyesuaikan teks tajuk dengan mengedit CSS
Fungsi hebat lainnya dari penggeser ini, ini mendukung fungsi putar otomatis. Itu artinya memungkinkan Anda untuk mengatur apakah penggeser menggeser gambar secara otomatis atau tidak
Setiap penggeser gambar khusus CSS memiliki cara pembuatan dan fungsionalitasnya sendiri. Slider ini tidak mendukung fungsi thumbnail tetapi Anda dapat melihat slider gambar thumbnail CSS kami yang juga dibuat dengan CSS
Tapi Ini adalah carousel yang sepenuhnya responsif dan mendukung berbagai browser termasuk IE. Ini memiliki beberapa opsi animasi untuk memungkinkan menggeser slider dengan cara yang berbeda
Anda dapat dengan mudah memilih versi yang Anda suka. Anda hanya perlu memanggil file CSS terpisah, dan file HTML-nya sama kecuali versi ringannya. Versi yang lebih ringan tidak memiliki legenda atau peluru
Penggeser ini dibuat oleh Elitewares dan dia telah melakukan pekerjaan dengan baik. Itu membuat penggeser tanpa menyentuh javascript dan menyediakan semua kemungkinan fungsi yang memiliki penggeser jquery sederhana
Slider mencakup efek kiri ke kanan, kanan ke kiri, atas ke bawah dan bawah ke atas. Itu juga memungkinkan menambahkan teks overlay dengan animasi
Hal penting dan signifikan tentang slider ini adalah autoplay dengan peluru. Artinya, ketika slide mengubah gambar, itu akan menggantikan poin status secara otomatis
Struktur HTML untuk Tampilan Slide Otomatis
Saya tidak akan menjelaskan kepada Anda seluruh proses tetapi beberapa hal yang diperlukan. Anda akan mendapatkan kode sumber lengkap dan demo di bawah ini. Ok sekarang mari kita lihat HTML
Sebelum saya melanjutkan, saya ingin menyebutkan bahwa HTML agak rumit dibandingkan dengan slider lainnya. Perlu menambahkan beberapa div tambahan, tetapi ini mungkin karena fungsinya yang luar biasa
Slider HTML dimulai dengan ID utama slider
dan selanjutnya, ia memiliki nama kelas div anak slides
yang menampung setiap slide
........
Titik-titik sakelar ditempatkan tepat di bawah div anak slides
dan ditentukan dengan daftar yang tidak diurutkan. Setiap LI mewakili titik
Selanjutnya, setiap id slider didefinisikan dengan nama kelas slider
dan kita perlu menempatkan tepat di bawah,slides
Seperti contoh di bawah ini
_Lorem ipsum dolor
Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.
Sekarang Anda dapat melihat div slider
memiliki beberapa div turunan dan konten HTML, dll. Anda juga dapat melihat nama kelas div
2 yang menyimpan gambar. Begitulah cara Anda menempatkan konten, HTML, tautan, atau apa pun yang ingin Anda tambahkanLorem ipsum dolor
Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.
CSS untuk Tayangan Slide Putar Otomatis
ID penggeser berfungsi dengan mengatur lebar dan tinggi. Itu juga membutuhkan posisi relatif dan luapan tersembunyi
#slider{ width:100%; height:500px; position:relative; overflow:hidden; }
Mirip, kelas slide membutuhkan lebar dan tinggi dengan posisi relatif. Itu juga perlu menambahkan animasi slide yang akan dibuat menggunakan properti @keyframe CSS
.slides{ width:400%; height:100%; position:relative; -webkit-animation:slide 30s infinite; -moz-animation:slide 30s infinite; animation:slide 30s infinite; }_
Setiap rumus slide digunakan mirip dengan banyak slider berbasis CSS lainnya, dan membagi lebar dari slider angka. Seperti jika mereka memiliki total empat slider maka rumusnya akan terlihat seperti 100%/4 = 25%
.slider{ width:25%; height:100%; float:left; position:relative; z-index:1; overflow:hidden; }
Untuk membuatnya responsif, perlu mengatur lebar dan tinggi menjadi 100% untuk gambar slider dan div gambar. Baris CSS murni berikut menampilkan item tayangan slide yang responsif dengan fitur putar otomatis tanpa JavaScript apa pun
.slide img{ width:100%; height:100%; } .image{ width:100%; height:100%; } .image img{ width:100%; height:100%; }_
Ini awalnya CSS membutuhkan slider untuk membuatnya berfungsi tetapi agar terlihat sempurna dan berfungsi dengan fungsinya, lihat saja demo di atas