Question

我想制作一个带有$539/year (Professional) or $2999/year (Enterprise)滑块的滑块，滑块导航是没有滑动的。我有两个导航元素：

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

当我更改right的{{1}}属性时，会转到父元素下，并且无法正常显示。

JQuery Swiper plugin

以下是我预期结果的图片： Here is a JsFiddle example.

Answer 1

您可以在父元素中添加填充并设置导航位置

.swiper-container {
   padding: 0 30px;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left:0;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right:0;
}

更新了Demo

Answer 2

尝试提供更高级别的.swiper-button-next

的z-index

更改绝对元素的CSS位置

2 个答案: