2013-08-04 2 views
3

Я установил FlexSlider от WooThemes на моей странице и <div class="flex-viewport" добавляется на сайт автоматически через jquery.flexslider.js на линии 621.WooThemes - FlexSlider: Высота гибкого-видовом

Я должен регулировать высоту неподвижного значение 790px, но высота как-то рассчитывается. Я ищу строку в flexslider.js, где высота добавляется к .flex-viewport. Кто-нибудь знает, как я могу добавить фиксированную высоту здесь?

Спасибо.

Код:

<div id="slider" class="flexslider"> 
<div class="flex-viewport" style="overflow: hidden; position: relative; height: 710px; "> 
    <ul class="slides" style="width: 1200%; -webkit-transition: 0.6s; -webkit-transform: translate3d(-4900px, 0px, 0px); "> 

ответ

6

В основном FlexSlider не имеет функции фиксированной высоты в соответствии с его document. Но я нашел код для решения этой проблемы here in the official repository, вычислив самую высокую высоту, чтобы обеспечить высоту слайда.

$(document).ready(function() { 
    fixFlexsliderHeight(); 
}); 

$(window).load(function() { 
    fixFlexsliderHeight(); 
}); 

$(window).resize(function() { 
    fixFlexsliderHeight(); 
}); 

function fixFlexsliderHeight() { 
    // Set fixed height based on the tallest slide 
    $('.flexslider').each(function(){ 
     var sliderHeight = 0; 
     $(this).find('.slides > li').each(function(){ 
      slideHeight = $(this).height(); 
      if (sliderHeight < slideHeight) { 
       sliderHeight = slideHeight; 
      } 
     }); 
     $(this).find('ul.slides').css({'height' : sliderHeight}); 
    }); 
} 
-1

Просто перепишите высоту с помощью css. & не забудьте поставить «! Important».

#slider .flex-viewport{height:790px!important;} 
0
$(document).on('click', '.flex-next, .flex-prev', function() { 

    $('#slider .flex-viewport').animate({ height: $('.flex-active-slide img').height() }, 'fast'); 

});