CODEWITHSUNDEEP
cssresponsive-designsplidejs
Samiul Lesum
Samiul Lesum

Reputation: 268

Responsive breakpoints not working for Splide js slider

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!

Upvotes: 6

Views: 13469

Answers (3)

Rihal Ahmed
Rihal Ahmed

Reputation: 11

You have to first correct the pixel frequency. It's coming from largest to smallest. You wrote 767px at the tab, but the tab starts from 768px, so the one pixel is missing from the code. You have to set the pixel at 768px to solve the problem.

document.addEventListener("DOMContentLoaded", function () {
  new Splide(".splide", {
    type: "loop",
    // heightRatio: 0.5,
    // perPage: 5,
    breakpoints: {
      640: {
        perPage: 1,
  
      },
      768: {
        perPage: 2,
    
      },
      1024: {
        perPage: 3,
       
      },
      1440: {
        perPage: 5,
       
      },
    },
    // focus: "center",
    // gap: '2em',
    updateOnMove : true,
    pagination: false,
  }).mount();
});

Upvotes: 1

Rihal Ahmed
Rihal Ahmed

Reputation: 11

document.addEventListener("DOMContentLoaded", function () { new Splide(".splide", { type: "loop", // heightRatio: 0.5, // perPage: 5, breakpoints: { 640: { perPage: 1,

  },
  768: {
    perPage: 2,

  },
  1024: {
    perPage: 3,
   
  },
  1440: {
    perPage: 5,
   
  },
},
// focus: "center",
// gap: '2em',
updateOnMove : true,
pagination: false,

}).mount(); });

Upvotes: -1

frankiejr
frankiejr

Reputation: 96

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>

Upvotes: 8

Related Questions