CODEWITHSUNDEEP
htmlcssionic-framework
Sung Kim
Sung Kim

Reputation: 8536

ionic: Can I disable the swipe action in a certain area <div> in <ion-slide>?

Basically, I want to put a inside . However, the ion-slide swipe is so sensitive, so I cannot scroll the content in . It just swipes to the next slide.

Is it possible to disable the swipe action in a certain area in ?

enter image description here

As shown in the picture, I want to disable the swipe action on the B area. I guess (if possible) I need to put some class in ion-scroll and/or div under it, but I could not figure it out.

This is my partial HTML code:

<ion-slide-box on-slide-changed="slideHasChanged($index)">    
  <ion-slide>
  ... // A area content
  <ion-scroll direction="x" ...>
    <div style="width: 5000px; height: 100px" ...>
      // B area. Very wide content
    </div>
  </ion-scroll>
  ... // C area content
 </ion-slide>
</ion-slide-box>

I really appreciate your help.

Upvotes: 4

Views: 3374

Answers (3)

Paulo Andr&#233; Haacke
Paulo Andr&#233; Haacke

Reputation: 402

Since google sent me here when i was searching for solutions using ion-slides (instead of ion-slide-box) i will leave here the solution i ended up using.

One thing first: ion-slide-box is currently deprecated, so you should use ion-slides now.

First set options variable in ion-slides element:

<ion-slides options="options">

Then inside your controller you should configure the options variable with the noSwiping options as follows:

$scope.options = {
            noSwiping: true,
            noSwipingClass: 'do_not_swipe',
        }

And then, in an element inside your ion-slide-page add the "do_not_swipe" class to the element you want swipe to be disabled.

Taking your code as an example, you should have your html like this:

<ion-slides options="options">    
  <ion-slide-page>
  ... // A area content
  <ion-scroll class='do_not_swipe' direction="x" ...>
    <div style="width: 5000px; height: 100px" ...>
      // B area. Very wide content
    </div>
  </ion-scroll>
  ... // C area content
 </ion-slide-page>
</ion-slides>

Upvotes: 2

nicfo
nicfo

Reputation: 450

Here's another approach: add these to the wide element:

<div on-touch="mouseoverWideDiv()" on-release="mouseleaveWideDiv()">

then in your controller:

$scope.mouseoverWideDiv = function() {
    $ionicSlideBoxDelegate.enableSlide(false);
};

$scope.mouseleaveWideDiv = function() {
    $ionicSlideBoxDelegate.enableSlide(true);
};

Upvotes: 5

Zuhaib Siddiqui
Zuhaib Siddiqui

Reputation: 56

Here is another way of doing this: In your controller add a function:

$scope.disableSwipe = function() {
   $ionicSlideBoxDelegate.enableSlide(false);
};

In your view add the ng-init attribute on the slide-box element

<ion-slide-box ng-init="disableSwipe()">

This will disable the slide-event. You can now use a controller function to slide to a given index like this:

Upvotes: 2

Related Questions