Cara Membina Slider JQuery Mudah

Sekarang, Gambar Carousel telah menjadi ciri yang mesti ada di laman web - gambar lebih baik daripada seribu perkataan!

Selepas membuat keputusan untuk menggunakan karusel gambar, soalan seterusnya adalah cara menciptanya. Pertama, anda perlu mengumpul gambar-gambar resolusi tinggi yang berkualiti tinggi.

Seterusnya, anda perlu membuat karusel imej menggunakan HTML dan beberapa kod JavaScript. Terdapat banyak perpustakaan di web yang dapat membantu anda membuat karusel dengan cara yang berbeza. Kami akan menggunakan Perpustakaan BXSlider Sumber Terbuka.

Perpustakaan BXSlider menyokong reka bentuk responsif, jadi karusel yang dibina dengan perpustakaan ini boleh disesuaikan dengan mana -mana peranti. Anda pasti tahu bahawa adalah penting untuk membina laman web responsif dan menyesuaikan diri dengan peranti yang berbeza hari ini. Oleh itu, reka bentuk responsif adalah ciri penting apabila memilih perpustakaan pihak ketiga untuk membina karusel.

Di bahagian seterusnya, kami akan mula meneroka asas -asas dan persediaan perpustakaan BXSlider. Seterusnya, kami akan membina contoh praktikal yang menunjukkan penggunaan perpustakaan BXSlider. Akhirnya, kami akan mempelajari beberapa parameter penting yang disokong oleh perpustakaan BXSlider yang membolehkan anda menyesuaikan karusel kepada keperluan anda.

Apa itu BXSlider?

Jika anda sedang mencari Carousel Kandungan Berasaskan JQuery, BXSlider adalah salah satu perpustakaan yang terbaik dan paling mudah, yang membolehkan anda membuat kandungan dan gambar carousel dengan mudah.

Mari kita lihat dengan cepat apa yang ditawarkan:

• Ia benar -benar responsif dan disesuaikan dengan semua jenis peranti.
• Ia menyokong mod paparan yang berbeza seperti mod mendatar, menegak dan pudar. Kami akan memperkenalkannya secara terperinci kemudian dalam artikel.
• Kandungan karusel boleh menjadi kandungan: gambar, video, atau teks HTML.
• Ia menyokong semua pelayar popular.
• Ia menyediakan pelbagai pilihan konfigurasi yang membolehkan anda menyesuaikan karusel mengikut keperluan tersuai anda.
• Terakhir tetapi tidak kurang, mudah dilaksanakan, yang akan kita lihat di bahagian seterusnya.

Sekarang, mari kita lihat proses pemasangan perpustakaan BXSLider. Dalam artikel ini, saya akan menggunakan URL CDN untuk memuatkan fail JavaScript dan CSS yang diperlukan, tetapi anda juga boleh memuat turun atau mengklonkan fail -fail ini dari repositori BXSlider GitHub rasmi.

Termasuk fail JavaScript dan CSS

Perkara pertama yang perlu anda lakukan ialah memasukkan fail JavaScript dan CSS yang diperlukan dalam fail HTML anda, seperti yang ditunjukkan dalam coretan kod di bawah. 3 >

tag dokumen HTML. Seperti yang anda lihat, saya telah memuatkan fail yang diperlukan dari URL CDN. Jika anda telah memuat turun fail ini untuk projek anda, anda perlu menyediakan laluan yang betul untuk setiap fail.

Tetapkan kandungan karusel

Dalam bahagian ini, kami akan belajar bagaimana untuk menetapkan kandungan karusel dalam fail HTML.

Mari kita lihat coretan kod berikut.

mereka apabila karusel dimulakan. Harus diingat bahawa dalam coretan kod di atas, kelas CSS digunakan dalam elemen

utama. Pada masa ini, kami menggunakan slider sebagai kelas CSS kami, jadi kami akan menggunakan nilai ini semasa proses persediaan BXSlider.

Sudah tentu, anda boleh menggunakan apa -apa, bukan hanya teks. Kami akan kembali ke bahagian ini di bahagian seterusnya kerana kita melihat bagaimana untuk membina karusel gambar penuh. Sekarang anda hanya perlu perhatikan kelas CSS yang kami sediakan di elemen

utama.

Carousel kami tidak kelihatan baik menggunakan HTML mentah, jadi kami akan menambah beberapa CSS tambahan untuk menentukan latar belakang, saiz fon dan penjajaran teks tajuk.







