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

如 所述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方程，所以只要去掉一个像素，一旦它低于 500 像素（又名 499 像素），重新调整和 1000 相同。

我把spaceBetweenSlides留在那里让你弄乱，但如果你想把它保持在50，请随意从breakpoints.

Swiper API 文档

编辑

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

• 需要调用文档中的Swiper JS文件head，而不是内联两个幻灯片（只需要调用一次，放在jQuery脚本标签下面）
• 两个幻灯片上不能有相同的类名，因为它会将第一组规则附加到两个滑块
• 在操作之前确保文档已准备好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，这不是有效的 HTML，因此更改 ID 并以这种方式附加 Swipers。所以现在你的容器将是这样的：

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

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

编辑 1.1

似乎该breakpoints方法是函数中真正的“断点”，因为它有一种奇怪的方式来处理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+ 上进行了测试，并且运行良好。