我正在使用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个锚点:PREVNEXT


将以下内容添加到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

09-09 22:15
查看更多