Flexslider的固定大小

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

来源

2012-11-02 Shawn Walton

你有没有尝试添加溢出：隐藏到div你添加了吗？ – coopersita

比方说，您通过200像素想要的200像素的固定尺寸。在flexslider.css文件中的这些属性添加到下面的选择，你应该是好去：

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

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

希望这有助于！

来源

2012-11-02 21:51:25

这似乎工作得很好，但非方形图像可能会变形。有没有办法调整图像的大小以自动适应该方块而不失真？ –

您指定了需要固定的高度和宽度，以便Flexslider不会调整大小。为了适应不同比例的图像，Flexslider必须改变其尺寸以适应新的图像。我给你的代码可以更改为固定大小以适应你的布局（例如：960 x 540），但它依赖于每个图像具有相同的固定大小。有没有一种方法可以在照片编辑器中重新裁剪和调整图像大小以解决此问题？ –

我从API中抽取这些各种图像，所以我无法用Photoshop或其他类似的方法调整它们的大小。对不起，我不清楚：/ –

与如下，以在两个滑块与不同尺寸的具体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>

来源

2013-03-24 23:26:59

动态高度怎么样？ – mbb

如果每张幻灯片都有自己的ID，那么最好不要使用内联CSS。 – cfx

与类“.flex视口”元素是幻灯片的容器，那个元素将他的高度调整到集合中较高的图像上，技巧是将所有图像高度设置为0，除了当前幻灯片中的那个元素在类别“.flex-active-slide”中的li元素内。当幻灯片交换位置时，flexslider脚本会切换，关于这个技巧唯一不好的地方是该类的切换发生在新幻灯片放入新位置后出现一个口吃，但是您可以通过使用一些JavaScript绑定来处理一些toggleClass对触发幻灯片更改的相同事件有帮助。

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

height: 0 !important; 
}

来源

2014-04-12 05:07:35 Lu32

不确定这个版本与哪个版本相关，但是当前的版本我没有看到flex-viewport类，所以只需将其添加到您的lis的封装器即可。我的幻灯片（默认），但可以在配置中覆盖它。 – Evan

删除

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(); 
      }, 
      });

来源

2016-07-29 17:04:28

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

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

来源

2017-04-11 05:40:11

Flexslider的固定大小

回答

相关问题