hammer js with carousel images that contain link

Question

I'm using hammer.js with bootstrap carousel for swiping the images left and right with the mouse and it works fine but the problem is the images are links to other pages

<div class="carousel-item active">
<a href="#"><img class="imgslide" src="assets/img/07.jpg" alt=""></a>
</div>

and when I drag the mouse on it, it swipes but also opens the link, and I want it to only swipe when dragging it and go to the link only when clicking on the image. I'm using this to make the hammer work:

var $slider = $('.carousel'), hammer = new Hammer($slider.get(0));
$slider.find('a').each( (index, elem ) => {
    $(elem).prop('draggable', false);
} );
$slider.carousel();
hammer.on("panleft panright", (e) => {
    
    if( e.type == 'panleft' ) {
        $slider.carousel("next");
    }
    if( e.type == 'panright' ) {
        $slider.carousel("prev");
    }
} );