I still don’t see any change on your page.
Lazy load is not supporting background images, placed with CSS.
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.
1 Like
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.
@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.
I see no issues on your site.
Ease create some short video showing the problem and upload it here.
Test on safari MacBook Pro
the preloaded show up this time, but you can see the menu is not fluid.
test.mov (10.4 MB)
I don’t know how to make video on iPhone, but the swiper animation on the iPhone is not fluid, and the images have a delay showing up.
I don’t understand what you mean? What do you expect your menu to do?
Tested your site on 3 different mobile devices and everything seems as expected.
You checked the video?
the animation is not fluid.
But that is entirely up to your browser/hardware. It’s the standard bootstrap 4 animation - nothing wappler specific.
Test your site on a real mobile device - safari is not the best thing you use…
In my Mac, if I use chrome, everything is good.
I tried on my iPhone and the preloaded don’t even work.
The problem is only with safari.
I’m sorry but I see no issue neither with the preloader nor with the menu on iPhone or Android device.
I don’t know what the issue with your safari on a Mac could be.
Hi @Teodor ,
how can i change the time that each image (slide) is displayed? The speed on the Swiper - slides control is for the animation between slides.
Seems we have not added this to the UI. The default is 3000ms
You can manually add this to your slides: data-swiper-autoplay="5000" (the value may be different for different slides if you need)
So it becomes:
<div class="swiper-slide" data-swiper-autoplay="5000"></div>
1 Like