How to Build a Simple jQuery Slider

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 id="Slide-One"> Slide One</h2>
<br><h2 id="Slide-Two"> Slide Two</h2>
<br><h2 id="Slide-Three"> 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>标签中。或者您可以将其放在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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355471357.jpg?x-oss-process=image/resize,p_40" class="lazy" title="A Beautiful Landscape" alt="How to Build a Simple jQuery Slider" ></div>
<br><div><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355685315.jpg?x-oss-process=image/resize,p_40" class="lazy" title="Stationery on Table" alt="How to Build a Simple jQuery Slider" ></div>
<br><div><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174162355874714.jpg?x-oss-process=image/resize,p_40" 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>

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

上面示例中的代码应该看起来很熟悉。它与我们已经讨论过的内容非常相似。唯一不同的是，我们使用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库提供的各种配置选项构建了一个实际示例。