Ramai orang di tapak mereka sendiri ingin melihat peluncur - ini adalah blok yang memaparkan satu elemen kandungan pada skrin dan selepas tempoh masa tertentu menukar kandungan ini kepada yang lain. Sememangnya, setiap pembangun web dapat membuat peluncur secara bebas menggunakan HTML, CSS dan JavaScript, tetapi ini tidak selalu masuk akal. Anda akan menghabiskan banyak masa, walaupun terdapat beberapa penyelesaian siap sedia di Internet yang menjadikan hidup anda lebih mudah dan menjadikan laman web anda lebih menarik. Artikel ini akan menumpukan pada salah satu daripada penyelesaian ini yang dipanggil Owl Carousel. Menyediakan peluncur ini adalah sangat mudah, jadi seorang pemula pun boleh mengendalikannya. Sekarang anda akan mengetahui apakah peluncur ini, serta butiran penting lain. Menyediakan Karusel Burung Hantu ialah proses langkah demi langkah, jadi anda harus mempelajari bahan ini mengikut urutan sahaja.
Apakah itu dan mengapa anda perlu memilih peluncur khusus ini?
Owl Carousel, konfigurasi yang akan dibincangkan dalam artikel ini, ialah pemalam yang sangat berkesan yang menambahkan peluncur yang cantik dan mudah pada halaman anda, yang akan memudahkan kerja anda di tapak,menjimatkan banyak masa, usaha dan wang. Apakah kelebihan pemalam khusus ini, kerana terdapat banyak peluncur di Web? Hakikatnya ialah peluncur ini menawarkan anda berpuluh-puluh pilihan penyesuaian, yang akan membolehkan anda menjadikan halaman anda unik dan tidak dapat ditiru. Ia adalah pemalam responsif yang akan berfungsi pada semua versi penyemak imbas dan boleh disambungkan dengan mudah ke WordPress dan CMS popular yang lain. Secara umum, peluncur ini mempunyai banyak kelebihan, jadi anda pasti harus membuat pilihan yang memihak kepadanya. Walau bagaimanapun, sebelum anda mula menyediakan Owl Carousel, pemalam ini masih perlu dimuatkan.
Muat turun
Menyediakan Owl Carousel 2 tidak boleh dilakukan jika anda belum memuat turunnya ke komputer anda, dan memandangkan ini adalah arahan langkah demi langkah, anda harus bermula dari awal lagi. Jadi, program ini boleh dimuat turun menggunakan pengurus pakej, tetapi ini adalah alat pembangun lanjutan, jadi di sini kami akan memberitahu anda cara mendapatkan pemalam ini dengan cara standard. Anda perlu pergi ke tapak web rasmi pemalam dan memuat turun versi terkininya. Selepas itu, semua fail yang dimuat turun mesti dipindahkan ke direktori tapak anda, setelah menyediakan folder yang mudah, yang dinamakan sama dengan pemalam itu sendiri. Ambil perhatian bahawa pemalam ini disertakan dengan jQuery, jadi anda perlu menyediakan perpustakaan itu juga. Sebaik sahaja anda memuat turun pemalam ini, anda perlu mengambil langkah seterusnya iaitu menyediakan peluncur Owl Carousel 2.
CSS
BTetapan Owl Carousel 1.3 kekal hampir sama seperti dalam versi 2 yang lebih baharu, hanya ciri baharu ditambah. Walau bagaimanapun, maklumat asas adalah sama, bermula dengan menambahkan CSS pada dokumen anda. Jadi langkah pertama ialah menambah baris. Apa yang dia berikan kepada anda? Ini ialah rentetan yang memuatkan gaya yang diperlukan ke tapak untuk memaparkan peluncur. Di sinilah anda boleh menyelesaikan dengan melakukan pemprosesan visual sendiri. Walau bagaimanapun, terdapat penyelesaian yang lebih mudah dan lebih cepat. Anda juga boleh menambah baris yang turut memuatkan tema lalai peluncur, menjadikannya sedia untuk digunakan serta-merta. Anda boleh mengedit beberapa gaya untuk menjadikan peluncur anda lebih unik dan berbeza serta lebih sesuai untuk kandungan anda. Sememangnya, tetapan Owl Carousel dalam bahasa Rusia adalah sangat mudah, tetapi setiap orang yang mencipta tapak web harus memahami bahawa dia tidak boleh melakukannya tanpa pengetahuan bahasa Inggeris.
Sambungan JavaSpript
Sudah tentu, peluncur tidak akan berfungsi tanpa JS, jadi anda juga harus berhati-hati untuk memasukkan fail yang sesuai yang mengandungi kod yang diperlukan. Untuk melakukan ini, anda perlu memasukkan baris kod dari dokumentasi, bagaimanapun, satu syarat mesti dipenuhi. Semua orang tahu bahawa JS ialah bahasa pengaturcaraan yang melaksanakan semua arahan mengikut tertib, jadi dalam kes ini anda harus menambah baris kod ini selepas baris yang menambah perpustakaan jQuery pada dokumen anda. Lebih-lebih lagi dengan JS dalam kes peluncur ini, anda tiada apa-apa kaitanperlukan.
Pengekodan HTML
Nah, anda telah menyambungkan peluncur, kini tiba masanya untuk mereka bentuk dan menyesuaikannya. Pertama sekali, anda perlu menulis kod HTML untuk peluncur untuk muncul pada halaman anda sama sekali. Untuk melakukan ini, anda perlu membuat bekas yang akan mengandungi slaid. Ini boleh dilakukan menggunakan teg div, yang perlu diberikan kelas karusel burung hantu. Kelas inilah yang memastikan semua gaya yang berkaitan dengan peluncur akan diaktifkan. Anda juga boleh menulis kelas lain - tema burung hantu. Ini berguna jika anda memutuskan untuk menggunakan reka bentuk lalai atau menggunakan versi standard peluncur sebagai asas untuk kerja selanjutnya.
Kemudian anda perlu menambah setiap slaid dalam bekas berasingan dengan tag div. Sudah tentu, anda boleh menggunakan teg lain, tetapi teg ini adalah yang terbaik untuk peluncur.
Pemalam Panggilan
Dan perkara terakhir yang perlu anda lakukan untuk mempunyai penggelangsar siap sedia di tapak anda ialah menggunakan blok kod ini:
$(dokumen).sedia(fungsi(){
$(".owl-carousel").owlCarousel();
});
Ia memastikan peluncur mula berfungsi, iaitu tatal kandungan, apabila halaman anda dimuatkan. Dengan kod yang sama, anda boleh menyambungkan Owl Carousel ke WordPress. Tetapan pemalam ini banyak dan pelbagai, dan kini anda akan belajar tentang perkara paling penting.
Menetapkan rupa dan kefungsian peluncur
Jadi apakah arahan yang boleh anda gunakan untuk menyesuaikan peluncur anda? Pertama sekali, anda perlu mengingati arahan item, kerana dengannya anda boleh menetapkan bilangan slaid tertentu dalam gelangsar anda. Perintah gelung akan membolehkan anda memilih sama ada untuk menggelungkan peluncur atau berhenti menatal pada elemen terakhir. Terdapat juga arahan Seret, yang mempunyai beberapa pilihan, seperti tetikus dan sentuhan. Dalam kes pertama, anda boleh membuatnya supaya elemen peluncur anda boleh dileret dengan tetikus ditekan ke bawah, dan dalam kes kedua, dengan bantuan sentuhan (arahan ini sesuai untuk peranti mudah alih). Satu lagi arahan penting ialah nav, yang membolehkan paparan anak panah navigasi. Bersama-sama dengannya, anda boleh menggunakan arahan navText untuk menambah label pada butang navigasi. Selain itu, anda tidak seharusnya melupakan arahan autoplay, yang membolehkan anda mendayakan dan melumpuhkan permulaan automatik untuk memusingkan slaid peluncur anda apabila halaman dimuatkan. Dengan arahan ini, anda juga boleh menggunakan autoplayTimeout, yang mana anda boleh menetapkan nilai tertentu dalam milisaat, yang akan menentukan masa antara pusingan automatik setiap slaid.
Jika anda menggunakan reka bentuk web responsif, iaitu reka bentuk halaman anda secara automatik berubah bergantung pada peranti mana ia dilihat, maka anda pasti perlu mengingati arahan responsif, yang membolehkan anda menetapkan bilangan slaid untuk dipaparkan bergantung pada lebar skrin halaman sedang dilihat.
