JavaScript 中的媒体查询 - 如何在 "Swiper" 幻灯片中添加断点和更改 "slidesPerView"

Question

我正在使用这个脚本：

    var swiper = new Swiper('.swiper', {
    slidesPerView: 3,
    spaceBetween: 50,
});

我希望当屏幕宽度小于 1000px 时 "slidesPerView: 3" 更改为 "slidesPerView: 2"，当屏幕宽度小于 500px 时更改为 "slidesPerView: 1"。

由于我对 javascript 语法一无所知，请帮助我编写完整代码。

感谢您的帮助。

编辑：

谢谢大家的回复。

虽然我仍然无法让它工作...

下面是完整的脚本。

我做错了什么？？？

var swiper2 = new Swiper('.swiper2', {
    slidesPerView: 3,
    spaceBetween: 50,
    freeMode: true,
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    breakpoints: {
        // when window width is <= 499px
        499: {
            slidesPerView: 1,
            spaceBetweenSlides: 30
        },
        // when window width is <= 999px
        999: {
            slidesPerView: 2,
            spaceBetweenSlides: 40
        }
    }
});

Answer 1

你可以使用 window.matchMedia() https://developer.mozilla.org/it/docs/Web/API/Window/matchMedia

 if (window.matchMedia("(min-width: 1000px)").matches) {
      /* the viewport is at least 1000 pixels wide */
    } else if (window.matchMedia("(max-width: 999px)").matches){
      /* the viewport is less than 999 pixels wide */
    } else if (window.matchMedia("(max-width: 500px)").matches){
      /* the viewport is less than 500 pixels wide */
    }

Answer 2

window.matchMedia 允许您使用 CSS 中使用的相同语法编写媒体查询。 This is supported by all major browsers with IE > 9

I would like the "slidesPerView: 3" to change to "slidesPerView: 2" when the screen width gets smaller then 1000px, and to "slidesPerView: 1" when screen width gets smaller then 500px.

以下是使用纯 CSS 的方法：

/* means: if the viewport size is 501px wide or wider, and lower or equal to 999px... */
@media (min-width: 501px) and (max-width: 999px) {

  /* then apply some CSS rules to selectors below : */
  .my-element {
    ...
  }
}

和 Javascript 中的等价物：

/* first you need to check if window.matchMedia is supported by the current browser */
if ("matchMedia" in window) {
  if (window.matchMedia("(min-width: 501px) and (max-width: 999px)").matches) {
    // slidesPerView: 2
  } 
  else if (window.matchMedia("(max-width: 500px)").matches) {
    // slidesPerView: 1
  }
  else {
    // slidesPerView: 3
  }
}

Answer 3

如A Wolff所述，首先查看文档并使用breakpoints方法，例如：

var swiper = new Swiper('.swiper', {
    // Default parameters
    slidesPerView: 3,
    spaceBetween: 50,
    // Responsive breakpoints
    breakpoints: {
        // when window width is <= 499px
        499: {
            slidesPerView: 1,
            spaceBetweenSlides: 50
        },
        // when window width is <= 999px
        999: {
            slidesPerView: 2,
            spaceBetweenSlides: 50
        }
    }
});

因为它是一个 less than or equal to 等式，所以只要去掉一个像素，所以一旦它低于 500px（又名 499px），重新调整并与 1000 相同。

我把 spaceBetweenSlides 留在那里让你乱搞，但如果你只想把它保留在 50，请随时将它们从 breakpoints 中删除。

Swiper API Docs

编辑

查看网站后，有几处需要更改：

需要调用文档head中的Swiper JS文件，而不是内联两个幻灯片（只需要调用一次，把它放在 jQuery 脚本标签下面）
不能在两张幻灯片上使用相同的 class 名称，因为它会将第一组规则附加到两张幻灯片上
确保文档在操作 DOM 之前准备就绪，删除滑块旁边的 script 标签并将其放入 head

以下是我设置 Swipers 的方法：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Add this part below the jQuery script call -->
<script src="js/slideshow-swiper.min.js"></script>
<script>
    // Once the DOM has loaded, attach the Swiper(s)
    $(function(){
        var swiper_banner = new Swiper('#slideshow_banner', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true
        });
        var swiper_services = new Swiper('#slideshow_services', {
            slidesPerView: 3,
            spaceBetween: 50,
            freeMode: true,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            breakpoints: {
                // when window width is <= 499px
                499: {
                    slidesPerView: 1,
                    spaceBetweenSlides: 30
                },
                // when window width is <= 999px
                999: {
                    slidesPerView: 2,
                    spaceBetweenSlides: 40
                }
            }
        });
    });
</script>
<!-- Continue loading fonts, etc -->

不要将 jQuery 文件添加到那里两次，只是将它放在那里作为参考点。此外，两个容器具有相同的 ID，并且该 ID 无效 HTML，因此请更改 ID 并以这种方式连接 Swipers。所以现在你的容器应该是这样的：

<div class="swiper-container" id="slideshow_banner"><!-- Code --></div>
...
<div class="swiper-container" id="slideshow_services"><!-- Code --></div>

更新后，它应该会自行修复，但是我无法在您的网站上对其进行实时测试，所以请在您更新代码后告诉我，我会看一看。

编辑 1.1

似乎 breakpoints 方法在函数中是一个真正的 'breakpoint'，因为它有一种奇怪的方式来处理传递的 Object，因此在不同的浏览器中会产生不同的结果，所以使用 onResize() 方法和一些 JS，让我们解决这个问题：

<script>
    // Once the DOM has loaded, attach the Swiper(s)
    $(function(){
        var swiper_banner = new Swiper('#slideshow_banner', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true
        });
        var swiper_services = new Swiper('#slideshow_services', {
            slidesPerView: 3,
            spaceBetween: 50,
            freeMode: true,
            loop: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev'
        });
        // Breakpoints
        $(window).on('resize', function(){
            var width = $(window).width();
            if(width < 1000 && width >= 500) {
                swiper_services.params.slidesPerView = 2;
                swiper_services.params.spaceBetween = 40;
            } else if(width < 500) {
                swiper_services.params.slidesPerView = 1;
                swiper_services.params.spaceBetween = 30;
            } else {
                swiper_services.params.slidesPerView = 3;
                swiper_services.params.spaceBetween = 50;
            }
            swiper_services.onResize();
        }).resize();    
    });
</script>

好了，应该可以了。我在 Chrome、FF 和 IE9+ 上测试过运行没问题。

Answer 4

将@faino 的回答更新为jQuery 免费

   let onresize = function (e) {
   let width = e.target.innerWidth;
        if (width < 500) {
            swiper_services.params.spaceBetween = 100;
        } else {
            swiper_services.params.spaceBetween = 50;
        }
    }
    window.addEventListener("resize", onresize);

Answer 5

你可以按照这个例子。

breakpoints: {
  // when window width is >= 320px
  320: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  // when window width is >= 480px
  480: {
    slidesPerView: 3,
    spaceBetween: 30
  },
  // when window width is >= 640px
  640: {
    slidesPerView: 4,
    spaceBetween: 40
  }
}

JavaScript 中的媒体查询 - 如何在 "Swiper" 幻灯片中添加断点和更改 "slidesPerView"

Media Queries in JavaScript - How to add Breakpoints and change "slidesPerView" in "Swiper" Slideshow

javascript

css

media-queries