具有非兄弟滑动的滑动器

我使用滑动器作为我的移动视图滑块。基本上，我想应用swiper-slide类的div不是彼此的兄弟姐妹。

下面是演示我的用例的示例:https://jsfiddle.net/2prcosmk/

每当我尝试以这种方式使用滑动器时，第一张幻灯片都会正确显示，但我无法执行从第一张幻灯片到任何其他幻灯片的实际滑动(当您尝试移动滑动器时，在演示中很明显)。我想知道这是否可能。我无法重新组织我的html，因为我在多个列中有多个卡片，所以每个卡片都会变成一张幻灯片，整个标题也会变成一张幻灯片。

你能在这里提供一些建议或任何指针对我的代码样本吗?谢谢!

更新:我尝试在https://jsfiddle.net/2prcosmk/2/嵌套swiper-*类，它确实创建了swiper，但嵌套的swiper内容只是不显示。如果我使内部滑动器direction: 'horizontal'，它会按预期在水平滑动器内创建垂直滑动器，但horizontal在horizontal内似乎不起作用。