【问题标题】: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');
    }
    

    【讨论】:

      猜你喜欢
      • 2021-11-30
      • 2014-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-06-29
      • 1970-01-01
      • 2013-06-11
      相关资源
      最近更新 更多