当前位置: 代码迷 >> 综合 >> swiper.js 不同分辨率(媒体查询)加载不同数目轮播
  详细解决方案

swiper.js 不同分辨率(媒体查询)加载不同数目轮播

热度:115   发布时间:2023-11-18 01:53:03.0

版本:swiper@6.7.0
js:

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: {
      //当屏幕宽度大于等于320slidesPerView: 1,//加载一个轮播slidesPerGroup: 1,//定义slides的数量多少为一组},768: {
      //当屏幕宽度大于等于768 slidesPerView: 2,slidesPerGroup: 2,},1280: {
      //当屏幕宽度大于等于1280slidesPerView: 3,slidesPerGroup: 3,}},});
  相关解决方案