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

Question

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 ?

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.

Answer 1

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

Answer 2

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: