Content overlap occurs when dynamically nesting multi-layer swipers

problem display

As shown in the above picture: the swiper in the above picture has four levels of switching nested, which belongs to the relationship between the upper and lower levels, but there are some levels on the display that are separated and recursive, and the content modules of the swiper overlap, and each time a content is switched, it will be confused and overlapped.

problem causes

When switching, the swiper does not update the content of the next switch, causing the content of the previous swiper to stay on the canvas (added: observer: true, observeParents: true. But it has no effect)

problem solved

effect : 'fade',
fadeEffect: {
	crossFade: true,
}, //fade属性必须加上

normal interface

Specific code: (JQuery language) (third-level swiper)

HTML display code (.net framework language)