Option to add custom breakpoints

[ghost]

So I was working on a clients projects and being an e-commerce site it had several products to display. Reading through the docs the current behavior for example defaults from 6-4-2.

I'd prefer if I could choose my own breakpoints since some images/containers don't look how I want them to, e.g it looks too big for that specific break-point

I'm currently using Swiper JS as that's the one being used on the clients site at the moment, an alternative I've looked at is Glide and Splide JS

[nicped]

Thanks for looking into Swiffy Slider.

The number of slides shown is controlled by the css variable --swiffy-slider-item-count.

You can simply create whatever breakpoints you need and set the --swiffy-slider-item-count to the amount of slides you think fits. I agree that the current breakpoints are not super nice on viewports between mobile and tablet.

Here is an example that decreased the number of slides at 768px (using 16 px base size) and again at 576px. Of course you can do whatever you want:

@media (max-width: 48rem) {
    .slider-item-show4 .slider-container {
        --swiffy-slider-item-count: 3;
    }
}

@media (max-width: 36rem) {
    .slider-item-show4 .slider-container {
        --swiffy-slider-item-count: 2;
    }
}

[tcharlss]

This information is really helpful and should be included in the official documentation imho, in the "slider sizes" section.