Im trying to add the Swiper plugin to one of my page, For demo i shared code, Please open in mobile view For result of cube ,This is demo code of swiper cube 3d, Last 4 slides are working fine but from first slide it is invalid result of vertical slides. Please check this code, i had tried most of demo but no solution i get. Please help
<!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>
