This article will guide you to create a simple picture carousel using the jQuery library. We will use the bxSlider library, which is built on jQuery and provides many configuration options to set up the carousel.

Nowadays, picture carousel has become a must-have feature on the website - one picture is better than a thousand words!

After deciding to use the picture carousel, the next question is how to create it. First, you need to collect high-quality, high-resolution pictures.

Next, you need to create a picture carousel using HTML and some JavaScript code. There are many libraries on the web that can help you create carousels in different ways. We will use the open source bxSlider library.

The bxSlider library supports responsive design, so carousels built with this library can be adapted to any device. You sure know that it is crucial to build responsive websites and adapt to different devices today. Therefore, responsive design is an essential feature when selecting a third-party library to build a carousel.

In the next section, we will begin to explore the basics and setup of the bxSlider library. Next, we will build a practical example that demonstrates the use of the bxSlider library. Finally, we'll learn about some of the important parameters supported by the bxSlider library that allow you to customize the carousel to your needs.

What is bxSlider?

If you are looking for content carousels based on jQuery, bxSlider is one of the best and easiest libraries that allows you to create content and picture carousels very easily.

Let's take a quick look at the features it offers:

• It is fully responsive and adapts to all types of devices.
• It supports different display modes such as horizontal, vertical and fade modes. We will introduce it in detail later in the article.
• Carousel content can be anything: pictures, videos, or HTML text.
• It supports all popular browsers.
• It provides a variety of configuration options that allow you to customize the carousel to your custom needs.
• Last but not least, it is easy to implement, which we will see in the next section.

Now, let's take a look at the installation process of the bxSlider library. In this article, I will use the CDN URL to load the necessary JavaScript and CSS files, but you can also download or clone these files from the official bxSlider GitHub repository.

Contains JavaScript and CSS files

The first thing you need to do is include the necessary JavaScript and CSS files in your HTML file, as shown in the code snippet below.

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

You can include the above code in the HTML document In the tag. As you can see, I have loaded the necessary files from the CDN URL. If you have downloaded these files for your project, you need to provide the correct path for each file.

Set carousel content

In this section, we will learn how to set up carousel content in an HTML file.

Let's take a look at the code snippet below.

<code><div class="slider">
<br><h2> Slide One</h2>
<br><h2> Slide Two</h2>
<br><h2> Slide Three</h2>
<br>
</div>
<br></code>

In the example above, we set up three slides, which are carousels between them when initializing the carousel. It should be noted that in the above code snippet, the main<div> The CSS class is used in the element. Currently, we use <code>slider as our CSS class, so we will use this value during the setup process of bxSlider.

Of course, you can use anything, not just text. We will return to this in the next section as we look at how to build a full picture carousel. Now you just need to write down ours in the Lord<div> The CSS class provided in the element.<p> Our carousel doesn't look good using only the original HTML, so we'll add some extra CSS to specify the background, font size, and text alignment of the title.</p> <pre class="brush:php;toolbar:false"> body {&lt;br&gt; margin: 20px auto;&lt;br&gt; font-family: 'Lato';&lt;br&gt; font-weight: 300;&lt;br&gt; width: 600px;&lt;br&gt; }&lt;br&gt;&lt;br&gt; div.slider h2 {&lt;br&gt; text-align: center;&lt;br&gt; background: orange;&lt;br&gt; font-size: 6rem;&lt;br&gt; line-height: 3;&lt;br&gt; margin: 0;&lt;br&gt; }&lt;br&gt;</pre> <h3 id="Initialize-bxSlider"> Initialize bxSlider</h3> <p> So far, we have included the necessary library files and set up HTML content for our carousel. The only thing left is to initialize bxSlider, converting our static HTML content into a beautifully-looking rotary carousel!</p> <p> Let's take a look at the code snippet that initializes the carousel.</p> <pre class="brush:php;toolbar:false">&lt;br&gt; $(document).ready(function(){&lt;br&gt; $('.slider').bxSlider();&lt;br&gt; });&lt;br&gt;&lt;br&gt;</pre> <p> This is JavaScript code, so you can also put it in<script>標(biāo)簽中?；蛘吣梢詫⑵浞旁贖TML文件底部<code><body>標(biāo)簽的正上方，以便在頁(yè)面加載完畢后運(yùn)行JavaScript。如果您更愿意將其放在<code><script>標(biāo)簽中，則需要確保在加載必要的JavaScript和CSS文件后放置它。</script></p> <p>如您所見(jiàn)，我們使用<code>slider CSS類來(lái)初始化我們的輪播。

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

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

構(gòu)建實(shí)際示例

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

在您的文檔根目錄下，創(chuàng)建一個(gè)包含以下代碼片段的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="How to Build a Simple jQuery Slider" ></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="How to Build a Simple jQuery Slider" ></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="How to Build a Simple jQuery Slider" ></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)該看起來(lái)很熟悉。它與我們已經(jīng)討論過(guò)的內(nèi)容非常相似。唯一不同的是，我們使用bxSlider庫(kù)支持的一些配置選項(xiàng)初始化了我們的輪播。讓我們仔細(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ù)添加控件，允許用戶啟動(dòng)和停止幻燈片。默認(rèn)情況下，它設(shè)置為false，因此如果您想顯示控件，則需要將其顯式設(shè)置為true。

auto參數(shù)

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

pager參數(shù)

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

slideWidth參數(shù)

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

mode參數(shù)

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

captions參數(shù)

captions參數(shù)用于如果您想為每個(gè)幻燈片顯示標(biāo)題。標(biāo)題是從圖片元素的title屬性中獲取的。如您所見(jiàn)，我們?cè)谑纠袨樗袌D片提供了title屬性。

speed參數(shù)

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

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

結(jié)論

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