触摸 Flexisel 的选项卡或移动设备时停止滑块轮播 - 响应式轮播答案

【问题标题】：Stop slider carousel when touch on tab or mobile for Flexisel – Responsive Carousel触摸 Flexisel 的选项卡或移动设备时停止滑块轮播 - 响应式轮播
【发布时间】：2016-05-10 14:32:36
【问题描述】：

我正在使用 flexisel 响应式轮播 exmaple-3 自动轮播。（例如：http://9bitstudios.github.io/flexisel/）Exmaple-3 自动轮播。我想要的是暂停移动和标签设备的手触摸滑块。

有代码让桌面在悬停时暂停轮播。

pauseOnHover: true,

但它不支持移动设备和标签设备。当我在移动设备和设备中触摸轮播时，它不支持。请帮助解决这个问题。 完整的 flexisel 轮播代码如下所示

$(window).load(function() {
$("#flexiselDemo3").flexisel({
    visibleItems: 2,
    animationSpeed: 1000,
    autoPlay: true,
    autoPlaySpeed: 6000,            
    pauseOnHover: true,
    enableResponsiveBreakpoints: true,
    responsiveBreakpoints: { 
        portrait: { 
            changePoint:480,
            visibleItems: 1
        }, 
        landscape: { 
            changePoint:640,
            visibleItems: 2
        },
        tablet: { 
            changePoint:768,
            visibleItems: 2
        }
    }
   });
 });

请帮忙

【问题讨论】：

标签： jquery iphone twitter-bootstrap ipad mobile

【解决方案1】：

如果 flexisel 滑块会在响应式设备上自动滑动，那么您需要打开文件“jquery.flexisel.js”并且只需要注释这两行，这将关闭响应式设备的自动滑动。请参阅以下内容：

//object[0].addEventListener('touchstart', methods.touchHandler.handleTouchStart, false); //object[0].addEventListener('touchmove', methods.touchHandler.handleTouchMove, false);

从我的角度来看，问题已得到解决，并认为这也会对您有所帮助。

快乐编码

【讨论】：

【解决方案2】：

我希望找到在触摸移动设备和标签设备上暂停/停止轮播的解决方案。

我所做的是，只是在 jquery.flexisel.js 中添加了以下代码。该文件包含在 flexisel 包中。

taphold : function() {
    canNavigate = false;
},

问题：我们需要在哪一行添加这段代码？

答案：打开文件jquery.flexisel.js。转到行号。 165（或）找到行 if(settings.pauseOnHover == true)

编辑/更改以下代码

if (settings.pauseOnHover == true) {
                $(".nbs-flexisel-item").on({
                    mouseenter : function() {
                        canNavigate = false;
                    },
                    mouseleave : function() {
                        canNavigate = true;
                    }
                });
            }

到

if (settings.pauseOnHover === true) {
                $(".nbs-flexisel-item").on({
                    mouseenter : function() {
                        canNavigate = false;
                    },
                    taphold : function() {
                        canNavigate = false;
                    },
                    mouseleave : function() {
                        canNavigate = true;
                    }
                });
            }

就是这样。我希望这将有所帮助。

谢谢

【讨论】：