Doesn't properly resize when inside animated div.

This isn’t actually a question because I’ve figured it out, but I wanted to post the solution just in case someone else needs it or ideally it could be incorporated into a future build. I’ve tried maybe five other slideshow plugins and this is the only one I could get working in this type of situation.

The problem was that the slideshow resized great when the browser window was adjusted, but it did not resize when put inside a div whose width is animated with CSS. What was happening is that the div’s widths would shrink with the animation but not the picture (causing the picture to be the same side but cut off by the smaller divs that have overflow:hidden), and the height also wouldn’t adjust to maintain the aspect ratio.

So here’s how I fixed it and it’s working well for my needs, although I’m not using the text box, navigation, etc, so I haven’t tested it with that. Mine is just a basic image fader with no options. I’ll post the link to my site when it launches for an example but if this messes up the navigation or other options, maybe this’ll at least give a head start so someone else can fix that.

Anyway, here’s what I have in the custom CSS, which sets the aspect ratio at 2:1 (height is half the width):

.frs-slideshow-container#homepage-slideshowpjc {
    margin: 0;
    height: auto !important;
}
.frs-slideshow-container div.frs-slideshow-content {
    height: 0 !important;
    padding-top: 50%;

/* Padding is calculated based on width, so by using zero height and 50% top padding, we can mimic the height and maintain it at half the width (aspect ratio of 2:1). You can use different percentages to maintain different aspect ratios. Then, down below, we'll stretch the absolutely positioned child div over this parent div.*/

}
.frs-slideshow-container > .frs-wrapper > .frs-slideshow-content > .frs-slide-img-wrapper {
    width: 100% !important;
    height: 0 !important;
    padding-top: 50%; /* same story as above. */
    top: 0;
}
.frs-slideshow-container > .frs-wrapper > .frs-slideshow-content > .frs-slide-img-wrapper > .frs-slide-img {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    bottom: 0;
    right: 0;

/* This element already has postition:absolute; top:0; left:0;. By adding bottom:0; and right:0; we essentially set the size of the parent div's aspect ratio with the padding trick above, and then stretch this div to always cover it. */

}

Anyway, hope this helps someone!

https://www.ads-software.com/plugins/fluid-responsive-slideshow/