嗨，我正在尝试在我的 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', },
})
});
错误的语法。
缺课swiper-slide。
https://swiperjs.com/get-started/
改变这个：
<div>Slide 1</div>到<div class="swiper-slide">Slide 1</div>
删除这个@+ 单引号（不是'480'而是480）。
改变
'@640': {
slidesPerView: 5,
spaceBetween: 50, },
},
到：
640: {
slidesPerView: 5,
spaceBetween: 50, },
},
var swiper = new Swiper('.swiper-container', {
// Default parameters
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
})
'@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
| 归档时间： |
|
| 查看次数： |
15351 次 |
| 最近记录： |