Hi Wappler community
I would like to recreate this wappler exercise https://community.wappler.io/t/full-screen-vertical-scrolling-website-with-navigation-dots/4497 . I found out more information about this issue in a tutorial https://docs.wappler.io/t/responsive-fullscreen-swiper/4850 But I finished in a dead end like other users in the post https://community.wappler.io/t/vertical-slider-taking-control-of-scrolling-possible-in-wappler/13134/6
Any suggestions how to fix problem with the background images that don´t appear on the slider?
swipper
Thank you.
Is this community alive? Or its time to search for alternatives?
Your test page only has:
<div is="dmx-swiper" id="swiper1">
<div class="swiper-slide fundo_b"></div>
</div>
and nowhere in your css you have styled this class/div. Not sure what help are you looking for in this case?
Thank you Teodor for your reply. Could you please tell me what step I failed to complete in the tutorial?
I don’t know which step you failed, i see in your CSS there are no styles applied for the 2 lines i quoted above.
I followed the tutorial step by step with no good results. Other users on this forum also complain about the same problem: “the background images don’t appear”. Maybe this tutorial should be made again with more detail to avoid this problems.
This issue and 3 days waiting for a reply to my questions creates a feeling that I’m paying for a great software with some bugs and a terrible support service, that makes me feel stupid. You will always have new users with “stupid” questions. So please deal with it and stop using irony in your replies. Ex: “Not sure what help are you looking for in this case?”. I just want to repeat the tutorial! So please help.
All you need is:
on your page:
<div is="dmx-swiper" id="swiper1" vertical="true" pagination="bullets">
<div id="slide-1" class="swiper-slide"></div>
<div id="slide-2" class="swiper-slide"></div>
</div>
and in your style.css:
#swiper1 {
height: 100vh;
}
.swiper-slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#slide-1 {
background-image: url("/assets/images/2.jpg");
}
#slide-2 {
background-image: url("/assets/images/2.jpg");
}
Thank you
Teodor something is wrong, could you help?
This is the online page:
http://ultreya.pt/pagina_teste.html
This is html:
<!doctype html>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Test 01</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="dmxAppConnect/dmxSwiper/dmxSwiper.js" defer></script>
<link rel="stylesheet" href="dmxAppConnect/dmxSwiper/swiper.min.css" />
<script src="dmxAppConnect/dmxSwiper/swiper.min.js" defer></script>
<link rel="stylesheet" href="css/meus_estilos.css" />
<div is="dmx-swiper" id="swiper1" vertical="true" pagination="bullets">
<div id="slide-1" class="swiper-slide"></div>
<div id="slide-2" class="swiper-slide"></div>
</div>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
This is CSS:
#swiper1 {
height: 100vh;
}
.swiper-slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#slide-1 {
background-image: url("http://www.ultreya.pt/assets/images/2.jpg");
}
#slide-2 {
background-image: url("http://www.ultreya.pt/assets/images/1.jpg");
}
Thank you
Rodrigo Cerqueira
In none of your 2 css files i see any styling added for #slide-1 and #slide-2
http://ultreya.pt/css/style.css
http://ultreya.pt/css/meus_estilos.css
I made a “save all” and theoretically it was uploaded but not updated on the server.
Should I start the project from scratch?
Not sure what to look at on your screenshot, but if you added the lines of code i provided you to your styles.css file, then clearly your css file(s) are not uploaded to the remote server. Open the files panel, set your remote target as active and upload them …
Thank you for your reply. The last screenshot shows that I was able to upload. The “remote target” is active has you can see on the new screenshot.
I Cleared the browser cache
And what is the content of your CSS file - post a screenshot?
Thank you. The problem is fixed. Apparently the hosting company is doing maintenance. This is why there is this big delay to update content.