在网站开发过程中，我们用得很多的插件之一就是swiper,但是我们在做左右多个slider切换的时候，当换到手机端上的时候，我们需要切换显示的个数。如果下图：
比如PC端一行显示4个图片：
JS:
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
loop: true,
autoplay:true,
speed: 500,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
但是显示在手机上不能显示4个，需要显示1个或者两个。
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay:true,
speed: 500,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
那么我们就可以通过JS来监听窗口的大小变化来调用不同的代码。
代码如下：
//打开网页时的宽度，必须保留
var windowsize = $(window).width();
if( windowsize > 768 ) { // 屏宽1330触发
//主体
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
loop: true,
autoplay:true,
speed: 500,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
//主体
}else{
//主体
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay:true,
speed: 500,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
//主体
}
//监测网页时的宽度变化，以及实时更新
$(window).resize(function() {
windowsize = $(window).width();
if( windowsize > 768 ) { // 屏宽1330触发
//主体
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
loop: true,
autoplay:true,
speed: 500,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
//主体
}else{
//主体
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay:true,
speed: 500,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
//主体
}
});
以上是用JS来写的。现在提供另一方法 就是swiper自带的效果：
var swiper = new Swiper('.swiper-container', {
slidesPerView: 4,
spaceBetween: 30,
loop: true,
autoplay:true,
speed: 500,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//响应式个数
breakpoints: {
//当宽度小于等于640时显示
640: {
slidesPerView: 1,
spaceBetween: 20
},
//当宽度小于等于768时显示
768: {
slidesPerView: 3,
spaceBetween: 30
},
//当宽度小于等于992时显示
992: {
slidesPerView: 4,
spaceBetween: 30
}
}
});