在bxSlider中定位自定义箭头

编程问答 2022-06-09

问题描述

我根据以下Github答案为bxslider实现了自定义箭头：BX Slider custom controls

不过，我希望将箭头放置在滑块图像的顶部，并且难以实现。

现在看起来像什么：

enter image description here

我想要的是：

enter image description here

我尝试将position：相对于.bxNext以及position：absolute应用于.slider，但这没用。

HashMap

解决方法

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

我举了一个例子：jsfiddle 

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

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

bxsliderhtmlpositionpositionsliderslider