Question

使用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
        }
    }
   });
 });

请帮忙

Answer 1

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

// object [0] .addEventListener（'touchstart'，methods.touchHandler.handleTouchStart，false）; //object[0].addEventListener('touchmove'，methods.touchHandler.handleTouchMove，false）;

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

快乐编码

Answer 2

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

我做的是，只需在 jquery.flexisel.js 中添加以下代码。此文件包含在flexisel包本身中。

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

问题：我们需要在哪个行添加此代码？

答案：打开文件 jquery.flexisel.js 。去行号。 165 （OR）找到行 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;
                    }
                });
            }

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

由于

触摸标签或移动设备时，为Flexisel - Responsive Carousel停止滑动旋转木马

2 个答案: