Artikel ini akan membimbing anda untuk membuat karusel gambar mudah menggunakan perpustakaan jQuery. Kami akan menggunakan perpustakaan BXSlider, yang dibina di atas jQuery dan menyediakan banyak pilihan konfigurasi untuk menubuhkan karusel.

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

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

Seterusnya, anda perlu membuat karusel gambar 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.

Dalam 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 mencari karusel kandungan berdasarkan jQuery, BXSlider adalah salah satu perpustakaan terbaik dan paling mudah yang membolehkan anda membuat kandungan dan gambar karusel dengan mudah.

Mari kita lihat dengan cepat ciri -ciri yang ditawarkannya:

• Ia responsif sepenuhnya dan menyesuaikan diri 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 Carousel boleh menjadi apa -apa: Gambar, video, atau teks HTML.
• Ia menyokong semua pelayar popular.
• Ia menyediakan pelbagai pilihan konfigurasi yang membolehkan anda menyesuaikan karusel kepada keperluan tersuai anda.
• Akhir sekali, ia 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.

Mengandungi 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.

 <code><link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">
<br><br><br></code>

Anda boleh memasukkan kod di atas dalam dokumen HTML Dalam tag. 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, kita akan belajar bagaimana untuk menyediakan kandungan karusel dalam fail HTML.

Mari kita lihat coretan kod di bawah.

<code><div class="slider">
<br><h2> Luncurkan satu</h2>
<br><h2> Luncurkan dua</h2>
<br><h2> Slaid tiga</h2>
<br>
</div>
<br></code>

Dalam contoh di atas, kami menubuhkan tiga slaid, yang merupakan karusel di antara mereka ketika memulakan karusel. Harus diperhatikan bahawa dalam coretan kod di atas, yang utama<div> Kelas CSS digunakan dalam elemen. Pada masa ini, kami menggunakan <code>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 menuliskan diri kepada Tuhan<div> Kelas CSS yang disediakan dalam elemen.<p> Carousel kami tidak kelihatan baik menggunakan HTML yang asal, jadi kami akan menambah beberapa CSS tambahan untuk menentukan latar belakang, saiz fon, dan penjajaran teks tajuk.</p> <pre class="brush:php;toolbar:false"> badan {&lt;br&gt; Margin: 20Px Auto;&lt;br&gt; font-family: 'lato';&lt;br&gt; Font-Weight: 300;&lt;br&gt; lebar: 600px;&lt;br&gt; }&lt;br&gt;&lt;br&gt; div.slider h2 {&lt;br&gt; Teks-Align: Pusat;&lt;br&gt; Latar Belakang: Orange;&lt;br&gt; saiz font: 6rem;&lt;br&gt; Talian ketinggian: 3;&lt;br&gt; Margin: 0;&lt;br&gt; }&lt;br&gt;</pre> <h3 id="Inisialisasi-BXSlider"> Inisialisasi BXSlider</h3> <p> Setakat ini, kami telah memasukkan fail perpustakaan yang diperlukan dan menyediakan kandungan HTML untuk karusel kami. Satu-satunya perkara yang tersisa adalah untuk memulakan BXSlider, menukar kandungan HTML statik kami ke dalam karusel Rotary yang cantik!</p> <p> Mari kita lihat coretan kod yang memulakan karusel.</p> <pre class="brush:php;toolbar:false">&lt;br&gt; $ (dokumen) .ready (fungsi () {&lt;br&gt; $ ('. slider'). bxSlider ();&lt;br&gt; });&lt;br&gt;&lt;br&gt;</pre> <p> Ini adalah kod JavaScript, jadi anda juga boleh memasukkannya<script>標(biāo)簽中。或者您可以將其放在HTML文件底部<code><body>標(biāo)簽的正上方，以便在頁面加載完畢后運行JavaScript。如果您更愿意將其放在<code><script>標(biāo)簽中，則需要確保在加載必要的JavaScript和CSS文件后放置它。</script></p> <p>如您所見，我們使用<code>slider CSS類來初始化我們的輪播。

