您当前的位置:首页 > swiper知识

响应多种屏幕设置breakpoints

时间:2023-01-02 09:36:16    来源:    作者:

断点设定,允许为不同的响应断点(屏幕尺寸)设置不同的参数。类似于CSS响应式布局的media only screen and (min-width: 480px)。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定,如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction,而像loop、effect等则无效。

使用方法示例:
从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。

<script>
  var mySwiper = new Swiper('.swiper', {
    slidesPerView: 1,
    spaceBetween: 40,
 
    breakpoints: { 
      320: {  //当屏幕宽度大于等于320
        slidesPerView: 2,
        spaceBetween: 10
      },
      768: {  //当屏幕宽度大于等于768 
        slidesPerView: 3,
        spaceBetween: 20
      },
      1280: {  //当屏幕宽度大于等于1280
        slidesPerView: 4,
        spaceBetween: 30
      }
    }

    breakpoints: {
      '@0.75': {  //当屏幕宽高比大于等于0.75
        slidesPerView: 2,
        spaceBetween: 20,
      },
      '@1.00': {  //当屏幕宽高比大于等于1
        slidesPerView: 3,
        spaceBetween: 40,
      },
      '@1.50': {  //当屏幕宽高比大于等于1.5
        slidesPerView: 4,
        spaceBetween: 50,
      }
    }

    //Swiper4.x版本为小于
    breakpoints: {
      1280: {  //当屏幕宽度小于等于1280
        slidesPerView: 4,
        spaceBetween: 30
      }
      768: {  //当屏幕宽度小于等于768
        slidesPerView: 3,
        spaceBetween: 20,
      },
      320: {  //当屏幕宽度小于等于320
        slidesPerView: 2,
        spaceBetween: 10,
      }
    } 
  })
</script>



例子:
<script type="text/javascript">
                                var mySwiper = new Swiper('.in-case-con .swiper-container', {                                   
                                    slidesPerView: 5,
                                    spaceBetween: 30,                                    
                                    breakpoints: {                                        
                                        576: {
                                            slidesPerView: 2,
                                            spaceBetween: 20,
                                        },
                                        768: {
                                            slidesPerView: 3,
                                            spaceBetween: 20,
                                        },
                                        992: {
                                        slidesPerView: 4,
                                        spaceBetween: 30,
                                        },
                                        1200: {
                                        slidesPerView: 5,
                                        spaceBetween: 30,
                                        }
                                    },                    
                                    speed: 400,
                                    autoplay: {
                                        delay: 2500,
                                        disableOnInteraction: false,
                                    },
                                    loop : true,
                                    pagination: {
                                        el: '.in-case-con .pagination',
                                        type: 'bullets',
                                        clickable :true,
                                    },
                                })
                            </script> 

推荐资讯