我正在使用bx Slider JQuery插件。我配置adaptiveHeight: false
。此配置在水平模式下可以正常工作。但是,没有垂直和淡入淡出的工作模式。该滑块的高度根据滑块图像而增加和减小,但是我想要一个固定的height.How来解决此问题。
Fiddle
我的配置是:
$('.slider').bxSlider({
adaptiveHeight: false,
auto: false,
autoControls: false,
autoDirection: "",
autoHover: false,
autoStart: false,
captions: false,
easing: "linear",
hideControlOnEnd: false,
infiniteLoop: false,
maxSlides: 1,
minSlides: 1,
mode: "vertical",
nextSelector: "#slider-next",
nextText: "<img src= style="width:35px;height:35px;"/>",
pager: false,
pause: false,
prevSelector: "#slider-prev",
prevText: "<img src= style="width:35pxpx;height:35px;"/>",
randomStart: false,
slideMargin: 10,
slideWidth: 150,
speed: 1000,
startSlide: 0
});
最佳答案
更新资料
OP表示需要显示不同高度的图像...但是需要固定高度。因此,我收集的是一个固定的滑块高度,该滑块高度可以在垂直流中显示不同高度的图像。挑战在于使控制箭头停留在一个位置并能够根据调整大小进行调整。
CSS的变化太多,无法说明使用它们的每个原因,因此我们将介绍最重要的部分,如果还有其他问题,可以逐案解决。
.box { height: 100vh; overflow-y: scroll; }
.bx-view-port { height: 100vh; }
因为世界上大多数数字媒体都是水平方向的,所以我认为使用垂直流将足够的思想投入到好的UX中。
jquery.bxslider.css
中唯一的高度属性是图标和加载程序的。生成的包装器bx-view-port
是宽度和高度的主要参考,因此当浏览器更新后bxSlider的高度变为0时,请记住这一点。为整个滑块(.box
)添加包装器有助于稳定垂直过渡,并为下一个添加项.bx-nav
提供父级。最令人烦恼的是上一步和下一步的箭头控件。我通常将它们重新放置在顶部,因为它是滑块在垂直模式下唯一稳定的区域。在此演示中,我们自定义箭头控件:
将以下两个选项添加到bxSlider JS / jQ:
prevSelector: '.prev',
nextSelector: '.next',
在HTML中,将此添加到
bxSlider
元素下:<nav class="bx-nav">
<div class="prev"></div>
<div class="next"></div>
</nav>
这些步骤将建立一套易于设置,定位和样式化的新控件。现在,您应该有2个锚点:
PREV
和NEXT
。将以下内容添加到bxSlider选项:
prevText: "<i class='fa fa-nav fa-fw fa-chevron-circle-left'></i>",
nextText: "<i class='fa fa-nav fa-fw fa-chevron-circle-right'></i>",
接下来,将此
<link>
添加到</head>
:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
现在,那些la脚的锚应该看起来类似于原始控件。我们要做的是编写一个生成
<i>
的字符串(就像jQuery的方法创建具有所有属性和值的元素一样),并将其追加到相应的元素-.prev
和.next
上。圆滑的字体图标是对Font Awesome。
Plunker / README.md
片段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35788901</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
.box { height: 100vh; overflow-y: scroll; }
.bx-view-port { height: 100vh; }
img { margin: 0 auto; }
.bx-nav { position: absolute; width: 356px; height: 48px; top: calc(50% - 24px); left: calc(50% - 178px); margin: 0 auto; }
.prev, .next { position: absolute; width: 48px; line-height: 48px; z-index: 9999; font-size: 48px; opacity: .4; color: #0FF !important; }
.prev:hover, .next:hover { opacity: 1; color: #00D !important; cursor: pointer;}
.prev { left: 0; }
.next { right: 0; }
</style>
</head>
<body>
<section class="box">
<ul class="bxslider">
<li> <img src="https://placehold.it/150x150/fff/e00" /> </li>
<li> <img src="https://placehold.it/300x300/040/fff" /> </li>
<li> <img src="https://placehold.it/450x150/000/0ff" /> </li>
<li> <img src="https://placehold.it/300x300/cfc/000" /> </li>
<li> <img src="https://placehold.it/600x150/040/fff" /> </li>
<li> <img src="https://placehold.it/300x300/000/fff" /> </li>
</ul>
<nav class="bx-nav">
<div class="prev"></div>
<div class="next"></div>
</nav>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function () {
var bx = $('.bxslider').bxSlider({
mode: 'vertical',
speed: 500,
slideMargin: 20,
infiniteLoop: true,
slideSelector: 'li',
pager: false,
prevSelector: '.prev',
nextSelector: '.next',
prevText: "<i class='fa fa-nav fa-fw fa-chevron-circle-left'></i>",
nextText: "<i class='fa fa-nav fa-fw fa-chevron-circle-right'></i>",
minSlides: 3,
moveSlides: 1
});
});
</script>
</body>
</html>
旧
在使用垂直模式时,看起来好像忽略了默认高度。我在不同情况下都遇到了身高问题,但看来我的情况并不是控制身高的唯一配置。这是我应用于驯服bxSlider的高度跳跃的其他CSS。我还将“ min / maxSlides”设置为3。轮播看起来好像是垂直的,它不会根据视口的高度调整其幻灯片。
Fiddle