ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.26k stars 785 forks source link

slider.pause() don't work like expected #445

Open Teisi opened 5 years ago

Teisi commented 5 years ago

Issue description:
slider.pause() don't work. If i set slider.pause() then the slider should be paused/stopped, but it is only paused/stopped if i have my mouse over the slider itself.

Demo link/slider setting:
example:

slider.events.on("dragEnd", function(info, eventName)  {
                            slider.pause();
});

and this config:

{
    "container": ".slider-container-5",
    "mode": "carousel",
    "axis": "horizontal",
    "items": 1,
    "gutter": 0,
    "edgePadding": 0,
    "fixedWidth": false,
    "autoWidth": false,
    "viewportMax": false,
    "slideBy": 1,
    "center": true,
    "controls": false,
    "controlsPosition": "bottom",
    "controlsText": ["prev", "next"],
    "controlsContainer": false,
    "prevButton": ".slider-button-next",
    "nextButton": ".slider-button-prev",
    "nav": false,
    "navPosition": "bottom",
    "navContainer": false,
    "navAsThumbnails": false,
    "arrowKeys": true,
    "speed": 1000,
    "autoplay": true,
    "autoplayPosition": "top",
    "autoplayTimeout": 10000,
    "autoplayDirection": "forward",
    "autoplayText": ["start", "stop"],
    "autoplayHoverPause": false,
    "autoplayButton": false,
    "autoplayButtonOutput": false,
    "autoplayResetOnVisibility": true,
    "animateIn": "tns-fadeIn",
    "animateOut": "tns-fadeOut",
    "animateNormal": "tns-normal",
    "animateDelay": false,
    "loop": true,
    "rewind": false,
    "autoHeight": false,
    "lazyload": false,
    "lazyloadSelector": ".tns-lazy-img",
    "touch": true,
    "mouseDrag": true,
    "swipeAngle": 15,
    "preventActionWhenRunning": false,
    "preventScrollOnTouch": false,
    "nested": false,
    "freezable": false,
    "disable": false,
    "startIndex": 0,
    "onInit": false,
    "useLocalStorage": true
}

Tiny-slider version: 2.9.1 Browser name && version: all browser OS name && version: windows 10

Teisi commented 5 years ago

Fix: added removeEvents(container, {'mouseleave': onPanEnd}); to function pause () and added addEvents(container, {'mouseleave': onPanEnd}); to function play()

function pause () {
        if (animating) {
          removeEvents(container, {'mouseleave': onPanEnd});
          stopAutoplay();
          autoplayUserPaused = true;
        }
      }
function play () {
        if (autoplay && !animating) {
          startAutoplay();
          addEvents(container, {'mouseleave': onPanEnd});
          autoplayUserPaused = false;
        }
      }