How to customize a BX slider jQuery plugin according to your design?

BX Slider is one of those slider plugin that have ease of use with ease of customization. In every sense BX Slider competes with other jQuery slider plugin. Since, every time design and its needs get different in many senses like colour scheme or UI. Hence in this post I'm going to reveal some ways to customize your jQuery BX-Slider plugin to what you want.

For Blogger blogs read this.

Customization requires you to edit jquery.bxslider.css file in order to add some custom style in your slider.For demo check this out.

Arrows

So lets start with the slider arrows, for arrows you need to edit the following part of code.

.bx-wrapper .bx-prev {
left: 10px;
background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url(images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}

Now the background links will be replaced by the sources of your images. Now note that the arrows and other images provided default by BX Slider are comprised of single image that is why everywhere you will find background-position, it is to set the required image on a particular position.

Image used by BX Slider (default) to use arrows

Secondly you need to remove the background position attributes or change it according to your image.

.bx-wrapper .bx-controls-direction a have width and height of 32px, change it according to the size of your slider button else your button won't be fully visible.

.bx-wrapper .bx-prev:hover and .bx-wrapper .bx-next:hover also have background-position that changes when button is on hover state. Now you can add your background image here to set on hover or else just remove it so that it won't override your original buttons.

Search Query: Slider arrows

Caption

For caption change the edit the following part.

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}

Now here you can give caption a new look, because captions makes a bigger difference in any slider. Change the color and font of caption by editing the font-family and color attribute of span tag. Further change the .bx-caption background to change the background of your caption. Better to use alpha opacity in order to make it a bit transparent so that image behind should be visible clearly.

Loader

To change loader edit the following part.

/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}

Just change the background-url  link with your link. To create a ajax loading gif you can try the following tools.

1. Ajax Load
2. Preloaders
3. Loader Generator

Pager

For pager edit the following part:

.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}

These are the small buttons below every slider through which a user can switch to any slide. Change the appearance by changing the width,height or background-color. The example showed below.