有时候需要 swiper.js 再不同分辨率(媒体查询)加载不同数目轮播,适应响应式端。
版本:swiper@6.7.0为实例;
var mySwiper_products_right = new Swiper('.swiper-container-products-right', { loop: true, loopFillGroupWithBlank: true, speed:1000, autoplay: { delay: 2800,//3秒切换一次 }, pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true, dynamicMainBullets: 3 }, // 媒体查询 breakpoints: { 320: { //当屏幕宽度大于等于320 slidesPerView: 1,//加载一个轮播 slidesPerGroup: 1,//定义slides的数量多少为一组 }, 768: { //当屏幕宽度大于等于768 slidesPerView: 2, slidesPerGroup: 2, }, 1280: { //当屏幕宽度大于等于1280 slidesPerView: 3, slidesPerGroup: 3, } }, });