jQuery slider: bxslider with 4 demos (horizontal, vertical and more)

The bxslider: A jQuery slider

The bxslider is a cool jQuery slider plug-in that has a ton of options and many features. It is fully responsive; since more and more visits are coming from mobile devices so it is an important feature.

You may create sliders in different modes i.e.

  • Horizontal
  • Vertical and
  • Fade mode

Being responsive, the plug-in has built-in support to respond to touch or swipe in smartphones.

Source Download plug-in  Demo

How to set up this slider on your website?

It is quite simple to setup this slider jQuery plug-in on your website. First of all, download the package and get the jquery.bxslider.min.js and jquery.bxslider.css files (the package contains many files but you basically need these two and images folder).

Also, make sure that you place images folder at the same location where CSS file is placed. The images folder contains arrows, loader etc.

You need to include the jquery.bxslider.min.js file after the jQuery library reference.

<!– CDN link –>

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>

<!– bxSlider Javascript file –>

<script src=”js/bxslider/jquery.bxslider.min.js”></script>

(Adjust the path of plug-in JS file as per your directory structure.)

The markup

The markup contains only a few lines of code specifying the images and bxslider class, for example:

Initiate the plug-in

The simple slider can be imitated as follows:

 

Use the options as per the requirement and desire as shown in the demos below or read more on the developer’s page.

A slider with auto move and controls demo

In this slider demo, four images are used for sliding. Two options are used in the jQuery code for moving the slides automatically along with controls to start and pause the sliding. Have a look at the demo and complete code:

jQuery slider auto

See online demo and code

Get the complete code from the demo page.

A demo of slider with captions

For creating the captions of slides, simply use the title attribute with each image. After that, specify the captions option as true in the jQuery code i.e.:

captions: true

and you are done. The captions will appear on the bottom left of each slide, have a look:

jQuery slider captions

See online demo and code

The markup for above demo:

 

The jQuery code:

 

A demo with thumbnails

In this example, the thumbnails of sliding images are displayed below the main slider. So, a user may press/swipe the arrows for moving next or previous slide or jump to any slide by clicking the thumbnail. Have a look at the demo:

jQuery slider

See online demo and code

For that, you have to use the pagerCustom option in jQuery code.

A little markup is also required. You need to use the <a> tags with the data-slide-index attribute which index start at 0. So, for the first image in the main gallery, the index will be 0.

Following is the markup used in the demo:

 

See the complete code on the demo page.

A demo of vertical slider

As mentioned earlier, you may create horizontal as well as vertical sliders by using this nice jQuery slider plug-in. All you need to do is to use the mode: ‘vertical’ option in the jQuery and above slider will become a vertical slider. Click on the link below for a demo:

See online demo and code

To learn more about this plug-in, its available options and demos visit the page here.