Basic Usage (jQuery) Basic Usage (No-jQuery) Define Slides HTML Code Slider with Loading Screen (jQuery) Slider with Loading Screen (No-jQuery) Slider with Bullet Navigator (jQuery) Slider with Bullet Navigator (No-jQuery) Slider with Arrow Navigator (jQuery) Slider with Arrow Navigator (No-jQuery) Slider with Thumbnail Navigator (jQuery) Slider with Thumbnail Navigator (No-jQuery) Slider with Slideshow (jQuery) Slider with Slideshow (No-jQuery) Slider with Fixed/Static Element (e.g. QR code) Pass html Validation (against w3c standards) Reference - Options Reference - UI Definition Reference - API Tip - Arrange Layout & Adjust Size Tip - Adjust Speed Tip - Make Responsive Slider Tool - Slideshow Transition Viewer
Arrow Navigator provides 'Previous' and 'Next' buttons, it enables user navigate to previous or next slide.
Jssor Slider comes with 30+ themes, user can copy arrow navigator skin from any of 30+ themes (look for 'skin\arrow-*.html' in the download package).
Slider with Arrow Navigator (No-jQuery)
1. Javascript Code
<script src="jssor.slider.min.js"></script>
<script>
    jssor_slider1_init = function (containerId) {
        var options = {
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
</script>
Reference: Arrow Navigator Options
Ad
2. HTML code + trigger
<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>
    <!-- Arrow Navigator Skin Begin -->
        <!-- open 'skin\arrow-...source.html', copy and paste arrow navigator skin here -->
    <!-- Arrow Navigator Skin End -->
    <!-- Trigger -->
    <script>jssor_slider1_init('slider1_container');</script>
</div>
Tip: adjust arrow navigator position
#1. Adjust arrow navigator position with css
<!-- Arrow Navigator Skin Begin -->
    ...
    <!-- Arrow Left -->
    <span u="arrowleft" class="jssora01l" style="top: 123px; left: 8px;"></span>
    <!-- Arrow Right -->
    <span u="arrowright" class="jssora01r" style="top: 123px; right: 8px;"></span>
    ...
<!-- Arrow Navigator Skin End -->
Reference: Arrow Navigator UI Definition

#2. In Addition, you can use option to auto center navigator
<script>
jssor_slider1_init = function (containerId) {    
        var options = {
            ...
            $ArrowNavigatorOptions: {
                ...
                //[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: Arrow Navigator Options