CSS dan Korsel Ant Javascript

Dengan munculnya CSS3, dimungkinkan untuk membuat animasi tanpa menggunakan perpustakaan JS, seperti, misalnya, jQuery. Properti transisi CSS3 memungkinkan Anda mengubah properti elemen dengan mulus (lebar, tinggi, margin, opacity, dll.), Mengatur waktu dan hukum transformasi sebagai parameter. Saya menawarkan korsel kecil, tetapi cukup fungsional dalam Javascript murni. Kecil seperti semut, yang jauh lebih kecil dari burung hantu . Tetapi dengan kemampuan yang hampir sama.

Semut-korsel memungkinkan Anda untuk:

• perlihatkan satu atau lebih elemen;
• elemen dapat ditampilkan dalam bentuk pita terbatas atau tak terbatas (dalam satu lingkaran);
• gulir otomatis item;
• navigasi dilakukan oleh panah, titik indikator atau membalikkan (untuk layar sentuh);
• secara otomatis menyesuaikan ke lebar layar.

Kami menempatkan korsel kami di file index.html (lihat contoh file di bawah ini):


Elemen <ul> <li> digunakan di sini, tetapi <div> <div> dapat digunakan sebagai gantinya, jika Anda mau. 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 atau generasi gambar Anda dengan elemen pseudo : before dan : after .

Buat korsel dengan tiga elemen yang terlihat dan lebar elemen 270 piksel. Maka lebar korsel maksimum adalah 810 piksel. Kami menyertakan file CSS:


Kami menempatkan elemen dalam wadah daftar semut-korsel , mengatur tampilan: properti flex untuknya dan tekan semua elemen ke tepi kiri konten justify: flex-start . Properti flex: 0 0 otomatis mengeset flex-shrink ke 0 (standarnya adalah 1). Pengguliran elemen korsel dilakukan dengan menggunakan properti transiton dengan dengan lancar mengubah indentasi margin-kiri dari nol ke lebar elemen (dalam satu arah) atau dari lebar elemen ke nol (ke arah lain). Untuk fungsi transformasi (gulir), nilai kemudahan digunakan .

Kami lolos ke program. Dalam opsi program, Anda dapat mengonfigurasi:

• jumlah elemen yang terlihat;
• melihat elemen-elemen dalam bentuk pita dari yang pertama ke yang terakhir atau dalam loop yang tidak terbatas (pita itu menutup cincin);
• menggulir elemen secara otomatis atau manual;
• Interval gulir otomatis;
• kecepatan animasi;
• aktifkan / nonaktifkan elemen navigasi: panah, titik indikator, membalik dengan sentuhan (untuk layar sentuhan).

Inisialisasi program dimulai dengan fakta bahwa jumlah elemen korsel ditentukan, nilai awal ditugaskan ke variabel internal, event handler ditugaskan ke panah dan titik (jika terhubung). Jika opsi pengguliran otomatis diaktifkan, penangan tambahan ditugaskan untuk menghentikan pengguliran saat Anda mengarahkan mouse ke elemen korsel. Pengguliran sentuh dipicu jika ada lebih dari 20 piksel antara titik di mana jari menyentuh layar dan titik jari terkoyak dari layar dan total waktu jari menyentuh layar kurang dari 80 ms. Penulis belum memiliki banyak pengalaman dengan korsel ini, oleh karena itu, nilai-nilai yang diberikan mungkin perlu diklarifikasi. Untuk operasi penangan gulir yang lebih andal, jarak antara titik-titik dapat dikurangi menjadi 10 atau 15 piksel, dan waktu sentuh harus ditingkatkan menjadi 100 atau 120 ms. Pengguna carousel ini dapat memperbaiki sendiri nilai-nilai ini setelah memperoleh pengalaman dalam penggunaannya.

Algoritma gulir untuk elemen berbeda tergantung pada apakah opsi loop diaktifkan atau tidak. Jika diaktifkan, ketika menggulir ke kanan (fungsi elemPrev ), properti margin-kiri dari seluruh baris elemen.crslList ini berkurang dari nol ke nilai negatif sama dengan lebar elemen elemWidth . Pada saat yang sama, elemen terakhir di sebelah kanan diklon dan dimasukkan sebelum elemen pertama, setelah itu elemen terakhir dihapus. Baris ini diberikan properti 'transisi: margin' + options.speed + 'ms convenience' , di mana options.speed adalah kecepatan animasi, kemudahan adalah fungsi animasi. Sekarang Anda dapat menggulir. Properti margin-kiri berubah dengan lancar dari nilai negatif ke nol, seluruh penggaris dengan lancar bergeser ke kanan, dan item terakhir didahulukan. Setelah options.speed microseconds, baris diberi nilai sebelumnya 'transisi: tidak ada' .

 var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed); 

Jika Anda perlu menggulir n elemen sekaligus, permutasi elemen dilakukan dalam satu loop n kali, dan jarak margin-kiri meningkat n kali.

Menggulir ke kiri (fungsi elemNext ) terjadi dalam urutan terbalik. Pertama, properti 'transisi: margin' + options.speed + 'ms memudahkan' ditugaskan ke baris this.crslList dan penggaris dengan lancar menggulir ke kiri ( crslList.style.marginLeft = '-' + elemWidth + 'px' ). Selanjutnya, setelah options.spececececondececonds , elemen pertama dikloning dan dimasukkan di akhir penggaris, setelah itu elemen pertama dihapus. Penguasa mengembalikan nilai 'transisi: tidak ada'. Jika Anda perlu menggulir n elemen sekaligus, penataan ulang elemen, seperti pada kasus sebelumnya, dilakukan n kali dalam satu lingkaran dan jarak margin-kiri meningkat n kali.

 var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed); 

Jika opsi siklus dinonaktifkan, maka dalam hal ini tidak ada permutasi elemen, dan seluruh garis elemen digeser secara keseluruhan ke kiri atau kanan ke titik ekstremnya. Garis elemen properti 'transisi: margin' ini: margin '+ options.speed +' ms easy ' diberikan bahkan ketika korsel diinisialisasi dan tidak lagi dihapus.

Korsel disebut dengan nama kelas semut-korsel atau dengan pengidentifikasi. Dalam kasus kedua, Anda dapat menempatkan beberapa komidi putar di satu halaman. File carousel index.html 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>Ant-Carousel</title> <!--   --> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="ant-files/ant-carousel. js"></script> <!--   --> <script>new Ant()</script> </body> </html> 

Untuk menempatkan beberapa komidi putar di satu halaman, Anda harus memanggilnya dengan ID. Korsel yang berbeda mungkin memiliki jumlah elemen yang berbeda pula.

 <div class="ant-carousel" id=”first”> <!--   --> … <div class="ant-carousel" id=”second”> <!--   --> … <script>new Ant("first"); new Ant("second");</script> 

Semua gambar diambil dari sumber terbuka.

Terima kasih atas perhatian anda!