The H5 page of the mobile phone made by swiper, how do two sweiper, switch with each other on the same page?

Mobile H5 promotion page
is generally 3 screens. Use
to do
up and down to switch
to the second screen. There are some hyperlinks in the second screen, pointing to another swiper,
. The second swiper is a detailed introduction of the second screen

.

is basically like this, and it is not complicated, that is, you can click the link from the first swiper to switch to the second swiper, and then return to the first

from the second.

the question is how to achieve this

are two swiper created by new at the same time when the page is loaded?
I tried and created at the same time, so that when the second display none, is switched, the first display none, and the second block, but in this way the second swiper is completely messed up and has no effect

.

has a god ever done anything like this

and more than two swiper, the second swiper also has its subordinates, which is a more detailed product introduction.


after reading your description, I can give my thoughts:

  1. Page switches with the first swiper
  2. when you click on the second page, you can display the second swiper in the form of pop-up window establish and initialize or update swiper (because there seems to be an error in the size calculation of swiper in the case of display:none),
  3. the second swiper can close the current pop-up window, and the two swiper actually do not affect

official documentation for multiple swiper on the same page
official document

in the example given to you,
Chestnut

Menu