Controling height of bxslider and bxsldier-pager

Question

I'm using bxslider to show my images. The thing is I cannot handle height of bxslider properly. I have main picture and thumbnail for scrolling images like this.

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

I tried to set my css like

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

But this css changes height of the thumbnail also. So, I wrap each <ul> with <div class="main_pic"></div> and <div class="thumb_pic"></div> and change it's height like

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

However, It breaks my pictures like missing some part of picture, or overflowing div by size of picture. Any suggestions? Thanks.

Answer 1

The bxsilder code calculates the height of the tallest image in its children. If you correctly size your images using something like Photoshop you should not have to modify the height at all.

Here is a snippet from the bxslider source code.

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