Fixed size of Flexslider

问题

I'm using Flexslider to pull product images of varying sizes from an API. I've been throwing them into Flexslider's <ul>, 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 <div>, 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?

回答1:

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:

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

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

Hope this helps!

回答2:

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.

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

height: 0 !important;
}

回答3:

Change the width via script say your width to be 400

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

回答4:

Remove

smoothHeight: true,

from

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

回答5:

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

<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>

来源：https://stackoverflow.com/questions/13202867/fixed-size-of-flexslider

标签

javascript

html

css

flexslider