Flexislider缩略图单击问题-中间问题

Question

演示

步骤：一次又一次点击1-3，然后点击两次活动的thumbail，然后下一次点击thumbail将不起作用。

我已经用缩略图实现了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版），我确实读到了一些关于"点击处理程序更新"的内容，所以我想您很不幸遇到了一个旧错误。我在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%;
 }

Answer 2

首先，由于您已经在使用ID来获取DOM元素，因此您可以简单地使用$('#slider')而不是$('.sliderNew #slider')。转盘元件的逻辑相同：）

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

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

Answer 3

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

以下不是z索引的良好实践，但它应该可以帮助您找出问题是否存在。

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

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