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

Question

我正在使用这个脚本:

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

我希望当屏幕宽度小于 1000 像素时，“slidesPerView: 3”更改为“slidesPerView: 2”，当屏幕宽度小于 500 像素时，更改为“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
        }
    }
});

因为它是一个小于或等于等式，所以只要去掉一个像素，所以一旦它低于 500px(又名 499px)，重新调整为 1000。

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

Swiper API Docs

编辑

检查网站后，有几处需要更改:

• 需要在文档的head调用Swiper JS文件， 而不是内联两个幻灯片(只需要调用一次， 把它放在 jQuery 脚本标签下面)
• 不能在两张幻灯片上使用相同的类名，因为它会将第一组规则附加到两张幻灯片上
• 确保文档在操作 DOM 之前准备就绪，删除 slider 旁边的 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+ 上测试过，运行良好。