JavaScript double tap (mobile)

Question

I have a carousel with multiple images, which I have attached ondblclick href's. When viewing the site on mobile this function doesnt apply to tapping the screen. Is there a relativley easy way to set this function up for mobile? See HTML & CSS below

    <div class="carousel" data-flickity='{ "fullscreen": true, "lazyLoad": 2 }'>
    <img class="carousel-image"
     src="https://i.imgur.com/HiGC9mn.jpg" ondblclick="location.href='basketball.html'">
     <img class="carousel-image"
     src="https://i.imgur.com/v0vywac.jpg"  ondblclick="location.href='tennis.html'">
     <img class="carousel-image"
     src="https://i.imgur.com/SlFcFr7.jpg"  ondblclick="location.href='watersports.html'">
   </div>

CSS:

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #f8f9fa;
}


.landing{
    background-color: #f8f9fa;
}

.carousel-image {
  display: block;
  height: 550px;
  /* set min-width, allow images to set cell width */
  min-width: 150px;
  max-width: 100%;
  margin-right: 50px;
  /* vertically center */
  top: 50%;
  transform: translateY(-50%)
}

.carousel.is-fullscreen .carousel-image {
  height: auto;
  max-height: 100%;
}



    @media (max-width: 576px) {
        
        .carousel-image{
            
            height: 400px;
        }
        
         }