Question

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

我在代码行中找到了进行此调整的内容：

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

并在此处设置视口高度

 slider.viewport.height(getViewportHeight());

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

感谢。

Answer 1

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

我不知道你是否想要一个多个幻灯片的旋转木马，或者你是否想让它水平或垂直滑动，因为演示不起作用。所以我做了一个滑动垂直旋转木马。
我已启用adaptiveHeight向您显示高度的动态功能，默认情况下，bxSlider只保留最高幻灯片的大小。
所有这些功能都是选项，因为它们是可选的选项......可选。
包括2种风格但已禁用。如果要使用该高度修复脚本，则使用第一个。第二个规则是将控制箭头移动到顶部。如果您喜欢垂直模式下的滑块，那么您很可能希望将箭头控制在顶部。如果设置在中间的默认位置，则每次高度发生变化时都会跳转。

Fiddle

<强>段

＆＃13;

$(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);
*/

＆＃13;

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

＆＃13;

<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>

＆＃13;

更改在bxSlider

1 个答案: