时间戳

首页 > 解决方案 > Swiper Slider 3d Cube Slide 不工作？

javascript - 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',

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>

标签： javascriptslidercubeswiperswiperjs

解决方案

推荐阅读