javascript - 更改调整 bxSlider 中的高度

Question

我正在尝试更改 bxslider 高度调整的百分比而不是像素，但我对此有点迷茫。

我在进行此调整的代码行中发现:

slider.viewport.css('height', getViewportHeight());

在这里，设置视口(viewport)高度

 slider.viewport.height(getViewportHeight());

CSS 百分比的准确结果，因为使用了响应式布局

谢谢。

Answer 1

当我遇到 bxSlider 的高度在加载时被 chop 的问题时，我写了一个快速补丁，基本上删除了高度属性和 .bx-viewport 的属性，这允许我的 CSS 规则覆盖高度到我想要的任何东西。该脚本是最后一个 block 。我将其注释掉，因为您可能不需要它。

• 我不知道您是想要多张幻灯片的轮播，还是希望它水平或垂直滑动，因为演示无法正常运行。所以我把它做成了一个单张幻灯片的垂直旋转木马。

• 我启用了 adaptiveHeight 来向您展示它的高度动态功能，默认情况下 bxSlider 只保持最高幻灯片的大小。

• 所有这些功能都是选项，因为它们是使它们成为可选...可选的选项。

• 包含 2 种样式但已禁用。如果您想使用该高度修复脚本，则使用第一个。第二个规则 id 将控制箭头移动到顶部。如果您喜欢垂直模式下的 slider ，那么您很可能希望将箭头控件放在顶部。如果设置在中间的默认位置，每次高度变化时它都会跳动。

Fiddle

片段

$(document).ready(function() {
  var bx = $('.bxslider').bxSlider({
    mode: 'vertical',
    adaptiveHeight: true,
    adaptiveHeightSpeed: 750,
    slideWidth: 400,
    minSlides: 1,
    maxSlides: 1,
    moveSlides: 1
  });
});

/*
document.documentElement.addEventListener('DOMContentLoaded', function(event) {
  event.stopPropagation();
  var tgt = document.querySelector('.bx-viewport');
  //tgt.removeProperty('height');
  //tgt.removeAttribute('height');
  //tgt.setAttribute('height', '100%');
}, false);
*/

img {
  display: block;
  margin: 0 auto
}
/*
.bx-viewport {
  height:90vh !important;
  }
*/
/*
.bx-controls a {
   top:.05% !important;
}
*/

<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>


<div class="bxslider">
  <div>
    <iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe>
  </div>
  <div>
    <img src="http://placehold.it/350x666?text=350x666.png" id="image2">
  </div>
  <div>
    <iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe>
  </div>
  <div>
    <img src="http://placehold.it/350x350?text=350x350.png" id="image4">
  </div>
</div>