Vertical slider (taking control of scrolling) - possible in wappler?

Hello!

Is this - http://www.satixfy.com/ sort of site, possible with no code in wappler? I know some people dont like sites that make you scroll to a fixed point on the page but I think it looks pretty good. Would be interested in how to do this!

Thanks :slight_smile:

I am not sure what you mean by hijack scrolling because when I visited the site, I did not see that. If it happened I was just not aware of it.

From what I know of Wappler, yes, everything on that site is possible within wappler.

Updated my post - I mean the feature that causes you to move to a fixed point on the page when you scroll.

You can achieve similar effect using the swiper component:

Still, you may need to adjust your code probably … depending on what exactly are you trying to achieve.

That showcase is pretty much exactly what i want to do. Is that available as a demo / template / tutorial?

You can check the following tutorial:

It’s made with the old version of the Design panel, which was working with IDs, so there might be slight differences, but nothing you can’t add in styles panel actually.

Thanks for that. I followed it and added the CSS (which was easier than i had assumed) but when i get to the last step and add in the images it doesnt work. It wants me to put in something in the class selector section, what do i add here?

When i add in an image to the background it adds in a style for me but the image does not appear.

@DrNinjamonkey, hello

To what element App Structure You add style4 css?

Hi,

Style 4 css was auto-filled in the box when i added the image. I dont know what it is.

image

This is what I see when i first load into the design page on the slide element.

As you can see here I add in the image and it auto-fills the class box with style X (with x always going up by 1 when i try this)

What am i doing wrong?

That’s OK. You can choose the name of the style yourself. If you do not, the program will create the names itself, in the form of: style1, style2, style3 and … etc. Problem is different. Are you sure you’re adding a background picture to a swiper slide?

I suspect You want to achieve such a result: https://howitisdone.info/swiper1.html

This is my screen, then i click design. Then I see this:

As you can see I added image in to the background image section and it created style 6 for me.

Should i be doing something else?

Did you remember to pre-add the following style settings?:

#swiper1 {
    height: 100vh 
}
div.swiper-slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center  
}

If not forgotten, then on kind of all done correctly.

Yes i did all of this. I just set up a tagret and published and it worked (for one slide) but when I added another slide it stopped.

  • There seems to be an issue with my preview mode?
  • When adding another slider, what do i need to do differently?

Thanks so much for your help.

Explain what “stopped” means ? You mean the slides don’t change? If so, you just need to make the appropriate settings swiper control.

As for the preview, if something doesn’t look as I planned in the page settings, I usually click “Refresh”. Typically helps. If does not work, almost certainly I did something wrong and need to check. At least I can say that the preview in Wappler works very well and stable.

@DrNinjamonkey
It would be best if you can provide a link to your page, where we can check what’s wrong.
We cannot really guess what’s the issue, without checking the page.

I played with the swiper control settings and that seems to have done the trick - thanks!

My preview mode doesnt show images I add. I had this issue before and didnt resolve it. Where is the best place to look to check the problem?

Please provide a link to your page so we can check what’s going on on your page.