在 bxSlider 中定位自定义箭头

Question

我根据这个 Github 答案为 bxslider 实现了自定义箭头：

不过，我希望将箭头放在滑块图像的顶部，但很难实现。

现在的样子：我想要的是：

我试过将 position: relative 应用到 .bxNext，将 position: absolute 应用到 .slider，但这没有用。

$(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>

Answer 1

您需要将箭头绝对定位在具有相对定位的滑块包装内。

我举个例子：jsfiddle

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

希望这对你有进一步的帮助。

在 bxSlider 中定位自定义箭头

Positioning custom arrows in bxSlider

html

css

slider

position

bxslider