Flexslider-可以通过悬停而不是单击进行控制

Question

我使用的是带有手动控制的flexslider，它工作正常。但是，当您将鼠标悬停在控件上时，我需要它们来更改幻灯片，而不是单击控件。这可能吗？我查看了js文件，找不到要更改的点击函数。

这是flexroader js：https://raw.github.com/woothemes/FlexSlider/master/jquery.flexslider.js

这是我的代码：

$(window).load(function(){
    $('.flexslider').flexslider({
     animation: "slide",
     directionNav: true,
     controlsContainer: "header#site",
     manualControls: ".nav1 li"
    });
});

HTML（简化）如下：

<header id="site">
<ul class="nav1">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div class="flexslider">
<ul class="slides">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
</div>
</header>

Answer 1

在jquery.flexslider.js中，您只需要在第21行更改：

eventType = "click touchend MSPointerUp"

至

eventType = "mouseover touchend MSPointerUp"

因此它对mouseover做出反应，点击事件可以用于链接。

Answer 2

也想得到这个问题的答案。找到了一种只需悬停就可以触发它的方法，但我也需要使用点击功能，所以现在我得到了一些好斗的js。以下是我所做的工作，允许悬停和单击来移动幻灯片，但我只想用悬停来代替单击。

    start: function(slider){
            jQuery('.custom-pagination li').mouseover(function(){
                 var activeSlide = 'false';
                 if (jQuery(this).hasClass('flex-active')){  
                    activeSlide = 'true';                       
                 }
                 if (activeSlide == 'false'){
                  jQuery(this).trigger("click"); 
                 }
             });      
        }

Answer 3

    $(".flex-control-nav li").hover(function() { 
         $(this).parent().parent().flexslider($(this).index());
    });

只有当您将鼠标悬停在列表项目上而不是导航按钮上时，幻灯片才会更改。

Answer 4

我需要你能够点击controlnav中的链接来转到一篇文章。我根据frendo的回答构建了这个，并将其添加到我的flexslider函数中：

        start: function (slider) {
        $('.top-btns a').mouseover(function () {
            $('#home-banner').flexslider($(this).index());
        });

然后，在javascript的其他地方：

$(document).ready(function () {
    $('.top-btns a').click(function () {
        window.location.href = $(this).attr('href');
    });
});

您需要更改".top btns a"以引用您的controlnav，并将"#home banner"更改为您想要更改的柔性滑块。然后，我让controlnav中每个链接的href成为您希望用户导航到的页面。

Answer 5

这是解决此问题的简单方法：

jQuery('.flex-control-nav li').on('mouseenter', function () {
    $(this).trigger('click');
});

Answer 6

感谢大家的回答对我帮助很大，我无法使用这些答案，因为我正在进行的项目不允许我更改flexroader脚本或初始化脚本。

下面的解决方案允许您在柔性滑块中具有manualControl列表元素，从而使您在其中具有自定义链接。当你悬停时，它会更改幻灯片，如果你点击它，它会转到页面。

//Define the navigation elements of the manualControls flexslider
            var $sb = $('.product-slider-nav li a');
//Flexslider click hover handler
            function FlexHoverHandler(event) {
                $element = $(this);
                if (event.data.event == 'mouseover') {
                    $element.trigger('click');
                }
                if (event.data.event == 'mouseup') {
                    window.location.href = $element.attr('href');
                }
            }
//Bind mouseover and mouseup 
            $sb.on('mouseover', {event: 'mouseover'}, FlexHoverHandler);
            $sb.on('mouseup', {event: 'mouseup'}, FlexHoverHandler);