Dragging an dClick

[mucan54]

When I enable dragging functionality I'm unable to click the link and can not redirect.

[nicped]

Yes, the CSS class will place an element over the entire sliding area. And it actually seems like it is not needed.

You can add this css to your implementation after you include Swiffy Slider CSS and that should fix the issue for now.

.slider-nav-mousedrag .slider-container::after {
   content: inherit!important;
   position: inherit!important; 
   width: 0; 
   height: 0; 
}

I'll make a permanent fix.

[finex]

Hi @nicped, I've tried your solution but if you have an image gallery with linked images, the fix does not work well because when you click on the image to start the mouse drag action, the browser tries to move the image and when the mouse is released the link is triggered.

[nicped]

Thanks for commenting and testing.

I agree that links and mouse dragging is a bad combo. I will not fix it further as it would just result in more JS that defeats the purpose of having a fast and slim component.

There is a reason that mouse drag is not part of the primary package - I believe mouse dragging is bad UX and a legacy from when it was a coder-show-off - it was never made for the end-user.

If mouse dragging in these cases are important features for the users of the website you are building, then one of the old style slider components might be a better fit.

[mucan54]

@nicped In fact dragging functionality and swiping is not the same thing. I believe swipe is commonly used on slider for mobile users. Here is a simple example to show differences between drag and swipe.

https://codepen.io/pamcy/pen/JaWOBo

And I think we can implement this feature with simple changes:

                 if (start_x > end_x) { // scroll next
                    swiffyslider.slide(sliderElement, true);
                } else if (start_x < end_x) { // scroll prev
                    swiffyslider.slide(sliderElement, false);
                }

I think this feature should be enabled as default at least mobile users.

[nicped]

Thanks - I understand the difference between dragging with mouse and sliding on mobile using fingers.

This issue is related to clicking a link while dragging is active - another reason why dragging should never be used. I am not sure I understand how your code piece would solve that particular issue?

Also my point is that dragging with the mouse on a desktop is really weird UX. Why would you ever drag with the mouse if you can click an arrow? That kind of feature was never made because the user of the website needs it....

[mucan54]

    const container = document.getElementById('myslider');
    var links = document.getElementsByClassName('slider-link');
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", linkchecked);
    }

    function linkchecked(e) {
        let scrolled_distance = Math.abs(start_x - end_x);
        if (scrolled_distance > 250) {
            e.preventDefault();
            calculateFinalMoveDistance(e);
            return false;
        }
    }

    function calculateFinalMoveDistance(e) {
        let scrolled_distance = Math.abs(start_x - end_x);
        if (start_x > end_x) { // scroll next
            swiffyslider.slide(document.getElementById('animatedText<?= $sliderId ?>'), true);
        } else if (start_x < end_x) { // scroll prev
            swiffyslider.slide(document.getElementById('animatedText<?= $sliderId ?>'), false);
        }
    }

    container.addEventListener('mousedown', (e) => {
        e.preventDefault();
        pointer_is_down = true;
        start_x = e.pageX;
    });

    container.addEventListener('mousemove', (e) => {
        e.preventDefault();
        if (!pointer_is_down) return false;
        end_x = e.pageX;
    });

    container.addEventListener('mouseleave', handleMouseLeave);

    container.addEventListener('touchend', handleMouseLeave);

    container.addEventListener('mouseup', (e) => {
        e.preventDefault();
        pointer_is_down = false;
        calculateFinalMoveDistance();
    });

    container.addEventListener('touchstart', (e) => {
        pointer_is_down = true;
        start_x = e.touches[0].pageX;
    });

    container.addEventListener('touchmove', (e) => {
        if (!pointer_is_down) return false;
        end_x = e.touches[0].pageX;
    });

[mucan54]

Please check @nicped

https://github.com/dynamicweb/swiffy-slider/pull/85