Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

If "Mouse draggable" is set, swiping on mobile does not work #19

Closed
Grienauer opened this issue Feb 15, 2022 · 3 comments · Fixed by #20
Closed

If "Mouse draggable" is set, swiping on mobile does not work #19

Grienauer opened this issue Feb 15, 2022 · 3 comments · Fixed by #20
Labels
bug Something isn't working

Comments

@Grienauer
Copy link

Currently if "Mouse draggable" is set, it is not possible on mobile phones to drag the slider. I think is a problem and UX could be improved

Describe the solution you'd like
For a better/expected UX it should still be possible to swipe on smartphones even if the setting "Mouse draggable" is set.

Thank you!

@nicped nicped added the bug Something isn't working label Feb 22, 2022
@nicped
Copy link
Member

nicped commented Feb 22, 2022

Hi

Great find - thank you for observing.

I have a possible solution ready for this issue that will use a @media (hover: hover) to encapsulate the slider-nav-mousedrag selectors in the CSS so that the dragging area will only get rendered if the primary pointer device can hover like a mouse.

The result will be like this:

.slider-nav-mousedrag .slider-container {
    cursor: grab;
}

.slider-nav-mousedrag .slider-container.dragging {
    scroll-snap-type: unset;
    scroll-behavior: unset;
    user-select: none;
}

@media (hover: hover) {
    .slider-nav-mousedrag .slider-container::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

Let me know if you have any comments - otherwise

@nicped nicped linked a pull request Feb 22, 2022 that will close this issue
@Grienauer
Copy link
Author

Grienauer commented Feb 23, 2022

We testet it. Drag works on all screen-sizes. will there be a new release soon with this changes?

@nicped
Copy link
Member

nicped commented Feb 23, 2022

Thanks for testing and confirming it works. I have pushed a 1.4.1 release where this issue is fixed!
Thank you for using Swiffy slider and taking the time to report this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants