jq實時監測窗口大小，來調用不用的swiper效果
時間：2023-07-02 訪問量：0
在網站開發過程中，我們用得很多的插件之一就是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
}
}
});
