Swiper Slider 3d Cube Slide 不起作用？

如何解决Swiper Slider 3d Cube Slide 不起作用？

我正在尝试将 Swiper 插件添加到我的页面之一，对于演示，我共享了代码，请在手机视图中打开查看多维数据集的结果,这是 swiper cube 3d 的演示代码，最后 4 张幻灯片工作正常，但从第一张幻灯片开始，它是垂直幻灯片的无效结果。请检查此代码，我已经尝试了大部分演示，但没有得到解决方案。请帮忙

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8">
<title>Swiper demo</title>
<Meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style type="text/css">
.swiper-wrapper {
height: 300px;
width:  300px;
}
.swiper-slide{
width: 300px;
height: 300px;
}
img{
height: 300px;
width:  300px;
}
h1{
margin: 0px;
}
.horizontal-swipe{
background: red;
color: white;
}
.swiper-slide.vertical-swip{
background: black;
color: white;
}
</style>
</head>
<body>
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<?PHP for ($i=1; $i <= 10; $i++) {  ?>
<div class="swiper-slide horizontal-swipe" data-hId="<?=$i;?>">
<h1>Horizontal <?=$i?></h1>
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<?PHP for ($j=1; $j <= 8; $j++) {  ?>
<div class="swiper-slide vertical-swip" data-vId="<?=$i;?>">
<h1>Vertical slide <?=$i.'-'.$j;?></h1>
</div>
<?PHP } ?> 
</div>
<div class="swiper-pagination swiper-pagination-v"></div>
</div>
</div>
<?PHP } ?> 
</div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiperH = new Swiper('.swiper-container-h',{
effect: 'cube',grabCursor: true,slidesPerView: 1,spaceBetween: 30,loop: true,cubeEffect: {
shadow: true,slideShadows: true,shadowOffset: 20,shadowScale: 0.94,},pagination: {
el: '.swiper-pagination',});

var swiperV = new Swiper('.swiper-container-v',{
direction: 'vertical',effect: 'cube',});

</script>
</body>
</html>