Penulis telah menerbitkan skrip
carousel , yang juga hanya menggunakan CSS dan Javascript. Sekarang mari kita lihat script slider. Ini berbeda dari korsel di mana hanya satu elemen yang terlihat pada satu waktu, dan tidak beberapa, dan elemen tidak menggulir, tetapi perlahan-lahan diganti satu sama lain. Dan lagi. Dalam slider ini, hanya gambar (slide) yang digunakan sebagai elemen, oleh karena itu disebut slider gambar sederhana.
Navigasi dilakukan oleh panah "Elemen berikutnya" atau "Elemen sebelumnya" dan titik-titik indikator. Panah dan titik dapat dinonaktifkan di pengaturan skrip. Elemen dapat ditampilkan dengan berhenti di elemen pertama dan terakhir atau dalam siklus ketika elemen terakhir lagi diikuti oleh yang pertama. Anda dapat mengaktifkan tampilan otomatis (gulir) elemen, durasi tampilan (interval antara perpindahan) dapat disesuaikan. Saat Anda mengarahkan mouse ke suatu item, gulir berhenti.
Slider secara otomatis menyesuaikan dengan lebar layar perangkat apa pun. Anda dapat memverifikasi ini dengan menggerakkan kiri atau kanan salah satu sisi browser.
HTML - kode slider adalah standar, dengan pengecualian satu: layar ditempatkan di depan gambar, yang merupakan gambar putih polos. Semua gambar dan layar harus berukuran sama. Jumlah gambar berubah-ubah.
<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>
Tag <ul> <li> digunakan sebagai wadah, tetapi Anda dapat menggunakan <div> <div> atau <div> <p>. Panah dan titik indikator diposisikan secara absolut dalam wadah masing-masing. Untuk panah, pola dalam bentuk kurung segitiga digunakan, yang, jika diinginkan, Anda dapat menggantinya dengan pola Anda sendiri. Poin dihasilkan oleh program, jumlah poin sama dengan jumlah gambar.
Semua gambar ditumpuk, satu di atas yang lain, dengan posisi absolut di sudut kiri atas wadah tertutup. Layar mencegah runtuhnya wadah luar. Semua gambar diberikan opacity properti CSS: 0, kecuali untuk elemen pertama yang program inisialisasi menetapkan opacity: 1, sehingga membuatnya terlihat.
Elemen bergulir dilakukan dengan mengubah opacity dari 1 menjadi 0 untuk elemen terlihat dan dari 0 ke 1 untuk elemen tak terlihat berikutnya. Dengan demikian, elemen yang terlihat menjadi tidak terlihat, dan yang tidak terlihat terlihat. Kelancaran transisi menciptakan properti transisi dengan durasi 1s dan fungsi transisi yang mudah.
CSS img { width: 100%; !important; } .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
Agar slider dapat beradaptasi dengan lebar layar apa pun, untuk gambar Anda perlu menentukan lebar properti CSS: 100%. Untuk semua kontainer blok (div, ul, li, dll.) Juga lebar: 100% atau, jika Anda membutuhkan lebar dalam satuan numerik, maka hanya lebar maksimum atau minimum min.
Gaya, seperti biasa, dimasukkan dalam tajuk. Script dapat dihubungkan di acara onload atau di akhir markup HTML. File skrip slider mungkin terlihat seperti ini:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> … </div> … <footer> … </footer> <script src="sim-slider.js"></script> <script>new Sim()</script> </body> </html>
Slider disebut dengan nama kelas sim-slider atau dengan identifier. Dalam kasus kedua, Anda dapat menempatkan beberapa slider di satu halaman.
<div class="sim-slider" id="first"> … <div class="sim-slider" id="second"> … <script>new Sim("first"); new Sim("second");</script>
Javascript function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') };
Semua gambar diambil dari sumber terbuka.Terima kasih atas perhatian anda!