Question

我有以下＆＃34;响应＆＃34;使用Dangerous swiper制作的滑块，在653px以下的移动设备上一次显示1张幻灯片，在653px以上的桌面上显示可以容纳的数量：如果您在每个屏幕尺寸上加载页面它似乎工作正常，但是当你调整大小（浏览器）它有时会搞砸了。即幻灯片下拉，或者当您再次调整大小时幻灯片宽度会发生变化

目前我有以下代码用于调整大小部分：

$(window).resize(function() {   
        var browserWidthResize = $(window).width(); // New width
                 if (browserWidthResize < 653) {
                        mySwiper.params.slidesPerView=1

                 } else { 
                      mySwiper.params.slidesPerView='auto'
                 }
        });

这会在调整大小时更改slidesperview参数。

但是，我猜测最好在调整大小时使用新设置重新加载滑块，或者可能有更好的方法来解决这个问题？

你可以在这里看到它：

http://machinas.com/wip/hugoboss/responsive-template/v1/

感谢。

Answer 1

了解断点（swiper API）

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 4,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetweenSlides: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetweenSlides: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetweenSlides: 30
    }
  }
})

在调整大小 - 重新加载滑块时更改危险滑块设置

1 个答案: