我刚刚使用 swiper.js 插件实现了一个 slider ,一切正常。我遇到的唯一问题是移动设备上 slider 的提供(特别是使用 Chrome,因为在 Safari 中没有问题)被破坏了。我认为它更多地用于 CSS 方面,但我不确定。
我给你留下了发生的事情的图像和相关的代码。
这就是它在装有 Chrome 的手机上的样子:
所以应该看到:
HTML:(我只放了一张图片的代码,没有添加文字,因为它们不会解决问题)
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<?php
$url= Ruta::ctrShowURL();
$slide = SlideController::ctrShowSlide();
echo '<div class="swiper-slide">
<img class="img-responsive" src="'.$url.$slide["img"].'">
</div>';
}
?>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
CSS:
.swiper-slide {
width: auto;
height: auto;
}
.swiper-container{
position:relative;
margin:auto;
width:100%;
overflow: hidden;
padding:0;}
/*=============================================
Mobile
=============================================*/
@media (max-width:768px){
.swiper-container img{
width: 100%;
height: 160px;
object-fit: cover;
}
}
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',
},
});
最佳答案
你必须为你的swiper-container
提供一些高度
.swiper-container{
height: 300px;
}
如果你愿意,你甚至可以把这段代码放在移动设备的媒体查询上
默认情况下,它采用 100% 高度,这就是您出现问题的原因
关于javascript - slider 在移动设备上显示不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54632241/