BxSlider Custom Pager

Question

I wish to use a content slider in an application. I shortlisted the BxSlider. Kindly suggest the way to implement a custom pager as displayed in screenshot

I am referring the BxSlider API.

Screenshot for the desired solution

Please help!!

Answer 1

This got resolved. Have updated the style as follows:

a.pager-active > div{
    background: url("/images/dot_filled.png") no-repeat scroll !important;
    display:inline;
    outline:none;
}

.bx-pager a > div{      
    display:inline;
    padding:2px;
    background: url("/images/dot_empty.png") no-repeat scroll;
    position:relative;
    top:10px;
    outline:none;
}

I am providing this answer so that it might help someone who is looking to have a custom BxSlider Pager. Thanks!!