嗨，我正在尝试在我的wordpress网站上创建响应式滑块，我希望在台式机5列，平板电脑4列和移动3列上具有滑块，并使用CSS在移动设备上隐藏箭头这是我的代码：
但是似乎无法正常工作，在任何浏览器宽度上它仍然显示3列，如何解决？谢谢
<html>
<!-- start slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
</div>
<!-- Add Pagination -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
}
</html>
这是我的jQuery
jQuery(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 3,
spaceBetween: 10,
breakpoints: {
'480': {
slidesPerView: 4,
spaceBetween: 40,},
'@640': {
slidesPerView: 5,
spaceBetween: 50, },
},
// Optional parameters
freeMode: true,
loop: false,
scrollbar: {
el: '.swiper-scrollbar',
hide: true,},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', },
})
});
非常简单的解决方案：] @640断点的语法错误。
删除此@
更改
'@640': {
slidesPerView: 5,
spaceBetween: 50, },
},
收件人：
640: {
slidesPerView: 5,
spaceBetween: 50, },
},
跟随此演示：
https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html
https://stackblitz.com/edit/swiper-demo-37-responsive-breakpoints?file=index.html