In this article, we’re going to explore how you could set up a basic slider using the jQuery library. We’ll use the bxSlider library which is built on the top of jQuery and provides a lot of configuration options for setting up a slider.
Nowadays, an image slider is a must-have feature—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 images and high resolution image.
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, and hence the slider which is 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 set up 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 the 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 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.
You can include the above code in the tag of your HTML document. As you can see, I’ve loaded necessary files from CDN URLs. If you’ve downloaded these files for your project, you need to provide the correct path of each file.
Set Up Slider Content
In this section, we’ll see how you can set up slider content in your HTML file.
Let’s have a look at the following snippet.
In the above example, we’ve set up three slides that will be rotated 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
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
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.
It’s JavaScript code, so you can also put it in the tag. Or you can put it just above the tag in 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 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 jQuery based bxSlider library!
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 a HTML file which contains the following snippet.
And with that setup, 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 which is 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.
$('.slider').bxSlider({
autoControls: true,
auto: true,
pager: true,
slideWidth: 800,
mode: 'fade',
captions: true,
speed: 1000
});
The autoControls Parameter
The autoControls parameter adds controls that allow users to start and stop the slideshow. By default, it’s set to false, and thus 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 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, and thus 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, and thus slides will be rotated every second.
bxSlider has tons of other configuration options—you can learn about them in the official bsSlider options documentation. Go ahead and explore the different options available by 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 the top of the jQuery library. We also built a real-world example by using a variety of configuration options provided by the bxSlider library.
If you’ve worked with jQuery-based slider libraries, I would love to hear from you! Feel free to share your thoughts using the feed below.
