I appreciate that the best result will be with images of exactly the same dimensions, but given this won’t always be feasible, I would have thought the third example above should be the default - or at least it would be useful if there were an option in the swiper properties to choose this setting (unless I’ve missed it). Presumably the divs containing the images (or whatever content is used) have to be the same width - if not it would be another useful option.
Hi Tom,
The swiper is not an image slideshow. It’s a carousel-like slider, where you put any HTML content inside each slide.
It’s up to you to style the content inside the slides of the swiper component. We don’t know what content will you place there and we don’t know whether you want that content aligned left, right or center that’s why there is no default option which centers your content.
If your images are big enough to fill the space the slide takes, you won’t need to center anything. Play with the number of slides shown per view, as well as with the spacing options and see what suits best.
Also I never really liked putting content with different dimensions in a slideshow/carousel-like layout. It never looks great.
I realise the swiper is not specifically for images. However where items within the swiper don’t have the same dimensions, I think it’s unlikely the default, non-centered layout would ever be what was wanted. If the dimensions are the same, the images will in effect be centered anyway.
I agree about content looking best if it has the same dimensions. However, I won’t be choosing the images - they will be selected by the owner of the website who has thousands of images with a variety of dimensions.
A useful feature to add to the images processing options in Wappler, would be an option to create square images- by adding a defined background colour, not by cropping (unless it already exists).
You can use your images as background images for square divs (background-size: contain; ) with specific dimensions. Then also apply a background color to the divs (#fff ?) And this way all your slides will have the same dimensions.
