Disable swiper panel/tabs in div

Hello, I’m having contents one div overflow:auto; but after swiper to right, opened the painel.

How to i’m can resolve this problem?

After swiper right:

Thanks!! :slight_smile:

Hi,
You can disable the swipe prop for that page. So you can swipe right without opening the panel.

https://framework7.io/docs/panel.html#panel-app-parameters

...
// dont recall the real prop, this is just an eg
app.panel.swipe: '',
...

Yes, that would be a possibility, but I want to use both, its not possible?

Solution :

    function rolloverDiv(div){
            $$(div).on('touchstart', function(e) {
                var swipe = e.targetTouches,
                div = $$(this).offset();
                start = swipe[0].clientX+div.left;
                $$(div).data('start', start);
            })
            $$(div).on('touchmove', function(e){
                e.stopPropagation();
                e.preventDefault();              
            });
            $$(div).on('touchmove', function(e) {
                start = $$(div).data('start');
                var swipe = e.targetTouches,
                div = $$(this).offset();
                value = (start - swipe[0].clientX);
                var top = (value);
                if(top < 0){
                    top = 0;
                }
                $$(div).scrollLeft(top);
            });
        }

If you want to prevent swipe panel from opening you can just add “no-swipe-panel” class to element you want to block it

2 Likes

nice, another class to no swipe is : swiper-no-swiping. I use inside in tabs-swipeable-wrap.

thanks very mutch, your work is amazing!

1 Like