changing nivoslider numbers into bullets, not working even using theme

so with nivoslider theme, the numbers is supposed to change into bullets according to bullets.png right? well this is strange since in my case, the numbers stay numbers. I'm using default theme and dark theme, both does not changes the numbers into bullets.

there is no error when I check browser console... (I'm using chrome browser, tested on mozilla firefox too, still numbers displayed, not bullets)

this question-answer says that just using theme will change the numbers, there's also fiddle provided there, the second fiddle uses default theme but I don't see the bullets, arrow or numbers

from this answer, it says that I just need to comment text-indent and image background from CSS file. but doesn't that make the controlnav bullets disappear instead?

here is the link to my problem http://alpha.rajafotocopy.com/sumatra/portal.html (please use chrome mobile view since I'm still building the mobile first)

any way to fix this....?

pieces of code to include :

Dark.css nivoslider theme

.theme-dark .nivoSlider a {
border:0;
display:block;
}

.theme-dark .nivo-controlNav {
text-align: left;
padding: 0;
position: relative;
z-index: 10;
}

.theme-dark .nivo-controlNav a {
display:inline-block;
width:10px;
height:10px;
background:url(bullets.png) no-repeat 0 2px;
text-indent:-9999px;
border:0;
margin: 0 2px;
}

 .theme-dark .nivo-controlNav a.active {
 background-position:0 100%;
 }

nivoslider.css

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
  text-align:center;
  padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
 }
.nivo-controlNav a.active {
    font-weight:bold;
 }

Jquery.nivoslider.js

//Default settings
$.fn.nivoSlider.defaults = {
    effect: 'random',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 3000,
    startSlide: 0,
    directionNav: true,
    controlNav: true,
    controlNavThumbs: false,
    pauseOnHover: true,
    manualAdvance: false,
    prevText: 'Prev',
    nextText: 'Next',
    randomStart: false,
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
};

my HTML

<div id="slider" class="slider-wrapper theme-dark">

        <img src="resource/bca.png"/>
        <img src="resource/home.png"/>
        <img src="resource/bca.png"/>

</div>

In your html theme-dark class is not a parent class of nivo-controlNav

 <div class="slider-wrapper theme-dark">  
    <div id="slider">
    <img src="resource/bca.png"/>
    <img src="resource/home.png"/>
    <img src="resource/bca.png"/>
    </div>

 </div>