Flexslider 的固定大小

Question

我正在使用 Flexslider 从 API 中提取不同大小的产品图像。 我一直将它们放入 Flexslider 的<ul> ，但是这些不同的图像尺寸不能很好地发挥作用。 当图像具有不同的高度时，Flexslider 可以很好地动画，但我想让 Flexslider 具有固定的高度和宽度以适应我的布局。 我尝试将整个内容放入固定大小的<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，除了当前幻灯片中的图像高度在 li 元素中，类为“.flex-active-slide”，当幻灯片交换位置时 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>