Cara Membina Slider JQuery Mudah

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 id="Luncurkan-satu"> Luncurkan satu</h2>
<br><h2 id="Luncurkan-dua"> Luncurkan dua</h2>
<br><h2 id="Slaid-tiga"> 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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Salin selepas log masuk</div></div> <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> <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Salin selepas log masuk</div></div> <p> Ini adalah kod JavaScript, jadi anda juga boleh memasukkannya<script>标签中。或者您可以将其放在HTML文件底部<code><body>标签的正上方，以便在页面加载完毕后运行JavaScript。如果您更愿意将其放在<code><script>标签中，则需要确保在加载必要的JavaScript和CSS文件后放置它。</script></p> <p>如您所见，我们使用<code>slider CSS类来初始化我们的轮播。

通过这三个简单的步骤，您就使用基于jQuery的bxSlider库构建了一个响应式轮播！这是一个CodePen演示，展示了轮播的实际效果：

在下一节中，我们将扩展到目前为止我们讨论的内容，我们将尝试通过使用bxSlider库提供的各种配置选项来构建轮播。

构建实际示例

在上一节中，我们讨论了如何使用bxSlider库设置基本的轮播。在本节中，我们将介绍一个实际示例，演示如何为您的网站构建旋转图片轮播。

在您的文档根目录下，创建一个包含以下代码片段的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>

设置好后，您的幻灯片应该如下所示：

上面示例中的代码应该看起来很熟悉。它与我们已经讨论过的内容非常相似。唯一不同的是，我们使用bxSlider库支持的一些配置选项初始化了我们的轮播。让我们仔细看看该代码片段。

$('.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参数

autoControls参数添加控件，允许用户启动和停止幻灯片。默认情况下，它设置为false，因此如果您想显示控件，则需要将其显式设置为true。

auto参数

auto参数允许您在页面加载时自动启动幻灯片。默认情况下，它设置为false。

pager参数

pager参数向幻灯片添加分页器。

slideWidth参数

slideWidth参数允许您设置幻灯片的宽度。如果您对幻灯片使用水平选项，则此参数是必须的。

mode参数

mode参数允许您配置幻灯片之间过渡的类型。您可以从中选择三个选项——水平、垂直和淡入。在上面的示例中，我们使用了淡入选项，因此在从一个幻灯片切换到另一个幻灯片时，您将看到淡入效果。

captions参数

captions参数用于如果您想为每个幻灯片显示标题。标题是从图片元素的title属性中获取的。如您所见，我们在示例中为所有图片提供了title属性。

speed参数

speed参数允许您配置幻灯片过渡持续时间，并以毫秒为单位设置。在我们的示例中，我们将其设置为1000，因此幻灯片将每秒旋转一次。

bxSlider还有许多其他配置选项——您可以在官方bxSlider选项文档中了解它们。继续探索bxSlider库中提供的不同选项。它还提供了许多使用JavaScript回调方法的自定义可能性。

结论

今天，我们讨论了如何使用jQuery库设置基本的轮播。为了演示，我们选择了基于jQuery库的bxSlider库。我们还通过使用bxSlider库提供的各种配置选项构建了一个实际示例。