我只是实现与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',
},
});