javascript - Flexslider 缩略图点击问题 - 中间问题

Question

DEMO

步骤:一次又一次单击 1-3，然后单击事件缩略图两次，然后下一次单击缩略图将不起作用。

我已经实现了带有缩略图的 Flexi Slider，它工作正常，但有时缩略图不可点击。不确定我要去哪里错了。

/* 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 */

感谢您的帮助..

谢谢..

Answer 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%;
 }