Javascript 滑块在移动设备上显示不好

我刚刚用swiper.js插件实现了一个滑块，一切正常。我唯一的问题是在移动设备上提供的滑块（特别是使用Chrome，因为在Safari中没有问题）被破坏了。我认为它更多的是用于CSS方面，但我不确定

我给你留下了一个发生了什么的图像和代码

这就是Chrome手机的外观：

因此应该看到：

HTML：（我只放图像的代码，没有添加文本，因为它们不会解决问题）

JS

<!-- Initialize Swiper -->

var swiper = new Swiper('.swiper-container', {
            speed: 700,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

var swiper=新的swiper（“.swiper容器”{
速度:700,，
空间期:30,，
中心幻灯片：对，
自动播放：{
延误：4000，
disableOnInteraction:false，
},
分页：{
el:“.swiper分页”，
可点击：正确，
},
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
});

您必须为您的

游泳池容器提供一些高度

.swiper-container{
   height: 300px;
}

如果需要，您甚至可以将此代码放在移动设备的媒体查询中

默认情况下，它采用100%的高度，这就是问题的原因

移动设备的高度设置为
100vh
。将其更改为
auto
。通常，对于移动设备，滑块会更改为占据设备的全部高度
<!-- Initialize Swiper -->

var swiper = new Swiper('.swiper-container', {
            speed: 700,
  spaceBetween: 30,
  centeredSlides: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

.swiper-container{
   height: 300px;
}