how to print slide number on controlNav in flexslider

Question

I want slide number on each navigation bar bullet points

HTML code

<div id="slideshow">
  <div class="container">
    <div class="flexslider showOnMouseover ">
      <ul class="slides">
        <li> <img src="sliders/images/1.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-1.png" alt=""></div></li>
        <li> <img src="sliders/images/2.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-2.png" alt=""></div></li>
      </ul>
    </div>

Answer 1

you can do that by removing a class name

use the below code to do it as soon as the slider starts.

$('.flexslider').flexslider({
    start : function(){
        $('.flex-control-paging').removeClass('flex-control-paging');
    }
});

NOTE: You may need to change some more css to make it look pretty

Answer 2

Anyone still looking for the solution to this as I was, it can be solved simply by modifying the style sheet 'flexslider.css'.

The script already gives each nav link a number, but hides the number from view using a text-indent of -9999px. To get the numbers back, modify the class '.flex-control-paging li a'. As an example, here's the original:

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

Modify it to:

.flex-control-paging li a {
  width: 20px;
  height: 20px;
  font-size: 20px;
  display: block;
  background: #ddd;
  cursor: pointer;
}

And...

.flex-control-paging li a:hover {
  background: #333;
  color:#eee;
}
.flex-control-paging li a.flex-active {
  background: #333;
  color:#FFF;
  cursor: default;
}

Should give you a good starting point to add your own style to.