Elementor Carousel allows images to be uploaded to a carousel and save it as ‘cover’, and also assign a background color to it.
See desired effect.
Elementor carousel -
The same functionality is not available in Bricks i.e. Images cannot be saved to cover, and it overflows.
Small things like this make Elementor widgets much better thought out than Bricks Widgets.
Elementor user here falling in love with Bricks, but small details like these are annoying.
Here is the Bricks Carousel with similar images and lack of functionality to achieve Elementor like effects.
All logo images are of different sizes in both carousels, but they look neat in Elementor and unusable in Bricks, due to the customisation options available within both builders.
Bricks Carousel
Food for thought to match or better Elementors’s carousel functionalities.
Hi
try putting this into the custom CSS of the carousel and ajust the 300px to your liking:
.brxe-carousel .swiper-autoheight .image {
height: 300px!important;
object-fit: fill;
}
Cheers
Patric
Hi,
Thanks for your thoughts and efforts.
I tried to input that custom CSS, but unfortunately, it didn’t change anything.
Anyhow, I was thinking about rebuilding a website and migrating it from Elementor to Bricks, but it seems it’s too early for that. Bricks, it seems, is not as polished as Elementor at the moment in terms of widgets and one needs custom CSS, something I am not familiar with.
I was trying my hand at the bricks playground, and came across an issue and flagged it for the developers’ consideration.
Cheers,
Strange, because it works perfectly at my site.
Anyway, you can play with these settings for the object-fit:
The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be “letterboxed” if its aspect ratio does not match the aspect ratio of the box.
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object’s aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
The replaced content is sized to fill the element’s content box. The entire object will completely fill the box. If the object’s aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.
The replaced content is not resized.
The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
Cheers
Patric
Thx again,
I tried all the keywords (contain, cover, fill), with the provided custom CSS, but somehow it didn’t work. No worries, as I was just experimenting in the playground, and taking Bricks for a test drive.
Anyhow, the intent of this post is for the Bricks developers to consider implementing a no-code solution in Bricks, similar to Elementor, to the issue identified.
Cheers,
Please no. We don’t want to reproduce elementor.
Why not just use a slider? Nested slider lets you do everything you need.
I gave your suggestion to use Nested Sliders a go, and it worked well. I was able to replicate the Elementor Carousel features and functionalities with the Bricks Nested Slider, and it works like a charm. Cheers.
Hi Patric,
Do you know if there’s a way to use “contain” as object-fit where the image will take up the full height of the carousel while maintaining its proportions?
