htmlcsssliderpositionbxslider

Positioning custom arrows in bxSlider

I implemented custom arrows for bxslider per this Github answer: BX Slider custom controls

I'm looking to place the arrows on top of the slider images, though, and having difficulty implementing this.

What it looks like now: enter image description here What I want: enter image description here

I've tried applying position: relative to .bxNext, and position: absolute to .slider, but that didn't work.

$(document).ready(function(){
      $('.slider').bxSlider({
      auto: true,
      pause: 3000,
       mode: 'fade',
       speed: 1200, 
      pager: false,
      controls: true,
           nextSelector: '.bxNext',
     prevSelector: '.bxPrev',  
          nextText: '<i class="fa fa-arrow-circle-right fa-3x"></i>',
     prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>'
});
    });


.bxNext {
  float: right;
}





  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<section class="conC"> 


  <ul class="slider" style="padding:0px !important;">



    <li><img src="img/image1.png">
    <div class="caption1"><p>image1</p></div>
    </li>

    <li> <img src="img/image2.png">
    <div class="caption2"><p> image2 </p> </div>
    <div class="caption3">caption </div>
    </li>

  <li><img src="img/image3.png">
    <div class="caption1"><p>image3</p></div>
    </li>

 </ul>



  <div class='controls'>
    <a href='#' id='PREV' class='bxPrev'></a>
    <a href='#' id='NEXT' class='bxNext'></a>
  </div>



</section>
Solution

  • You need to position the arrows absolute inside a slider wrapper that has a relative positioning.

    I set up an example: jsfiddle

    .controls {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
#slider-wrapper {
  position: relative;
}

    Hope this helps you further.