Hello,
I made a swiper with slides in it and on each slide an image that uses Lazy load (how can I test if it works?), but they have different sizes (height) even with swiper auto height all images don’t stay fullscreen…
I want them to stay like this:
https://showcase.wappler.io/SwiperFullscreen/
Thanks again guys!!!
Hi Andre,
Can you provide a link to your page so we can check what you have created?
But what should happen on this page exactly?
It has nothing to do with the showcase link you provided. On the showcase page we only have the swiper and nothing else on the page…
How do you expect this on your page to be fullscreen when you have other content below it?
I need the swiper just like the showcase but with the menu on the right.
Or the images from swiper to be fullscreen on the height and not by the width.
What about the content below the swiper on your page? I am not sure if you properly use the term “fullscreen”. Do you mean 100% height of the screen?
Yes @Teodor is 100% hight. For example on an image inside Display we have Responsive, but the image gets auto width and I need auto height.
Well you need a swiper with slides, which have background images applied, instead of img tags used inside them. The background size should be set to cover.
Then you need to set the swiper height to 100vh using CSS.
This, however requires you to have at least basic knowledge of CSS. You can inspect the source code of the showcase you posted link to in your browser, to see how it’s made.
Hi @Teodor
I’m still struggling to make this work. I’ve added the CSS but the result is not the same.
Your page code looks the same to me. None of the changes I mentioned have been added.
@Teodor, I got it, thanks is just what I need.
Is impossible to do it with lazy load?
I still don’t see any change on your page.
Lazy load is not supporting background images, placed with CSS.
uploading @Teodor now you can check it.
Looking good, just a small suggestion - you can put the height: 100vh; directly to the swiper container, no need to set it for each slide.
Also you can do this directly in your CSS, not inline. The only inline property that you need is the background image itself. So in your custom CSS add:
.swiper-container {
height:100vh;
}
.swiper-slide {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
And remove these from the inline styling.
Thanks @Teodor.
But I have to write the class swiper-container to swiper or will not work right? because now is empty.
No Andre,
Just copy the code i provided to your custom css file and remove the inline styles you placed on each slide, just leave the background image style there.
No other change is required on the page.
The class you mention is applied automatically by our script.
I’ve added a tutorial about this as well: Responsive Fullscreen Swiper
@Teodor,
Is possible call smaller images just for mobile?
I want good quality photos on big screens, but on mobile, the swiper animation is not fluid, I think is because the images are too big.
Hello,
You can create the same swiper but with smaller images, and show it just on mobile, then hide it on large screens.
@Teodor,
I still have some issues with the swiper, specially on Mac with safari.
The preloader sometimes don’t work and the images on the swiper with the animation are not fluid. The dropdown menu in mobile, is the same, not fluid.