Flexslider：鼠标悬停时恢复幻灯片演示

Question

我想设置Flexslider，让它在鼠标悬停时开始/恢复自动幻灯片演示，并在鼠标移开时暂停。这与正常行为完全相反。 ：D

所以我有这个问题： TypeError：'undefined' 不是一个函数（评估 'slider.resume（）' ） 在互联网上搜索没有产生任何结果。

我的脚本是：

    $( document ).ready(function() {
    var $slider = $('.flexslider');

    $slider.flexslider({
    controlNav: false,
    directionNav: false, 
    slideshow: true,
    slideshowSpeed: 500,
    animationSpeed: 300,
    /*randomize: true,*/
    controlsContainer: ".flex-container",
    start: function(slider) {
        slider.pause();
        slider.mouseover(function() {
        slider.resume();
    });
  },
});

任何指向正确方向的指引都将是有帮助的。

Luka

*更新...我已经找到了一个可行的解决方案...如果有人想知道，这就是:

start: function(slider) {
        slider.pause();
        slider.manualPause = true;
        $slider.mouseover(function() {
            slider.manualPause = false;
            slider.play();
        });
        $slider.mouseout(function() {
            slider.manualPause = true;
            slider.pause();
        });
  }

卢卡

- Luka Mis

---

请将此内容翻译为中文：将其作为响应并标记为已解决，以使其更易读。谢谢。 - Mounir

完成。谢谢您让我知道。 - Luka Mis

Answer 1

我找到了一个可行的解决方案：

start: function(slider) {
        slider.pause();
        slider.manualPause = true;
        slider.mouseover(function() {
            slider.manualPause = false;
            slider.play();
        });
        slider.mouseout(function() {
            slider.manualPause = true;
            slider.pause();
        });
  }

- Luka Mis

Answer 2

以后参考，您不必在滑块设置中添加功能。 如果希望在页面上悬停在任何元素上时暂停滑块，则可以添加类似于以下内容：

$hoveredElement.on('focusin', function() {

  $slider.slick('slickPause');

});

或者在悬停时恢复自动播放：

$hoveredElement.on('focusin', function() {

  $slider.slick('slickPlay');

});

前提是你已经首先声明了你的$slider设置！

- ztrat4dkyle

Answer 3

实际上这个效果更好：

start: function(slider) {
    slider.pause();
    slider.manualPause = true;
    slider.mouseenter(function(){
        slider.flexslider('next');
        slider.play();
        slider.manualPause = false;
    });
    slider.parent().mouseleave(function() {
        slider.manualPause = true;
        slider.pause();
    });
}

它可以防止函数多次触发，并且允许直接进入下一张幻灯片，而无需等待play()函数的初始延迟。

- ybdigital