Insert slider count between flex-direction-nav tags

Insert slider count between flex-direction-nav tags

Using the jQuery FlexSlider v2.1 plugin with jQuery v1.7.2 to slide images
across the page.
How do you merge the flex-direction-nav's "< >" with the slider count?
i.e.: " < 1 of 3 > "
I've managed to merge them myself, but flexslider insists in adding in
it's own "< >" tags which sits next to my " < 1 of 3 > " code.
Sample HTML code:
<div class="container-images">
<div class="title-with-count">
<div class="title">Library of images</div>
<div class="count">
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#">&lsaquo;</a></li>
<li class="count"><span class="current-slide">1</span> of
<span class="total-slides">1</span></li>
<li><a class="flex-next" href="#">&rsaquo;</a></li>
</ul>
</div>
</div>
<div class="flexslider">
<ul class="slides" clearfix">
<li class="first-block clearfix">
<div class="item-image grid_4"><a href="#"><img
src="/library/image-1.jpg" border=0></a></div>
<div class="item-image grid_4"><a href="#"><img
src="/library/image-2.jpg" border=0></a></div>
<div class="item-image grid_4"><a href="#"><img
src="/library/image-3.jpg" border=0></a></div>
</li>
<li class="clearfix">
<div class="item-image grid_4"><a href="#"><img
src="/library/image-4.jpg" border=0></a></div>
<div class="item-image grid_4"><a href="#"><img
src="/library/image-5.jpg" border=0></a></div>
<div class="item-image grid_4"><a href="#"><img
src="/library/image-6.jpg" border=0></a></div>
</li>
<li class="clearfix">
<div class="item-image grid_4"><a href="#"><img
src="/library/image-7.jpg" border=0></a></div>
<div class="item-image grid_4"><a href="#"><img
src="/library/image-8.jpg" border=0></a></div>
<div class="item-image grid_4"><a href="#"><img
src="/library/image-9.jpg" border=0></a></div>
</li>
</ul>
</div>
The javascript code:
$('.flexslider').flexslider({
animation: 'slide' ,
slideshowSpeed: 4000 ,
animationSpeed: 1000 ,
pauseOnAction: true ,
pauseOnHover: true ,
controlNav: false ,
directionNav: true ,
prevText: '&lsaquo;' ,
nextText: '&rsaquo;' ,
controlsContainer: '.container-images .slide-count' ,
manualControls: '.container-images .flex-direction-nav li a' ,
useCSS: true ,
touch: true ,
start: function(slider){
$('.total-slides').text(slider.count);
},
after: function(slider){
$('.current-slide').text(slider.currentSlide+1); // js array
starts with 0 .. so +1
}
});