Flexslider：如何调整 .flex-viewport 以显示多张图像而不是一张？答案

【问题标题】：Flexslider: how to adjust .flex-viewport to show several images instead of one?Flexslider：如何调整 .flex-viewport 以显示多张图像而不是一张？
【发布时间】：2014-11-12 02:39:42
【问题描述】：

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

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

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

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

有什么方法可以让.flex-viewport 显示多张图片而不是一张。

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

【问题讨论】：

标签： jquery flexslider

【解决方案1】：

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

下面我粘贴了一个代码 sn-p，我用它来动态生成 Flexslider'a .flex-viewport 的高度，以便它始终等于选定的元素（在我的例子中是 .flexslider）。

该解决方案使垂直滑块（和.flex-viewport）在“准备好”、“加载”和“调整大小”调整大小事件时调整其高度时完全响应。垂直滑块将始终显示 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');
}

【讨论】：