Need help finding an image carousel/slider plugin with equal column height

I cannot access your site, so I’m not exactly sure what you’re referring to. (Some kind of DNS issue. Could be the University network I’m currently on)

Is the info column part of each slide? Or is it an independent element? Either way, this sounds more like a CSS issue than a specific carousel plugin issue. I would hope that you can achieve what you want with some custom CSS, regardless of chosen carousel plugin.

If you could create a mockup page with your otherwise favorite carousel, I’d be willing to see if this is at all feasible. Assuming I can access your site at all. I’ll be off this network and on one that’s supposedly unrestricted on Friday (Mar 1st) I cannot promise a solution, but I can advise if it’s likely feasible or not.

Site is working fine now, could’ve been down last night for updates (UK timezone here).

I’ve set up an image carousel (plugin is Kadence blocks, but I have tried many others) with two images on the page, and what I want is for the image carousel container to adapt to the same height as the independent product info column on the right when the screen size changes. The images inside the container should maintain their aspect ratio, and grow/shrink in height with the container.

Many thanks ??

• This reply was modified 9 months ago by seb512.
• This reply was modified 9 months ago by seb512.

Thanks for the example page. In order to maintain proper image aspect, the height is constrained by its width. If it happens to match the info column’s height, it would be pure coincidence. OTOH, the info column’s height is dependent upon its content and width, its aspect is not a consideration. Thus it’s not possible for them to match at varying viewport widths.

What you can do however is vertically position the image so it’s positioned mid-height instead of being anchored to the top. IMO this would give you a more pleasing layout. Unfortunately, I’m not sure what the right CSS would be to accomplish this. It’s tricky because of how the slider works to display the various images.

If all else fails, some JavaScript could be used to determine what the critical element sizes are so the right top spacing could be calculated to achieve the desired layout.

To get an idea what this would look like prior to making an effort to make it happen, use your browser’s element inspector tool to find the div with class “kb-gallery-wrap-id-427_27c1a8-db”. In its element style, set position: relative; and set a top: dimension to approximate a vertically centered position. This would not be a valid solution for any viewport width, but it’ll give you an idea what it would look like.

The mix of portrait and landscape images complicates things even more. The slider is configured to keep everything the same height, so portrait oriented images appear relatively small. It will almost surely require JavaScript to alter slider height based on what the currently visible image is. And it’s not like you’d only change the height of one container. There are an entire series of containers to deal with. But if most of them have heights set to 100% of their parent, you could get by with calculating one container height per image.

In case it’s not clear, this will not be a simple solution, unless you choose to leave things as they are ??

Thanks for the reply and I’ll take the advice onboard.

Yeah I’ll make all the images the same aspect ratio then and play around with the sizing a bit.

What I’m scratching my head about is that I use another plugin called Equal Height Columns, which works great with other elements except the image slider. Wonder if it’s possible to get this to work.

Alright, after some trial and error, I’ve found a good enough compromise that other’s may find useful.

This is just with the Kadence Blocks plugin’s image slider block, no other plugins required (as in the end I didn’t need the Equal Height Columns plugin after all).

I inspected all the elements within the Image Slider/Carousel, and then used the WordPress Custom CSS field in the site editor to set all the inner image component heights to 100% of the parent column. I also changed the position of the navigation dots so they were on top of the images rather than hidden away beneath due to the sizing changes (All Custom CSS code is pasted in the following reply to this post for those interested).

Then ensure that the Gallery Type is set to “Slider” and that Image Ratio is set to “Inherit” in the image slider’s block settings.

Now when the image slider is in a 2 column arrangement (image slider in the left column, and description text in the right hand column, both 50% width)…

…it should be the same height as the other column for medium screen widths…

…and for larger screen widths it’ll be larger as there isn’t enough text left to match its height (I’ve coloured the right-hand column in orange just to show how the sizing works).

On smaller screens it will go into a typical stack above the description as you’d expect.

Have a good one to everyone reading this, and thanks for the support.

Custom CSS Code:

/* Sets all components of image sliders to 100% of parent height */
.wp-block-kadence-advancedgallery {
    height: 100%;
}

.kb-gallery-ul {
    height: 100%;
}

.kt-blocks-carousel {
    height: 100%;
}

#splide01 {
    height: 100%;
}

#splide01-track {
    height: 100%;
}

#splide01-list {
    height: 100%;
}

.kb-slide-item {
    height: 100%;
}

.kadence-blocks-gallery-item {
    height: 100%;
}

.kadence-blocks-gallery-item-inner {
    height: 100%;
}

.kb-gallery-figure {
    height: 100%;
}

.kb-gal-image-radius {
    height: 100%;
}

.kb-gallery-image-contain {
    height: 100% !important;
}


/* Move image slider pagination to make it visible */
.splide__pagination {
    bottom: 15px !important;
}

Thanks for posting your solution! Nicely done!

While your need might be rather niche, I’m confident there will be at least a few people who would find this useful.