javascript - Flexslider 的固定尺寸

Question

我正在使用 Flexslider 从 API 中提取不同大小的产品图像。我一直把它们扔进 Flexslider 的<ul>，但是这些不同的图像尺寸不能很好地播放。当图像具有不同的高度时，Flexslider 可以很好地制作动画，但我希望 Flexslider 具有固定的高度和宽度以适合我的布局。我已经尝试将整个东西放入一个 fixed-size<div>中，但 Flexslider 完全忽略它并溢出到布局的其余部分。有没有办法调整图像大小以适应 Flexslider 不调整大小？

Answer 1

假设您想要 200 x 200 像素的固定大小。将这些属性添加到 flexslider.css 文件中的以下选择器中，您应该很高兴：

.flexslider {
    width: 200px;
    height: 200px;
}

.flexslider .slides img {
    width: 200px;
    height: 200px;
}

希望这可以帮助！

Answer 2

具有类“.flex-viewport”的元素是幻灯片的容器，该元素使他的高度适应集合中较高的图像，诀窍是将所有图像高度设置为 0，除了当前幻灯片中的那个当幻灯片交换位置时，​​在带有“.flex-active-slide”类的 li 元素内，该 flexslider 脚本切换，关于这个技巧的唯一坏处是，类的切换发生在新幻灯片放在新位置之后然后发生口吃，但您可以通过使用一些javascript将一些toggleClass绑定到触发幻灯片更改的同一事件来处理，这会有所帮助。

.flex-viewport  li:not(.flex-active-slide) img{ 

height: 0 !important;
}

Answer 3

通过脚本更改宽度说你的宽度为 400

$('.flex_up').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 400,
    itemMargin: 5,
}); 

Answer 4

消除

smoothHeight: true,

从

 jQuery('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            prevText: "",           
                    nextText: "",
            slideshow: false,
                    smoothHeight: true,
                    animateHeight: false,
            sync: "#carousel",
            start: function(){
                 jQuery('#slider ul.slides img').show(); 
            },
          });

Answer 5

使用特定 div 的样式选项设置大小，如下所示，有两个不同大小的滑块：

<div class="flexcontainer">
    <div id="first-slider" class="flexslider" style:"width:100px">
        <ul class="slides">
        ...
        </ul>
    </div> 
    <div id="second-slider" class="flexslider" style:"width:200px">
        <ul class="slides">
        ...
        </ul>
    </div> 
</div>