Search code examples
javascriptjqueryhtmlcssbxslider

Bxslider to remove dots from pager and replace them with numbers like 1 of 4 with next-prev links

Hi friends I am almost done with all the customization I need, which means I have got the total number of sliders and current slide but I need them to be placed exactly at the center where bullets (dots in pager) are now running. I need next and prev links as well, please refer image below. There you can see my Fiddle.

As you can see in fiddle I have got the number in form how I want like 1 of 4, but I need those numbers to be replace the dots, see the image and Fiddle below. For more info please leave comment.enter image description here]

 [1]: http://jsfiddle.net/h4wochdk/
Solution

  • You need to customize entire bx-pager well the question is seems like that only though, I played with your fiddle and this is what I came up with Working Demo. You can change the next/prev image icons by overwriting following styles.

    .bx-wrapper .bx-next {
   background: url(../your_path_to_next_icon.png) no-repeat 18px 5px;
 }
 .bx-wrapper .bx-prev {
   background-position: url(../path_to_prev_icon.png) no-repeat 0 5px;
 }

    To style such div you have to hide the pager-div itslef and customize your div exactly below the slider and then pass the slide-index and total-slides so it will become 1 of 3 like you said.

    Things I have done are

    1: I removed in built bxslider pager so we will get rid of bullets and its div.

    2: I placed slide-index and total-slides inside one custome div called slide-counter.

    3: Then some css to next/prev buttons to get then on exact place where you need.

    Please try with fiddle. All the best.