BxSlider Custom Pager

javascript jquery html bxslider
vedvrat13 picture vedvrat13 · Oct 19, 2011 · Viewed 9k times · Source

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 solutionenter image description here

Please help!!

Answer

vedvrat13 picture vedvrat13 · Oct 25, 2011

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!!

Related questions

TypeError: j(...).bxSlider is not a function - Sliders are not working

I am working on this website ( I wasn't the one made the website but I have to fix it unfortunately). I've got this error on firebug : TypeError: j(...).bxSlider is not a function Here is my <head>: <…

Read More
bxSlider within show/hide divs

My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put …

Read More
Why is bxslider duplicating my divs

My designer put a bxslider to scroll through 3 divs nicely on my page. When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1. Just because the duplicated …

Read More