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.
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…
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.
Works!
@Teodor thanks for helping!
Hello
This works fine with separated menu but is anyone knows how to have the text button in bold (and of course the others none) when is selected?
Thanks
Hi @patch
What do you have on your page exactly?
Hi @Teodor
For now it s just a simple swiper ( wirh 5 slide) with a separated menu (above swiper)
I d like button text be bold when i click to change swiperslide
i send you image, it will be better
for exemple, when i click on Masterclass, i d like masterclass be bold
What you can do is to change the class of the elements/buttons you are using depending on the slide number.
Add new dynamic attribute, styling - class toggle and add a class name of let’s say selected.
Then for the button calling the first slide it would be: dmx-class:selected="swiper1.index == 0"
For the second dmx-class:selected="swiper1.index == 1" etc.
Then in your css just add the styiling you need for the selected class. For example:
.selected {
font-weight: bold;
}
Thank you very very wuch @Teodor
It works perfectly !
Congratulations ! 