javascripthtmlcssflexslider

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?


Solution

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