Javascript Swiper滑块3d立方体滑块不工作？_Javascript_Slider_Cube_Swiper_Swiperjs

Javascript Swiper滑块3d立方体滑块不工作？

javascript

Javascript Swiper滑块3d立方体滑块不工作？,javascript,slider,cube,swiper,swiperjs,Javascript,Slider,Cube,Swiper,Swiperjs,我正在尝试将Swiper插件添加到我的一个页面中，对于演示，我共享了代码，请在移动视图中打开多维数据集的结果，这是swiper cube 3d的演示代码，最后4张幻灯片工作正常，但从第一张幻灯片开始，这是垂直幻灯片的无效结果。请检查此代码，我已经尝试了演示的大部分，但没有得到解决方案。请帮忙 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo

我正在尝试将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',

grabCursor: true,
slidesPerView: 1,
spaceBetween: 30,
loop: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: '.swiper-pagination',
},
});

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


Swiper演示
.泳衣{
高度：300px；
宽度：300px；
}
.滑梯{
宽度：300px；
高度：300px；
}
img{
高度：300px；
宽度：300px；
}
h1{
边际：0px；
}
.横扫{
背景：红色；
颜色：白色；
}
.swiper-slide.vertical-swip{
背景：黑色；
颜色：白色；
}
var swiperH=新的Swiper（'.Swiper-container-h'{
效果：“立方体”，
格雷博：是的，
幻灯片视图：1，
空间期:30,，
循环：对，
立方效应：{
影子：没错，
幻灯片：没错，
偏移量：20，
阴影比例：0.94，
},
分页：{
el:“.swiper分页”，
},
});
var swiperV=新的Swiper（'.Swiper-container-v'{
方向：'垂直'，
效果：“立方体”，
格雷博：是的，
幻灯片视图：1，
空间期:30,，
循环：对，
立方效应：{
影子：没错，
幻灯片：没错，
偏移量：20，
阴影比例：0.94，
},
分页：{
el:“.swiper分页”，
},
});