控制滑块和 bxslider-pager 的高度

Question

我正在使用 bxslider 来显示我的图像。问题是我无法正确处理 bxslider 的高度。我有像这样滚动图像的主图和缩略图。

<div class="main_pic">
                <ul id="bxslider">

                  <li><img src="<%= @house.main_img %>" alt="" title="" /> </li>


                  <% @users_img.each do |i| %>
                    <li><img src="<%= i.img %>"/> </li>
                  <% end %>
                </ul>
              </div>
    <!-- The thumbnails -->
              <div class="thumb_pic">
                <ul id="bxslider-pager">

                  <li data-slideIndex="0"><a href=""><img style="max-height:55px" src="<%= @house.main_img %>" ></a></li>

                  <% @indexcounter=1 %>
                  <% @users_img.each do |i| %>
                    <li data-slideIndex="<%= @indexcounter %>"><a href=""><img style="max-height:55px" src="<%= i.img %>" ></a></li>
                    <% @indexcounter += 1 %>
                  <% end %>
                </ul>
              </div>

我尝试将我的 css 设置为

.bx-wrapper, .bx-viewport, .bx-wrapper {
    height: 450px !important;
}

但是这个 css 也会改变缩略图的高度。所以，我用 <div class="main_pic"></div> 和 <div class="thumb_pic"></div> 包裹每个 <ul> 并改变它的高度，比如

.main_pic {
        height: 350px !important;
        max-height:350px;
    }
    .thumb_pic {
        height: 50px !important;
        max-height:50px;
    }

但是，它破坏了我的图片，例如缺少图片的某些部分，或者图片尺寸溢出 div。有什么建议么？谢谢。

Answer 1

bxsilder 代码计算其子项中最高图像的高度。如果您使用 Photoshop 之类的工具正确调整图像大小，则根本不需要修改高度。

这是 bxslider 源代码的一个片段。

// if not "vertical" mode, calculate the max height of the children
height = Math.max.apply(Math, children.map(function() {
  return $(this).outerHeight(false);
}).get());

https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js

控制滑块和 bxslider-pager 的高度

Controling height of bxslider and bxsldier-pager

css

image

carousel

bxslider