Disable ion-side-menus only within a specific div container

I am trying to add an image slider to my page but when scrolling left on the image slider, it causes the side menu to reveal itself as well. I still want the side menu to work on the page, just not in the div containing the image slider.

Below are the relevant files with some sections omitted for brevity. Basically, a page called clients.html is injected between the ion-nav-view tags in index.html. This clients page has a custom directive called img-slider, whose html is defined in directive.html. The image slider has a container "swiper container", and this is the container in which I want the side menu to be disabled. Any dragging events outside this div should still trigger the left menu.

In case it's relevant, the image slider uses a third party library called Swiper.

index.html

<!DOCTYPE html>
<html>
<head>
...
</head>

<body ng-app="starter">

    <ion-side-menus>

        <!-- Center content -->
        <ion-side-menu-content ng-controller="menuCtrl as vm">
            <div class="list">

                <div class="item">
                    <a href="#/clients">
                        <i class="icon ion-person-stalker"></i>
                        Clients
                    </a>
                </div>
                <div class="item">
                    <a href="#/appointments">
                        <i class="icon ion-calendar"></i>
                        Meetings
                    </a>
                </div>
                <div class="item">
                    <a href="#/products">
                        <i class="icon ion-pricetag"></i>
                        Products
                    </a> 
                </div>
                <div class="item">
                    <a href="#/sales">
                        <i class="icon ion-social-usd"></i>
                        Sales
                    </a>
                </div>
                <div class="item" ng-click="vm.logout()">
                    Disconnect
                </div>

            </div>
        </ion-side-menu-content>

        <!-- Left menu -->
        <ion-side-menu side="left">
        </ion-side-menu>

        <ion-side-menu-content>
            <ion-nav-view></ion-nav-view>
        </ion-side-menu-content>
    </ion-side-menus>

</body>
</html>

clients.html

<ion-view view-title="Commercial: Clients">

<ion-header-bar align-title="center">
  <a href="#/" class="button icon-left ion-chevron-left button-clear button-dark"></a>

  <h1 class="title">Commercial: Clients</h1>
  <div class="buttons">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </div>
</ion-header-bar>

<ion-pane>

  <ion-content>

    <img-slider></img-slider>

    </ion-content>
</ion-pane>

</ion-view>

directive.html

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

directive.js

(function () {
    angular.module('starter')

    .controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
        var vm = this;

        $ionicSideMenuDelegate.canDragContent(false);

        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            slidesPerView: 3,
            paginationClickable: true,
            spaceBetween: 30,
            freeMode: true
        });

    }])

    .directive('imgSlider', function() {

        return {
            restrict: 'E',
            templateUrl: 'app/directives/directive.html',
            controller: "directiveCtrl"
        };

    });

}());

I just modified your code by adding an ng-show tag it worked for me

<div class="swiper-container" ng-show="menu()">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

and in directive.js file

 (function () {
        angular.module('starter')

        .controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
            var vm = this;

            //$ionicSideMenuDelegate.canDragContent(false);
          $scope.menu = function(){
    $ionicSideMenuDelegate.canDragContent(false);
    return true;
  }


            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                slidesPerView: 3,
                paginationClickable: true,
                spaceBetween: 30,
                freeMode: true
            });

        }])

        .directive('imgSlider', function() {

            return {
                restrict: 'E',
                templateUrl: 'app/directives/directive.html',
                controller: "directiveCtrl"
            };

        });

    }());

If having any queries please reply me