blocks|key|226119|text|假设你想要一个200px+x+200px的固定大小。将这些属性添加到flexslider.css文件中的以下选择器中，您就可以开始工作了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226120|.flexslider+{
++++width:+200px;
++++height:+200px;
}

.flexslider+.slides+img+{
++++width:+200px;
++++height:+200px;
}|code-block|syntax|javascript|226121|希望这能有所帮助！|226122|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Let's say you wanted a fixed size of 200px by 200px. Add these properties to the following selectors in the flexslider.css file and you should be good to go:</p>

<pre><code>.flexslider {
    width: 200px;
    height: 200px;
}

.flexslider .slides img {
    width: 200px;
    height: 200px;
}
</code></pre>

<p>Hope this helps!</p>


blocks|key|444210|text|使用特定div的样式选项设置大小，如下所示，有两个大小不同的滑块：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|444211|<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>|code-block|syntax|javascript|444212|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Set size with the style option of the specific div as below, with there is two slider with different size:</p>

<pre><code>&lt;div class="flexcontainer"&gt;
    &lt;div id="first-slider" class="flexslider" style:"width:100px"&gt;
        &lt;ul class="slides"&gt;
        ...
        &lt;/ul&gt;
    &lt;/div&gt; 
    &lt;div id="second-slider" class="flexslider" style:"width:200px"&gt;
        &lt;ul class="slides"&gt;
        ...
        &lt;/ul&gt;
    &lt;/div&gt; 
&lt;/div&gt;
</code></pre>


blocks|key|226201|text|带有类".flex-viewport“的元素是幻灯片的容器，该元素将他的高度调整到集合中较高的图像，诀窍是将所有图像的高度设置为0，除了当前幻灯片中具有”.flex-active-+toggleClass“类的li元素中的那个图像，当幻灯片交换位置时，弹性滑块脚本切换。这个技巧唯一不好的地方是，类的切换发生在新幻灯片被放在新位置之后，然后发生卡顿，但您可以通过使用javascript将一些toggleClass绑定到触发幻灯片更改的相同事件来处理。帮助你成为有用的人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226202|.flex-viewport++li:not(.flex-active-slide)+img{+

height:+0+!important;
}|code-block|syntax|javascript|226203|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The element with the class ".flex-viewport" is the container of the slides, that element adapt his height to the taller image in the set, the trick is set all images  height's to 0 except the one that is in the current slide which is inside the li element with the class ".flex-active-slide" that flexslider script toggle when slides exchange positions, the only bad thing about this trick is that the toggle of the class occurs after the new slide is put in the new position then a stutter occurs, but you can deal with that by using some javascript binding some toggleClass to the same event that trigger the slide change, help to be helpful.</p>

<pre><code>.flex-viewport  li:not(.flex-active-slide) img{ 

height: 0 !important;
}
</code></pre>


blocks|key|444293|text|删除|type|unstyled|depth|inlineStyleRanges|entityRanges|data|444294|smoothHeight:+true,|code-block|syntax|javascript|444295|从…|444296|+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();+
++++++++++++},
++++++++++});|444297|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Remove </p>

<pre><code>smoothHeight: true,
</code></pre>

<p>from </p>

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


blocks|key|226245|text|通过脚本将宽度更改为400|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226246|$('.flex_up').flexslider({
++++animation:+"slide",
++++animationLoop:+false,
++++itemWidth:+400,
++++itemMargin:+5,
});+|code-block|syntax|javascript|226247|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Change the width via script say your width to be 400</p>

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


<p>I'm using Flexslider to pull product images of varying sizes from an API. I've been throwing them into Flexslider's <code>&lt;ul&gt;</code>, but these varying image sizes don't play well. Flexslider nicely animates when images have different heights, but I want to have Flexslider have a fixed height and width to fit in my layout. I've tried putting the whole thing into a fixed-size <code>&lt;div&gt;</code>, but Flexslider ignores it completely and overflows into the rest of the layout. Is there some way to resize images to fit so that Flexslider doesn't resize?</p>


Fixed size of Flexslider

我正在使用Flexslider从API中提取不同大小的产品图像。我一直将它们放入Flexslider的<ul>中，但这些不同的图像大小并不能很好地播放。当图像有不同的高度时，Flexslider可以很好地动画，但我想让Flexslider有一个固定的高度和宽度来适应我的布局。我试着把整个东西放到一个固定大小的<div>...

问固定的Flexslider大小
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定的Flexslider大小EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定的Flexslider大小
EN