Separate menu for Swiper

Hello all!

I looked through a lot of material, but I could not find the information I needed. Prompt whether it is possible to operate the slider Swiper by means of the third-party menu? In other words, can I make a menu with buttons/links with which I can navigate between slides (go to a specific slide)? If so, how to implement it in Wappler?

Thank you in advance for your help.

On the official website of Swiper there are examples of different variants of implementation of swiper. One example of a third party navigation buttons: https://idangero.us/swiper/demos/410-virtual-slides.html

This is exactly what I asked in the first post.

JS the part responsible for managing swiper with the help of navigation buttons could not be implemented into the code generated by Wappler. There are many errors.

As far as I understand, Wappler generates its own code for Swiper, different from that used in manual coding in accordance with the official specification, which makes it impossible to apply the solutions that are given on the official website.

Is it possible to implement this example: https://idangero.us/swiper/demos/410-virtual-slides.html with Wappler and how?

Thank you in advance for your help.

1 Like

Yes you can do this of course.
Use the dynamic events to control the swiper on your buttons click …

@Teodor, hello

It’s the first thing I’ve tried…:slightly_smiling_face:

The fact is that when you create a dynamic event (click), it is impossible to select a specific slide swiper. Maybe it’s a mistake Wappler?

Well, there is a dynamic event called Show Slide where you enter which slide to show.

@Teodor yeah, that’s what I was trying to use. But once again, when you go to the step of selecting the slide to be shown, it can not be selected in the visual interface Wappler. Neither double click or Enter button is not working:

What do you mean to be selected? Just enter the slide number there.

Just put the numbers 1,2,3. When you press the menu button, swiper starts flipping through the slide, but breaks. At the same time, when you click on the menu buttons, the text in the buttons can take a value that is not set at all in the code… In General, does not work, but there is some sort of strange magic: http://svk.cy65837.tmweb.ru/test2.html

You are using href="#" for your links. This redirects the page, when a link is clicked.
Use href="javascript:void(0);" instead if you want to control the swiper using the navbar component.

1 Like

Works!

@Teodor thanks for helping!