当前位置:首页>新闻中心>网站建设

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',
            },
            });

image.png

但是显示在手机上不能显示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',
              },
              });

image.png


那么我们就可以通过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
               }   
            }  

            });



在线咨询

点击这里给我发消息 售前咨询专员

点击这里给我发消息 售后服务专员

咨询

免费通话

24小时免费咨询

请输入您的联系电话,座机请加区号

通话

微信扫一扫

微信
返回