Search code examples
javascriptjquerybxslider

bxSlider cotrols true but not showing

I'm currently using bxSlider , however it all goes perfect right now , the only problem is that I have controls:true 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.

enter image description here

html: 

   <div class="headerSliderHolder"> 
                        <ul class="bxslider">
                            <li>
                                <img src="img/slider_1.png" alt="Slider_1">

                            </li>
                            <li>
                                <img src="img/slider_2.png" alt="Slider2">
                            </li>
                            <li>       
                                <img src="img/slider_3.png" alt="Slider3">
                            </li>
                        </ul>
 </div>

js:

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

  • If you can click the arrow points but you cant see the arrows themself then it looks like you are not loading the images for the arrow.

    In the regular bxslider setup the css points to the images in the 'images' folder like this:

    .bx-wrapper .bx-prev {
    left: 10px;
    background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}

    So you need to make sure that in your juqery.bxslider.css you point to the right location of 'images/controls.png'