CODEWITHSUNDEEP
jqueryiphonetwitter-bootstrapipadmobile
AmmuSha
AmmuSha

Reputation: 51

Stop slider carousel when touch on tab or mobile for Flexisel – Responsive Carousel

Am using flexisel responsive carousel exmaple-3 auto carousel. (Ex: http://9bitstudios.github.io/flexisel/) Exmaple-3 auto carousel. What i want is to pause the slider on hand touch for mobile and tab devices.

There is code for the desktop to pause carousel on hover.

pauseOnHover: true,

But it is not supporting for the mobile and tab devices. When i touched on the carousel in mobile and devices, it is not supporting. Please help on this. The full flexisel carousel code is given below

$(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
        }
    }
   });
 });

Please help

Upvotes: 0

Views: 1591

Answers (2)

Abhisek Saha
Abhisek Saha

Reputation: 31

If the flexisel slider will automatically slides on responsive devices then you need to open the file "jquery.flexisel.js" and just need to commented these two lines, which will turn off the automatically slides for responsive devices. Please see the following :

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

From my end the issue has been resolved and think that this will help you also.

Happy Coding

Upvotes: 1

AmmuSha
AmmuSha

Reputation: 51

I hope, found solution for pause/stop carousel on touching mobile and tab devices.

What i did is, just added the below code in jquery.flexisel.js. This file is included in the flexisel package itself.

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

Question: Where we need to add this code in which line no?

Answer: Open the file jquery.flexisel.js. Go to line no. 165 (OR) find the line if(settings.pauseOnHover == true)

Edit/change the below code 

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

to

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

That's it. I hope this will help.

Thanks

Upvotes: 0

Related Questions