How to create navigation arrow in Owl carousel

Question

I am struggling to implement the very basic features of Owl Carousel. In my carousel user can only browse the slides by select and hold one image and drag. it gives no hints to the user that there are more images which they can actually browse and drag. All I want is to put a previous/ next arrow so people can click the arrow and to view more images in the carousel. But I am struggling to do that probably because the carousel implemented in a complicated way.

My site is on Wordpress but the Owl carousel plugin has not been used. Its been implemented manually. The images in the carousel are fetched from the database.

This is how the carousel getting the images . File name shortcode.php

function carousel_register( $atts, $content = null ) {

extract(shortcode_atts(array(
  'group_id' => ''
), $atts));

if(isset($group_id)){
    $to_add = '?g='.$group_id[0];
}else{
    $to_add = '';
}



$output = '<section id="carousel" class=""><div class="container" align="center"><h2>Simply Choose Your Agent</h2><div id="agents-carousel" class="agents-carousel">';

foreach ($data_json['data'] as $k => $v) {

        if ($v['onlinestatus'] == 1) {
            $online = "Online";
        }
        if ($v['onlinestatus'] == 0) {
            $online = "Offline";
        }

        $name = preg_replace("/[^A-Za-z0-9]/", "", $v['display_name']);

        $output .= '<div class="item"><a href="'.get_site_url().'/'.strtolower($v['display_name']).'"><div class="image-carousel"><img src="'.get_site_url().'/profile-image/medium/'.$v['id_user'].'/'.$name.'.png"></div></a></div>';
}
$output .='</div><div class="cta"><a href="'.get_site_url().'/our-readers/">discover all readers</a></div></div></section>';
return $output;

   }


add_shortcode( 'carousel', 'carousel_register' );

there are nearly 25 images only 5 of them are showing. They can be dragged by grabbing them. All I want to add navigation arrows and dots .

.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
 .owl-carousel{
    display: none;
    position: relative;
    width: 100%;
   -ms-touch-action: pan-y;}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
   -webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 100%;}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;}
   .owl-carousel .owl-item{
    float: left;}
.owl-controls .owl-page, .owl-controls .owl-buttons div{
    cursor: pointer;}
.owl-controls {
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.grabbing {
    cursor:url(grabbing.png) 8 8, move;}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);}

The css file is referenced in the header and the javascript file is referenced in the footer.

Edit : I have set value 0 for navigation in the javascript file. Now the arrow have been appeared. But they appeared in the center o the carousel. How to put them in the correct place i.e previous arrow in the left side of the carousel and next arrow in the right side of the carousel.

a.fn.owlCarousel.options = {
    items: 5,
    itemsCustom: !1,
    itemsDesktop: [ 1199, 4 ],
    itemsDesktopSmall: [ 979, 3 ],
    itemsTablet: [ 768, 2 ],
    itemsTabletSmall: !1,
    itemsMobile: [ 479, 1 ],
    singleItem: !1,
    itemsScaleUp: !1,
    slideSpeed: 200,
    paginationSpeed: 800,
    rewindSpeed: 1e3,
    autoPlay: !0,
    stopOnHover: !1,
    navigation: !0,
    navigationText: [ "prev", "next" ],
    rewindNav: !0,
    scrollPerPage: !1,
    pagination: !0,
    paginationNumbers: !1,
    responsive: !0,
    responsiveRefreshRate: 200,
    responsiveBaseWidth: b,
    baseClass: "owl-carousel",
    theme: "owl-theme",
    lazyLoad: !1,
    lazyFollow: !0,
    lazyEffect: "fade",
    autoHeight: !1,
    jsonPath: !1,
    jsonSuccess: !1,
    dragBeforeAnimFinish: !0,
    mouseDrag: !0,
    touchDrag: !0,
    addClassActive: !1,
    transitionStyle: !1,
    beforeUpdate: !1,
    afterUpdate: !1,
    beforeInit: !1,
    afterInit: !1,
    beforeMove: !1,
    afterMove: !1,
    afterAction: !1,
    startDragging: !1,
    afterLazyLoad: !1
};

Answer 1

I give you a example but i used owl carousal 2

here

var heroSlider = $('#header-slider');
heroSlider.owlCarousel({    
    margin:0,
    autoplay:true,
    autoplayTimeout:4000,
    smartSpeed:2000,
    dots:true,
    loop:true,      
    responsiveClass:true,
    items:1,
    rtl: true,
    nav: true,
     navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],

});

for the correct position we need to set the positions of the arrows.By styling them.

something like this

.owl-prev {
    left: 0;
    position: absolute;
}

.owl-next {
    position: absolute;
    right: 0;
}