我刚刚使用swiper.js插件实现了一个滑块,并且一切正常。我唯一的问题是,在移动设备上(特别是使用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%,这就是问题的原因