Flexslider 在鼠标悬停时恢复幻灯片答案

【问题标题】：Flexslider resume slideshow on mouseoverFlexslider 在鼠标悬停时恢复幻灯片
【发布时间】：2018-02-26 08:36:37
【问题描述】：

我想设置 flexslider，使其在鼠标悬停时启动/恢复自动幻灯片放映，并在鼠标悬停时暂停。与正常行为完全相反。 :D

所以我有这个问题： TypeError：“未定义”不是函数（评估“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();
    });
  },
});

});

任何指向正确方向的指针都会有所帮助。

卢卡

*更新...我找到了一个可行的解决方案...如果有人想知道是这样的：

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

卢卡

【问题讨论】：

将此作为响应并将其标记为已解决，以提高可读性。谢谢
完成。 Tnx 让我知道。

标签： javascript jquery flexslider

【解决方案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();
        });
  }

【讨论】：

【解决方案2】：

其实这样会好一点：

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() 函数的初始延迟。

【讨论】：

【解决方案3】：

为了将来参考，您不必在滑块设置中添加您的功能。如果您想在将鼠标悬停在页面上的任何元素上时暂停滑块，您可以添加这样的内容：

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

  $slider.slick('slickPause');

});

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

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

  $slider.slick('slickPlay');

});

所有这些都假设您首先声明了您的 $slider 设置！

【讨论】：