bxSlider cotrols true but not showing
<p>I'm currently using bxSlider , however it all goes perfect right now , the only problem is that I have <code>controls:true</code> for my slider , but they are hidden.I want to put arrows as controls.There's a folder with controls arrows but dont know how to implement them in jquery as an img.When I hover on the left and right side , my cursor is being like ( clickable ) but those controls are hidden.Here's my html+js code.</p>

<p><a href="https://i.stack.imgur.com/QC5XV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QC5XV.jpg" alt="enter image description here"></a></p>

<p>html: </p>

<pre><code>   &lt;div class="headerSliderHolder"&gt; 
                        &lt;ul class="bxslider"&gt;
                            &lt;li&gt;
                                &lt;img src="img/slider_1.png" alt="Slider_1"&gt;

                            &lt;/li&gt;
                            &lt;li&gt;
                                &lt;img src="img/slider_2.png" alt="Slider2"&gt;
                            &lt;/li&gt;
                            &lt;li&gt;       
                                &lt;img src="img/slider_3.png" alt="Slider3"&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>

<p>js:</p>

<pre><code>document.addEventListener("DOMContentLoaded",function(){
    $(document).ready(function(){
          $('.bxslider').bxSlider({
                mode:'fade',
                controls:true,
                responsive:true,
                auto:true,
                speed:800,
                pause:2500
              }
          );         
});
</code></pre>