Flexslider：如何调整.flex-viewport来显示多个图像而不是一个？

Question

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

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

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

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

让.flex-viewport显示的不仅仅是几张图片的方法是什么。

以下是我想要达到的效果。谢谢你的帮助！

Answer 1

有时候不能立即得到答案是件好事。这迫使我找到自己的解决方案。

下面我粘贴了一段代码片段，用于动态生成Flexslider＆＃39; a .flex-viewport的高度，以便它始终等于所选元素（在我的情况下为.flexslider）。

该解决方案使垂直滑块（和.flex-viewport）完全响应，因为它在＆＃34;准备好＆＃34;，＆＃34;加载＆＃34;并且＆＃34;调整大小＆＃34;调整事件大小。垂直滑块将始终显示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');
}