固定尺寸的Flexslider

Question

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

Answer 1

假设你想要一个200px到200px的固定大小.将这些属性添加到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;
}