在 flexslider 上禁用/启用触摸事件答案

【问题标题】：Disable/enable touch events on flexslider在 flexslider 上禁用/启用触摸事件
【发布时间】：2013-08-10 19:11:50
【问题描述】：

我正在使用 flexslider 滑动一些内容：http://iea.uili.com.br/v4/ 问题是我想在放大时禁用触摸并在缩小时启用返回，对于键盘控制也是如此！

这是我点击任何建筑物放大时的功能

function janelas(){     
      $('.popup').click(function() { 
        var $id = $(this).attr('class').split(' ')[2];
        $('.menu_janela').fadeOut('fast');

        $("ul.flex-direction-nav").addClass('hide');
        setTimeout(function(){
            console.log('.'+$id+'-popup')
            $('.'+$id+'-popup').fadeIn('fast');
        },600);
      });   

}

这是缩小时的功能

function fecha(){
    $('.fechaa').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
        $('.view1').click();
    });

    $('.fechab').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
        $('.view2').click();
    });

    $('.fechac').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
        $('.view3').click();
    });

    $('.zoomContainer').click(function()  { 
        $("ul.flex-direction-nav").removeClass('hide');
        $('.menu_janela').fadeOut();
    });
}

这是滑块的功能

function Slider(){
    $captions = $('.captions');
        $('.flexslider').flexslider({
        animation: "slide",
        slideshow: false,
        animationSpeed: 1500,
        controlNav: false,
        keyboard: true,
        touch: true,
        start: function(slider) {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.text()); 
            $('.loading-container').fadeOut(function() {
              $(this).remove();
            });
            $('.centro').centro();

            janelas();
            fecha();
        },
        before: function(slide) {

        },
        after: function(slide) {
            $activecaption = $('.flex-active-slide .flex-caption');
            $captions.html($activecaption.text());

        },
        end: function(slide) {
        },
    });
}

【问题讨论】：

标签： jquery touch flexslider touch-event

【解决方案1】：

我遇到了类似的问题，但是当用户从任何幻灯片中选择文本时，我必须禁用滑块 - 因为当您在幻灯片之后选择文本时 - 选择仍然可见，尽管您在另一张幻灯片。很奇怪:)… 所以，我所做的是：

创建了一个每 200 毫秒调用一次的函数，并将全局变量设置为 true 或 false，具体取决于是否选择了任何文本。
在滑块代码中添加了三个 if 语句，用于检查此变量以及是否有选定的文本 - 那么我不会更改幻灯片。

这三个地方在onTouchStart、onTouchMove和onTouchEnd内部回调里面，里面的代码只有在没有选中文本的情况下才会执行。

我仍在改进这一点，但决定分享迄今为止的进展:) ...

【讨论】：

【解决方案2】：

工作示例：

if ($('#flexslider').length > 0) {
    var Len = $('#flexslider li').length;
    var Len;
    if(Len >1){
        swipe = true;
    }
    else{
       swipe = false;   
    }
    $('#flexslider').flexslider({
        animation: "slide",
        controlNav: false,
        touch:swipe,
        after: function(slide) {
            //console.log(slider....);
        }

    });
}

【讨论】：