In this article, we’re going to explore how you could set up a basic slider using a jQuery library. We’ll use the bxSlider library, which is built on top of jQuery and provides a lot of configuration options for setting up a slider.
Nowadays, an image slider is a must-have feature—a picture is worth a thousand words!
Once you’ve decided that you’re going to set up a basic slider, the next question is what exactly is the process of creating one. Of course, the first requirement is to collect good-quality, high-resolution images.
Next, you know that you’re going to use HTML and some fancy JavaScript stuff to create your image slider. And there are a lot of libraries available on the web that allow you to create a slider in different ways. We'll use the open-source bxSlider library.
The bxSlider library supports responsiveness, so a slider that's built using this library will adapt to any device. I’m sure you are aware how critical it is nowadays to build a website which is responsive and adaptive to different devices. Thus, responsiveness is a must-have feature when you choose a third-party library to build your sliders.
In the next section, we’ll start exploring the bxSlider library basics and setup process. Moving further, we’ll build a real-world example which will demonstrate the use of the bxSlider library. And finally, we’ll have a look at a few important parameters supported by the bxSlider library that allow you to customize a slider according to your requirements.
What Is bxSlider?
If you’re looking for jQuery-based content sliders, bxSlider is one of the best and simplest libraries, and it allows you to create content and image sliders very easily.
Let’s have a quick look at the features it provides:
- It’s fully responsive and adaptive to all types of devices.
- It supports different display modes like horizontal, vertical, and fade modes. We’ll see more on this later in the article.
- The slide content can be anything: image, video, or HTML text.
- It supports all popular browsers.
- It provides a variety of configuration options that allow you to customize a slider according to your custom requirements.
- Last but not least, it’s easy to implement, as we’ll see in the next section.
Now, let’s have a look at the installation process of the bxSlider library. In this article, I’m going to use CDN URLs to load the necessary JavaScript and CSS files, but of course you could always go ahead and download or clone these files from the official bxSlider GitHub repo.
Include JavaScript and CSS Files
The first thing that you need to do is to include the necessary JavaScript and CSS files in your HTML file, as shown in the following snippet.
1 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> |
2 |
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
3 |
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> |
You can include the above code in the <head> tag of your HTML document. As you can see, I’ve loaded the necessary files from CDN URLs. If you’ve downloaded these files for your project, you need to provide the correct path for each file.
Set Up the Slider Content
In this section, we’ll see how you can set up the slider content in your HTML file.
Let’s have a look at the following snippet.
1 |
<div class="slider"> |
2 |
<h2>Slide One</h2> |
3 |
<h2>Slide Two</h2> |
4 |
<h2>Slide Three</h2> |
5 |
</div>
|
In the above example, we’ve set up three slides to rotate between when we initialize the slider. The important thing to note in the above snippet is the CSS class which is provided in the main <div> element. At the moment, we’ve used slider as our CSS class, so we'll use this value during the setup of bxSlider.
Of course, you could use any content, not just text. We’ll get back to this in the next section when we look at how to build a complete image slider. For now, you just need to note down the CSS class which we’ve provided in the main <div> element.
Our slider won't look very good with just raw HTML, so we will be adding some extra CSS that specifies the background, font-size, and text alignment of our headings.
1 |
body { |
2 |
margin: 20px auto; |
3 |
font-family: 'Lato'; |
4 |
font-weight: 300; |
5 |
width: 600px; |
6 |
}
|
7 |
|
8 |
div.slider h2 { |
9 |
text-align: center; |
10 |
background: orange; |
11 |
font-size: 6rem; |
12 |
line-height: 3; |
13 |
margin: 0; |
14 |
}
|
Initialize bxSlider
So far, we’ve included the necessary library files and set up HTML content for our slider. The only remaining thing is to initialize bxSlider to convert our static HTML content into a fancy-looking rotating slider!
Let’s have a look at the snippet to initialize our slider.
1 |
<script> |
2 |
$(document).ready(function(){ |
3 |
$('.slider').bxSlider(); |
4 |
});
|
5 |
</script> |
It’s JavaScript code, so you can also put it in the <head> tag. Or you can put it just above the </body> tag at the bottom of your HTML file, so that the JavaScript will run after the rest of your page is finished loading. If you prefer to put it in the <head> tag, you need to make sure to place it after you’ve loaded the necessary JavaScript and CSS files.
As you can see, we’ve used the slider CSS class to initialize our slider.
And with these three simple steps, you’ve built a responsive slider using the jQuery-based bxSlider library! Here is a CodePen demo that shows the slider in action:
In the next section, we’ll extend what we’ve discussed so far, and we’ll try to build a slider by using a variety of configuration options provided by the bxSlider library.
Build a Real-World Example
In the previous section, we discussed how to set up a basic slider by using the bxSlider library. In this section, we’ll go through a real-world example which demonstrates how you could build a rotating image slider for your website.
Under your document root, create an HTML file which contains the following snippet.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<body>
|
4 |
<head>
|
5 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> |
6 |
<script "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
7 |
<script "text/javascript" src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> |
8 |
</head>
|
9 |
|
10 |
<div class="slider"> |
11 |
<div><img src="https://picsum.photos/id/10/600/400" title="A Beautiful Landscape"></div> |
12 |
<div><img src="https://picsum.photos/id/20/600/400" title="Stationery on Table"></div> |
13 |
<div><img src="https://picsum.photos/id/30/600/400" title="A Coffee Mug"></div> |
14 |
</div>
|
15 |
|
16 |
<script>
|
17 |
$('.slider').bxSlider({ |
18 |
autoControls: true, |
19 |
auto: true, |
20 |
pager: true, |
21 |
slideWidth: 600, |
22 |
mode: 'fade', |
23 |
captions: true, |
24 |
speed: 1000 |
25 |
});
|
26 |
</script>
|
27 |
</body>
|
28 |
</html>
|
And with that set up, your slideshow should look something like this:
The code in the above example should look familiar. It's very similar to what we’ve already discussed. The only thing that's different is that we’ve initialized our slider with a few configuration options supported by the bxSlider library. Let’s have a close look at that snippet.
1 |
$('.slider').bxSlider({ |
2 |
autoControls: true, |
3 |
auto: true, |
4 |
pager: true, |
5 |
slideWidth: 600, |
6 |
mode: 'fade', |
7 |
captions: true, |
8 |
speed: 1000 |
9 |
});
|
The autoControls Parameter
The autoControls parameter adds controls that allow users to start and stop the slideshow. By default, it’s set to false, so if you want to show controls, you need to set it to true explicitly.
The auto Parameter
The auto parameter allows you to start the slideshow automatically on page load. By default, it’s set to false.
The pager Parameter
The pager parameter adds a pager to the slideshow.
The slideWidth Parameter
The slideWidth parameter allows you to set the width of the slideshow. If you’re using the horizontal option for your slideshow, this parameter is a must.
The mode Parameter
The mode parameter allows you to configure the type of transition between slides. You have three options to choose from—horizontal, vertical, and fade. In the above example, we’ve used the fade option, so you’ll see a fading effect when switching from one slide to another.
The captions Parameter
The captions parameter is used if you want to display a title with each slide. Titles are fetched from the image element's title attribute. As you can see, we’ve provided a title attribute for all the images in our example.
The speed Parameter
The speed parameter allows you to configure the slide transition duration, and it’s set in milliseconds. In our example, we’ve set it to 1000, so the slides will be rotated every second.
bxSlider has tons of other configuration options—you can learn about them in the official bxSlider options documentation. Go ahead and explore the different options available in the bxSlider library. It also offers a lot of customization possibilities with JavaScript callback methods.
Conclusion
Today, we discussed how you could set up a basic slider using the jQuery library. For demonstration purposes, we chose the bxSlider library, which is built on top of the jQuery library. We also built a real-world example by using a variety of configuration options provided by the bxSlider library.
