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

user_15071395 0
Viewed 5080

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="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>


How can I achieve this?
swiper.js jquery javascript
1 Answers

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.com/swiper-api

user_39899050
Related