Question

步骤：一次又一次点击1-3，然后点击活动的thumnail两次，然后下一个thumnail点击不会工作。

我已经使用缩略图实现了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版本）我确实阅读了关于＆＃34;点击处理程序更新＆＃34;的东西，所以我猜你是如此不幸偶然发现一个旧的bug。我已将其追溯to this update on GitHub，但这或多或少是猜测。

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

您可能还想检查自己在CSS /定位方面做了些什么，因为该演示看起来好像在Safari / Chrome（OSX）中分崩离析。我已经在你的CSS中做了一个快速修复，使导航元素出现在这个新版本中（取消注释height:0），但是你也想要更新你的CSS以使用FlexSlider＆＃39;版本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-index的好习惯，但它应该可以帮助你找出这是否是问题。

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

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

Flexslider缩略图单击“问题 - 中间问题”

3 个答案: