Freely touch navigation + Ratios

[r-moon]

First, congrats on your work, I am trying to know after reading the docs and see the Easy configuration of Swiffy Slider if:

1.- Is there any way to leave the users move the slides freely, I mean that when I try to move 2, for example it does not move 2 it goes 1 by 1. I tried "slider-item-nosnap" but it does not work.

2.- Is there any way to change the ratios (slider-item-ratio) according to the screens? I am working with Bulma and should I include the ratio css classes to the breakpoints? Would swiffy work?. That way in a mobile screen the ratio would be a different one from a dektop for example.

Thank you and all the best, congrats again for your work.

[nicped]

Thank you for giving Swiffy Slider a spin!

1: slider-item-nosnap and slider-item-nosnap-touch both give you that option - but not when using mousedragging. But if you use a touch screen on your laptop, a tablet or your phone it will enable free sliding. I.e. try this configuration using a touch device using the touch input: https://swiffyslider.com/configuration/?slider-item-nosnap-touch=slider-item-nosnap-touch

It is not possible to do freely slides using the drag feature - I am not fan of the drag feature at all by the way.

2: With a bit of custom css you can do that. The ratio of the slides are handled by the --swiffy-slider-item-ratio css variable, so by changing the value of that variable using media queries.

Lets say you use ratio, and your default for larger displays is 21:9 (wide screen):

<div class="swiffy-slider slider-item-ratio slider-item-ratio-21x9">...</div>

Then you can add this piece of CSS to change the ratio to 4:3 format on smaller screens which is better for mobile displays:

@media (max-width: 48rem) {
    .swiffy-slider .slider-item-ratio-16x9 {
        --swiffy-slider-item-ratio: 4/3;
    }
}

Alternatively you can also look at the orientation of the screen - using orientation media query you can change the ratio if a phone in portrait mode is used and stick with 16:9 ratio in landscape mode.

@media (orientation: portrait) {
    .swiffy-slider .slider-item-ratio-16x9 {
        --swiffy-slider-item-ratio: 4/3;
    }
}

[r-moon]

@nicped , Nicolai, thank you for your reply!.

About 1 I understand and I think it will be ok, and about 2 that is what I had in mind, now I am sure I can handle them through that variable.

Brilliant!, thank you again.