Fit slides with different heights

Is it possible with Wappler Swiper to set slides showing to auto so slides with different heights can fit into a fixed height but resize their widths?

Like here:

@pixlapps, hi!

I will skip the steps to align the column in which the Swiper is placed and go straight to the steps to configure it. Note only that the height of the Swiper is set to 300px:

To set up Swiper I have done the following steps:

  1. I centered the slides, turned on auto play, set the space between the slides and increased the number of slides displayed:

  2. Images are set as a background for each slide (for this example, I did not bother with dynamic data). I applied the following settings to the image:

  3. The last and most important step was to set the width of the slide in which the image is displayed. For the setting to work, it was necessary to see how wide each image is at a height of 300px, you also need to set the property !important to set the width was in priority (on the screen example of setting one slide, but each slide will have its own width):

Note that this width setting works, but I do not think it is correct. In theory, instead of a specific width in px should work value auto and take the desired width of the image automatically. But I have a similar configuration apply failed. If someone knows why this is happening, I would be grateful for an explanation.

Good luck all!

1 Like

Watching Swiper work with the settings described above, I noticed the following:

Swiper takes the width of the first slide, and based on it sets the width of all subsequent slides. As a result, even if we set the individual width of the slide in css and use the property !important, the slider itself will play the slides as if they all have the same width. In other words, visually we will see that all the slides are different, but swiper will scroll through them as if they are all the same. Perhaps that is why it is not possible to adjust the width of the slide by simple methods, because it is set by swiper. If you still apply the settings listed above, you may experience problems on the mobile screen resolutions, because when adapting the error in scrolling will be even more noticeable.

Because Wappler generates a code Swiper different from the standard code, I’m not clear exactly where swiper from Wappler generates the width of the slides. Therefore, it would be very interesting to know how it works and whether it is possible to adjust the individual width of each slide correctly, so that there are no problems with changing slides when working with Swiper and mobile adaptation.

Thanks for your help @Mr.Rubi. Best person to enquire to about swiper and wappler is @patrick. He has provided some feedback in the past.

Your suggestion about using image as background-image instead of placed inline in html was very helpful.

I am using a repeat to create slides from database entries. So I just added the repeat slide and used dmx-style:background-image="‘url("./stock/’ + image + ‘")’" for the dynamic background.

Also this CSS for the slide size and background:

#swiper_item .swiper-slide {
height: 480px;
width: 100%;
background-size: auto 100%;
background-position: center;
border-radius: 0.25rem;
background-repeat: no-repeat;
background-color: black;

Lastly the images all open lightbox so I added an invisible container with 100% height and width absolutely(you can probably add it easily with Bootstrap flex classes but I used css)

My html now looks like this:

<div is="dmx-swiper" id="swiper_item" navigation="true" pagination="bullets" dmx-bind:slides="" grab-cursor="true" slides-per-group="1" centered-slides="true" auto-height="true">
            <div class="swiper-slide" dmx-style:background-image="'url(&quot;./stock/' + image + '&quot;)'"> 
               <a dmx-bind:href="'stock/' + image" dmx-lightbox:items_images=""><div class="itemcover"></div></a>

And my swiper componant works like I want it to:

Hello @pixlapps
Are you trying to achieve what’s shown in our showcase below?
Real Estate Swiper

Exactly - my images are some portrait and some landscape with different heights - I need them to be all the same height.

@Teodor Any tutorial for that available somewhere or will I be able to just check page source for the code?

There’s nothing too special about this.
In this showcase all the image have the same height, and the width is different as per the aspect ratio.
The slides per view option is set to auto and the centered slides option is enabled.
The only custom thing is the following rule in your css:

.swiper-slide {
    width: auto !important;

Usually you can see how is something achieved by inspecting the source code of the showcase.

Great - thanks. I tried auto instead of 1 or 2 etc and my slider broke, but maybe I made another error if you say it works for you.