Flexslider:如何调整.flex-viewport来显示多张图片而不是一张？

Question

我需要在一个网站上实现一个Flexslider，并调整它的行为，使滑块垂直旋转，并始终显示六张图片，而不是一张。

让Flexslider垂直旋转是没有问题的。但是，我不能让它显示多张图片。

我注意到Flexslider div是作为所有幻灯片的包装器添加的，当.flex-viewport处于“幻灯片”模式时。

.flex-viewport具有由JavaScript动态添加的高度属性，该属性等于正在显示的图像的高度。

让.flex-viewport显示的不是一个而是多个图像的方法是什么？

下面是我想要达到的效果。感谢您的帮助！

​

​

Answer 1

有时得不到直接的答案是一件好事。这迫使我找到了自己的解决方案。

下面我粘贴了一个代码片段，我用它来动态生成Flexslider的高度一个.flex-viewport，以便它总是等于一个选定的元素(在我的例子中是.flexslider)。

该解决方案使垂直滑块(和.flex-viewport)在"ready“、"load”和" resize“resize事件上调整高度时完全响应。垂直滑块将始终显示4张图片。

我希望它能帮助一些人。

jQuery(document).ready(function() {
    setTimeout(
    function() 
    {
        adjustLeaderHeight();

    }, 1000);

});

jQuery(window).load(function() {
    adjustLeaderHeight();

});

jQuery(window).resize(function() {
    adjustLeaderHeight();

});


/*
 * Function that adjusts the height of the rotating leader on the home page
 */
function adjustLeaderHeight() {
    var targetHeight = jQuery('.flexslider').css('height');
    targetHeight = parseInt(targetHeight, 10);
    jQuery('.flex-viewport').attr('style', 'height:' + targetHeight + 'px' + ' !important;' + '        overflow: hidden; position: relative');   
    jQuery('.rotating-leader img').attr('style', 'height: ' + targetHeight / 4 + 'px' + ' !important');
}

​

​