Flexslider 缩略图点击问题 - 中级问题答案

【问题标题】：Flexislider Thumbnails Click Issue - Intermediate IssueFlexslider 缩略图点击问题 - 中级问题
【发布时间】：2015-02-12 16:00:11
【问题描述】：

DEMO

步骤：一次又一次地单击 1-3，然后单击活动缩略图两次，然后下一次缩略图单击将不起作用。

我已经用缩略图实现了 Flexi 滑块，它工作正常，但有时缩略图不可点击。不知道我要去哪里错了。

/* New Slider */
    $('.sliderNew #carousel').flexslider({
        animation       : "slide",
        controlNav      : true,
        animationLoop   : true,
        slideshow       : true,
        itemWidth       : 140,
        itemMargin      : 5,
        minItems        : 1,
        asNavFor        : '.sliderNew #slider',
        reverse         : false
    });

    $('.sliderNew #slider').flexslider({
        animation       : "slide",
        controlNav      : false,
        animationLoop   : true,
        slideshow       : true,
        reverse         : false,        
        sync            : ".sliderNew #carousel",
        start: function( slider ) {
            $('.sliderNew #carousel .slides li').on('click',function(event){
                //alert('asd')
                $('.sliderNew #slider').flexslider("play");
            });
        }       
    });
    /* New Slider */

感谢您的帮助..

谢谢..

【问题讨论】：

如果您的演示页面没有密码保护，这样人们就可以看到它，这会有所帮助！我要做的第一件事是查看是否有其他元素覆盖缩略图。

标签： javascript jquery drupal flexslider

【解决方案1】：

我进行了一些挖掘，发现这可能是由于您正在使用的 FlexSlider 版本（2.1 版）中的一个错误。在 Github 更新中（不幸的是，它们只返回到 2.2 版）我确实读过一些关于“点击处理程序更新”的内容，所以我猜你很不幸偶然发现了一个旧错误。我已经追踪到它to this update on GitHub，但这或多或少是一个猜测。

从好的方面来说，他们已经修复了这个错误。我更新了 JSFiddle 以使用新版本的 FlexSlider： http://jsfiddle.net/ennesht2/

您可能还想检查一下您对 CSS/定位所做的工作，因为该演示看起来在 Safari/Chrome (OSX) 中分崩离析。我在你的 CSS 中做了一个快速修复，使导航元素出现在这个新版本中（取消注释 height:0），但你还需要更新你的 CSS 以使用 FlexSlider 的 2.3 版。

 .sliderNew #carousel .flex-viewport {
     border :none;
     //height:0;
     display:inline-block;
     width:100%;
 }

【讨论】：

感谢您的回复，让我将其与网站整合。会及时通知你。再次感谢
嗨，Eric，将幻灯片和 AnimationLoop 设为 True，Active 类现在不工作 :-(
已更新：将两个值都设为 TRUE 演示：jsfiddle.net/stanze/sq4bmeqs/6

【解决方案2】：

首先，由于您已经在使用 ID 来获取 DOM 元素，因此您可以简单地使用 $('#slider') 而不是 $('.sliderNew #slider')。轮播元素也是同样的逻辑:)

我认为您可能希望在 img 元素上设置点击处理程序，而不是其父元素（li 元素）。所以也许：

start: function( slider ) {
        $('#carousel .slides li img').on('click',function(event){
            $('#slider').flexslider("play");
        });
    }

【讨论】：

【解决方案3】：

我对此有一种预感，我认为每当你的幻灯片运行时，它就会从你的拇指上滑过，这在我参与的一个项目中发生过一次。

以下不是 z-index 的好做法，但它应该可以帮助您找出问题所在。

将以下内容添加到您的 css 以测试理论：

#carousel .slides li{
    z-index:9999;
}

【讨论】：

你有链接吗？或者你可以在小提琴中组装滑块吗？