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

I have a Swiper slider with 4 slides.
What I want to achieve: I want the number of slides to reduce to 3 when the width of the window is 750px or less.

What I'm trying to do is to catch resizing of the window object, and if it's 750px or less, the number of slides is reduced by changing the value of property slidesPerView to 3.
Example of my code is down below:

<!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=".css">
    <link rel="stylesheet" href=".min.css">

    <script src=".js"></script>
    <script src=".min.js"></script>
    <script src=".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>

How can I achieve this?

<!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./swiper/swiper-bundle.css">
    <link rel="stylesheet" href="https://unpkg./swiper/swiper-bundle.min.css">

    <script src="https://unpkg./swiper/swiper-bundle.js"></script>
    <script src="https://unpkg./swiper/swiper-bundle.min.js"></script>
    <script src="http://ajax.googleapis./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>

How can I achieve this? Share Improve this question asked Jan 24, 2021 at 16:11 user15071395

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

Here's how to easily change number of slides and space between them depending on window width:

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',
    }
})

Reference: https://swiperjs./swiper-api

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change the displayed amount of slides in Swiper dynamically? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)