slider-item-show about swiffy-slider HOT 4 CLOSED

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;
    }
}

from swiffy-slider.

@eschiendorfer - thanks, and yes it is smooth!
The reason for being this smooth is that it uses a scrollable div and no JS at all to do the scroll/sliding.
This is also why the sensitivity cannot be changed because it is handled by your device.

So it will be exactly as sensitive as when you scroll down on a webpage on your phone and behave in the same manner. Users are used to how scrolling works on their phones and that it depends on how fast and how long they swipe the screen.

I am on iOS and it feels nice - with an 'aggressive' swipe it will slide 2 slides, but handled like I normally do will slide only one. This will of course differ from device to device.

from swiffy-slider.

@nicped I found this project just today and had the same question... Unbelievable how smooth this slider is and thanks for the fast answer! Works perfect ;)

The only thing left, that I haven't figured out yet: Is it possible to (force) move only one item? I noticed, that the touch sensitivity is very high on my mobile phone. Sometimes when I swip, it moves two position forward. In my use case this is not wanted, as I only display one item on mobile screens.

from swiffy-slider.

thanks for the fast answer and support

from swiffy-slider.