在 bxSlider 中定位自定义箭头
Positioning custom arrows in bxSlider
我根据这个 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>
您需要将箭头绝对定位在具有相对定位的滑块包装内。
我举个例子:jsfiddle
.controls {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
}
#slider-wrapper {
position: relative;
}
希望这对你有进一步的帮助。
我根据这个 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>
您需要将箭头绝对定位在具有相对定位的滑块包装内。
我举个例子:jsfiddle
.controls {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
}
#slider-wrapper {
position: relative;
}
希望这对你有进一步的帮助。