How can i customize navigation dots in fullpage.js?

Question

I am using fullpage.js in my project. I used div id menu for navigation and menu, but I want to customize the navigation dots on the right side of the screen so that the last dot navigate to the first page while the first dot navigates to the last page.

I would like to arrange the navigation dots in descending order. Is it possible?

 new fullpage('#fullpage',{ autoScrolling: true, navigation: true, anchors: ['part1','part2','part3','part4','part5'], navigationTooltips:['5','4','3','2','1'], showActiveTooltip: true, })

 <ul id='menu' style="list-style: none; padding-left: 0;"> <li data-menuanchor="part1"><a href="#part1" style="display: none;"></a></li> <li data-menuanchor="part2"><a href="#part2" style="padding-top: 0px;"><span>OUR SERVICES</span></a></li> <li data-menuanchor="part3"><a href="#part3" ><span>OUR COMPANY</span></a></li> <li data-menuanchor="part4"><a href="#part4" ><span>SWIFT CONSERVATION</span></a></li> <li data-menuanchor="part5"><a href="#part5" ><span>BLOGS</span></a></li> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </ul>

Answer 1

You can basically overwrite the default CSS with your own. For example, to use red bullets:

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: red;
}

You can see the styles applied by default on the css file: https://github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.css

You can also find a tens of predefined navigaiton bullets to purchase on the fullpage.js extensions page.