Latar Belakang: Orange;
Font-Size: 6rem; 0; Satu-satunya perkara yang tersisa adalah untuk memulakan BXSlider, menukar kandungan HTML statik kami ke dalam karusel Rotary yang cantik!

Mari lihat coretan kod yang memulakan karusel.

$ (dokumen) .ready (function () {
$ ('. slider'). bxSlider ();
});

Atau anda boleh meletakkannya secara langsung di atas tag di bahagian bawah fail HTML untuk menjalankan JavaScript selepas halaman dimuatkan. Jika anda lebih suka memasukkannya ke dalam tag <cript> </cript>, anda perlu memastikan anda meletakkannya selepas fail JavaScript dan CSS yang diperlukan dimuatkan.

Seperti yang anda lihat, kami menggunakan kelas CSS untuk memulakan karusel kami.

Melalui tiga langkah mudah ini, anda membina karusel responsif menggunakan perpustakaan bxlider berasaskan jQuery! Berikut adalah demonstrasi codepen yang menunjukkan kesan sebenar karusel:

Di bahagian seterusnya, kami akan berkembang dengan apa yang telah kami bincangkan setakat ini, dan kami akan cuba membina karusel dengan menggunakan pelbagai pilihan konfigurasi yang disediakan oleh Perpustakaan BXSlider.

Bina contoh praktikal

Di bahagian sebelumnya, kami membincangkan cara menubuhkan karusel asas menggunakan perpustakaan BXSlider. Dalam bahagian ini, kami akan memperkenalkan contoh praktikal yang menunjukkan cara membina karusel imej berputar untuk laman web anda.

Dalam direktori akar dokumen anda, buat fail HTML yang mengandungi coretan kod berikut.

$ ('. slider'). Slaid anda sepatutnya kelihatan seperti ini:

Ia sangat serupa dengan apa yang telah kita bincangkan. Satu -satunya perbezaan ialah kami memulakan karusel kami dengan beberapa pilihan konfigurasi yang disokong oleh perpustakaan BXSlider. Mari kita lihat lebih dekat pada coretan kod ini.

>}); Secara lalai, ia ditetapkan kepada palsu, jadi jika anda ingin memaparkan kawalan yang anda perlukan untuk secara eksplisit menetapkannya kepada benar.

parameter auto

Parameter auto membolehkan anda secara automatik memulakan slaid apabila halaman dimuatkan. Secara lalai, ia ditetapkan kepada palsu.

parameter pager

Parameter pager menambah pager ke slaid.

parameter slidewidth

parameter slidewidth membolehkan anda menetapkan lebar slaid. Parameter ini diperlukan jika anda menggunakan pilihan mendatar untuk tayangan slaid anda.

Parameter mod

Parameter mod membolehkan anda mengkonfigurasi jenis peralihan antara slaid. Terdapat tiga pilihan yang boleh anda pilih - mendatar, menegak, dan pudar. Dalam contoh di atas, kami menggunakan pilihan Fade-In, jadi apabila anda beralih dari satu slaid ke yang lain, anda akan melihat kesan Fade-in.

Parameter kapsyen

Parameter kapsyen digunakan jika anda ingin memaparkan tajuk untuk setiap slaid. Tajuk ini diperoleh dari atribut tajuk elemen imej. Seperti yang anda lihat, kami menyediakan atribut tajuk untuk semua imej dalam contoh.

parameter kelajuan

Parameter kelajuan membolehkan anda mengkonfigurasi tempoh peralihan slaid dan ditetapkan dalam milisaat. Dalam contoh kami, kami menetapkannya kepada 1000, jadi slaid akan berputar sekali sesaat.

BXSlider mempunyai banyak pilihan konfigurasi lain - anda boleh belajar tentangnya dalam dokumentasi pilihan BXSlider rasmi. Teruskan meneroka pilihan yang berbeza yang terdapat di perpustakaan BXSlider. Ia juga menyediakan banyak kemungkinan tersuai untuk menggunakan kaedah panggil balik JavaScript.

Kesimpulan

Hari ini, kami membincangkan bagaimana untuk menubuhkan karusel asas menggunakan perpustakaan jQuery. Untuk demonstrasi, kami memilih perpustakaan BXSlider berdasarkan perpustakaan jQuery. Kami juga membina contoh praktikal dengan menggunakan pelbagai pilihan konfigurasi yang disediakan oleh Perpustakaan BXSlider.

Atas ialah kandungan terperinci Cara Membina Slider JQuery Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!