Fixed size of Flexslider

Question

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?

Leisurely

Have you tried adding overflow:hidden to the div you added? – Variolous

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

Bayou

That seems to work well, but non-square images can get distorted. Is there a way to resize the images to automatically fit that square without distortion? – Leisurely

You specified you wanted a fixed height and width so that Flexslider does not resize. In order to accomodate images with different ratios, Flexslider has to change its dimensions to accomodate the new image. The code I gave you can be changed to a fixed size to fit your layout (ex: 960 x 540) but it is dependent on having that same fixed size for each of the images. Is there a way you can re-crop and resize your images in a photo editor to fix this problem? – Bayou

I'm pulling these assorted images from an API, so I can't resize them en masse with Photoshop or anything like that. Sorry I was unclear :/ – Leisurely

Not a problem :) There may be a way to do it with Javascript but it might require some work. Let me know if you have any suggestions, I'd be interested to see how it could resize height based on width automatically. – Bayou

Alright, I got resizing to work with this (#7041778), but they're not centered. That should be the easy part, though. Thanks for all your help! – Leisurely

Nice! Thanks for sharing, I am definitely interested in this and will take a look. Appreciate it and good luck! – Bayou

I use the combination of add_image_size and the css above. It works, but I need to maintain the size for the css and add_image_size. – Gamogenesis

Answer 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;
}

Apraxia

Not sure what version this pertained to, but the current one I do not see a flex-viewport class, so just add it to whatever the wrapper for your lis are. Mine is slides (default) but it can be overwritten in the config. – Vive

Answer 3

Change the width via script say your width to be 400

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

Blomquist

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

Engraft

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

Uptotheminute

What about a dynamic height? – Dispute

If each slide has its own ID then it's better not to use inline CSS. – Phenomenon