Responsive breakpoints not working for Splide js slider

Question

I am implementing a carousel slider with Splide js. When I resize the browser to 767, the responsive breakpoint settings don't work. It only shows the breakpoint settings for 1024 on all screens including tablet and mobile.

Here is my code:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        new Splide("#card-slider", {
          type: "loop",
          heightRatio: 0.5,
          perPage: 5,
          breakpoints: {
            640: {
              perPage: 1,
        
            },
            767: {
              perPage: 2,
          
            },
            1024: {
              perPage: 3,
             
            },
          },
          focus: "center",
          gap: '2em',
          updateOnMove : true,
          pagination: false,
        }).mount();
      });
</script>

Am I missing something here? Is there a workaround to make this work on all breakpoints? Thanks in advance!

Answer 1

The breakpoints have to be in order from largest to smallest:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        new Splide("#card-slider", {
          type: "loop",
          heightRatio: 0.5,
          perPage: 5,
          breakpoints: {
            1024: {
              perPage: 3,
             
            },
            767: {
              perPage: 2,
          
            },
            640: {
              perPage: 1,
        
            },
          },
          focus: "center",
          gap: '2em',
          updateOnMove : true,
          pagination: false,
        }).mount();
      });
</script>