Development
Slider with Bullet Navigator
1. jQuery Format

<script src="jquery.min.js"></script>
<script src="jssor.slider.min.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = {
            $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
        <!-- Navigator Skin Begin -->
        <!-- open 'skin\bullet-...source.html', copy and paste bullet navigator skin here -->
    <!-- Navigator Skin End -->
</div>
Ad
2. Standard Format
<script src="jssor.slider.min.js"></script>
<script>
    jssor_slider1_init = function (containerId) {
        var options = {
            $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
    <!-- Navigator Skin Begin -->
        <!-- open 'skin\bullet-...source.html', copy and paste bullet navigator skin here -->
    <!-- Navigator Skin End -->
    <!-- Trigger -->
    <script>jssor_slider1_init('slider1_container');</script>
</div>
Tip: adjust navigator position
#1. Adjust bullet navigator position with css
<!-- Bullet Navigator Skin Begin -->
    ...
    <div u="navigator" class="jssorb01" style="bottom: 16px; right: 10px;">
        ...
    </div>
<!-- Bullet Navigator Skin End -->
Reference: Bullet Navigator UI Definition

#2. In addition, you can use option to keep bullet navigator auto center
<script>
jssor_slider1_init = function (containerId) {    
        var options = {
            ...
            $BulletNavigatorOptions: {
                ...
                //[Optional] Auto center navigator in parent container
                //, 0 None, 1 Horizontal, 2 Vertical, 3 Both
                $AutoCenter: 1,
                ...
            },
            ...
        };
        var jssor_slider1 = new $JssorSlider$(containerId, options);
};
</script>
Reference: Bullet Navigator Options