通過這三個簡單的步驟，您就使用基于jQuery的bxSlider庫構(gòu)建了一個響應(yīng)式輪播！這是一個CodePen演示，展示了輪播的實際效果：

在下一節(jié)中，我們將擴展到目前為止我們討論的內(nèi)容，我們將嘗試通過使用bxSlider庫提供的各種配置選項來構(gòu)建輪播。

構(gòu)建實際示例

在上一節(jié)中，我們討論了如何使用bxSlider庫設(shè)置基本的輪播。在本節(jié)中，我們將介紹一個實際示例，演示如何為您的網(wǎng)站構(gòu)建旋轉(zhuǎn)圖片輪播。

在您的文檔根目錄下，創(chuàng)建一個包含以下代碼片段的HTML文件。

<br><br><br><br><link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet"><br><br><br><br><br><div class="slider">
<br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355471357.jpg" class="lazy" title="A Beautiful Landscape" alt="Cara Membina Slider JQuery Mudah" ></div>
<br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355685315.jpg" class="lazy" title="Stationery on Table" alt="Cara Membina Slider JQuery Mudah" ></div>
<br><div><img  src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355874714.jpg" class="lazy" title="A Coffee Mug" alt="Cara Membina Slider JQuery Mudah" ></div>
<br>
</div><br><br>            $('.slider').bxSlider({<br>                autoControls: true,<br>                auto: true,<br>                pager: true,<br>                slideWidth: 600,<br>                mode: 'fade',<br>                captions: true,<br>                speed: 1000<br>            });<br>        <br><br><br>

設(shè)置好后，您的幻燈片應(yīng)該如下所示：

上面示例中的代碼應(yīng)該看起來很熟悉。它與我們已經(jīng)討論過的內(nèi)容非常相似。唯一不同的是，我們使用bxSlider庫支持的一些配置選項初始化了我們的輪播。讓我們仔細(xì)看看該代碼片段。

$('.slider').bxSlider({<br>    autoControls: true,<br>    auto: true,<br>    pager: true,<br>    slideWidth: 600,<br>    mode: 'fade',<br>    captions: true,<br>    speed: 1000<br>});<br>

autoControls參數(shù)

autoControls參數(shù)添加控件，允許用戶啟動和停止幻燈片。默認(rèn)情況下，它設(shè)置為false，因此如果您想顯示控件，則需要將其顯式設(shè)置為true。

auto參數(shù)

auto參數(shù)允許您在頁面加載時自動啟動幻燈片。默認(rèn)情況下，它設(shè)置為false。

pager參數(shù)

pager參數(shù)向幻燈片添加分頁器。

slideWidth參數(shù)

slideWidth參數(shù)允許您設(shè)置幻燈片的寬度。如果您對幻燈片使用水平選項，則此參數(shù)是必須的。

mode參數(shù)

mode參數(shù)允許您配置幻燈片之間過渡的類型。您可以從中選擇三個選項——水平、垂直和淡入。在上面的示例中，我們使用了淡入選項，因此在從一個幻燈片切換到另一個幻燈片時，您將看到淡入效果。

captions參數(shù)

captions參數(shù)用于如果您想為每個幻燈片顯示標(biāo)題。標(biāo)題是從圖片元素的title屬性中獲取的。如您所見，我們在示例中為所有圖片提供了title屬性。

speed參數(shù)

speed參數(shù)允許您配置幻燈片過渡持續(xù)時間，并以毫秒為單位設(shè)置。在我們的示例中，我們將其設(shè)置為1000，因此幻燈片將每秒旋轉(zhuǎn)一次。

bxSlider還有許多其他配置選項——您可以在官方bxSlider選項文檔中了解它們。繼續(xù)探索bxSlider庫中提供的不同選項。它還提供了許多使用JavaScript回調(diào)方法的自定義可能性。

結(jié)論

今天，我們討論了如何使用jQuery庫設(shè)置基本的輪播。為了演示，我們選擇了基于jQuery庫的bxSlider庫。我們還通過使用bxSlider庫提供的各種配置選項構(gòu)建了一個實際示例。