Not so long ago I began to study swiper for building websites with slider layout. I was really impressed with swiper’s capabilities and the speed of setting up with Wappler. However, there are still configuration issues because Wappler does not provide direct access to the swiper api. I would be grateful for any help from the community, as well as from @Teodor, as a person who has answers to almost any questions.
An example of a page for which there are questions here: https://howitisdone.info/swiper1.html. In the example with two swipers I implemented three pages (slide1, slide2, slide3). First swiper1 performs the function of the background, the second swiper2 serves as a container for content. The questions are as follows:
How to disable swipe from swiper2? In other words, it was impossible to switch slides by dragging the mouse in the desktop version and using swipe in the mobile version
At the moment swiper1 can be scrolled using: buttons, scroll wheel on the mouse and using swipe in the mobile version. Swiper2 you can scroll through only the buttons and swipe. Have swiper2 it is necessary to disable the switch using a swipe, and connect the trigger “switch swiper2 when switch swiper1”. Thus swiper2 should switch only when the switched swiper1 and nothing else. How to implement it (how to connect the trigger)?
How to make swiper2 to have each new slide starts from the beginning? Now if a slide with a lot of content is scrolled to the end (slide2) and then move to the next slide (slide3), it will load already rewound to the very end, and not at the beginning. How to make a new slide start from the beginning?
The question is not at all about Swiper, but the problem arose when setting up the slider and I’ve been wracking my brain to figure it out but did not understand what was wrong, so I ask here. Swiper2 to be in a container with a fixed height and the overflow property. Thus, if there is more content in the slide than fits in the container, a scroll appears. In the Wappler everything works and displays perfectly:
No one has any ideas on the issues above? Perhaps the questions are poorly formulated? Report it. I’ll try to rephrase that. Google translator does not always translate all the wording correctly.
Today is third day as I have been trying to find solutions independently, but to no avail. I would be grateful for any help on the issues outlined above.
Sorry @Mr.Rubi
It’s really not clear to me what exactly are you trying to achieve. Maybe a shorter and clearer explanation would be better. Also if you can probably show what are you trying to do, and what can’t be currently done will help.
What about my question No.1? I will make a clarification to make it even more clear what I want to do. I need to configure the setting onlyExternal: true to swiper2 through Wappler. That You can advise?
Swiper suits me. If Wappler gave access to advanced settings, it would be a perfect pair at all (I mean Swiper and Wappler). Swiper is more than just a slider, but its potential is revealed by the possibility of fine tuning. Unfortunately at the moment, as I understand it, Wappler does not allow advanced configuration of Swiper.
I suspect my Question No. 2 also cannot be implemented by means of Wappler. I need to connect slideChange event to one of the swipers on the page. As I understand it using Wappler this cannot be implemented?
I decided to put a regular Swiper to be able to fine-tune with the code through the api. However, after connecting, an attempt to initialize Swiper by code failed. Did all the instructions as specified in the official api: https://swiperjs.com/api/
