更改调整 bxSlider 中的高度

Question

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

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

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

在这里，设置视口高度

 slider.viewport.height(getViewportHeight());

由于使用响应式布局

，结果准确 css 百分比

谢谢。

Answer 1

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

我不知道你是想要多张幻灯片的轮播，还是想要它水平或垂直滑动，因为演示没有运行。所以我把它做成了一个单张幻灯片的垂直旋转木马。
我启用了 adaptiveHeight 来向您展示它的高度动态功能，默认情况下 bxSlider 只保持最高幻灯片的大小。
所有这些功能都是选项，因为它们是使它们可选的选项...可选。
包含 2 种样式，但已禁用。如果您想使用该高度修复脚本，则使用第一个。第二个规则 id 将控制箭头移动到顶部。如果您喜欢垂直模式下的滑块，那么您很可能希望将箭头控件放在顶部。如果设置在中间的默认位置，每次高度变化都会跳动。

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>

更改调整 bxSlider 中的高度

Change adjust the height in bxSlider

javascript

bxslider