固定的Flexslider大小

Question

我正在使用Flexslider从API中提取不同大小的产品图像。我一直将它们放入Flexslider的<ul>中，但这些不同的图像大小并不能很好地播放。当图像有不同的高度时，Flexslider可以很好地动画，但我想让Flexslider有一个固定的高度和宽度来适应我的布局。我试着把整个东西放到一个固定大小的<div>中，但Flexslider完全忽略了它，并溢出到布局的其余部分。有没有办法调整图片的大小，这样Flexslider就不会调整大小了？

Answer 1

假设你想要一个200px x 200px的固定大小。将这些属性添加到flexslider.css文件中的以下选择器中，您就可以开始工作了：

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

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

希望这能有所帮助！

Answer 2

带有类".flex-viewport“的元素是幻灯片的容器，该元素将他的高度调整到集合中较高的图像，诀窍是将所有图像的高度设置为0，除了当前幻灯片中具有”.flex-active- toggleClass“类的li元素中的那个图像，当幻灯片交换位置时，弹性滑块脚本切换。这个技巧唯一不好的地方是，类的切换发生在新幻灯片被放在新位置之后，然后发生卡顿，但您可以通过使用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,
});