如何动态改变Swiper中显示的幻灯片数量？

Question

我有一个带有 4 个幻灯片的 Swiper 滑块。
我想要实现的目标：当 window 的宽度为 750px 或更小时，我希望幻灯片的数量减少到 3。

我想要做的是捕捉 window 对象的大小调整，如果它是 750px 或更小，则通过将属性 slidesPerView 的值更改为 3.[=13 来减少幻灯片的数量=] 我的代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script>
        let mySwiper = new Swiper('.swiper-container', {

        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 30,
        loop: true,
        allowTouchMove: false,
        speed: 600,
        
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    
    });
    $(function() {
        $(window).resize(function() {
            let windowWidth = $(window).width();
            if (windowWidth <= 750) {
                mySwiper.slidesPerView = 3;
            }
        });
    });
    </script>
    
    
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
        </div>

        <div class="swiper-pagination"></div>
    

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    

    </div>
</body>
</html>

我怎样才能做到这一点？

Answer 1

以下是根据 window 宽度轻松更改幻灯片数量和 space 的方法：

const swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 6,
  spaceBetween: 45,
  // Responsive breakpoints
  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
     }
    },
    direction: 'horizontal',
    loop: true,
    allowTouchMove: false,
    speed: 600,          

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
})

参考：https://swiperjs.com/swiper-api

如何动态改变Swiper中显示的幻灯片数量？

How to change the displayed amount of slides in Swiper dynamically?

javascript

jquery

swiper