next prev icon not work in owl carousel 2

I design next prev icon for owl carousel ver 2 like this :

HTML:

<section id="jm-Section-CARU">
    <!-- CAROUSEL NAV -->
    <nav class="next"> <a class="customNextBtn" href="#">&nbsp;</a>

    </nav>
    <nav class="prev" style="display:none;"> <a class="customPrevBtn" href="#">&nbsp;</a>

    </nav>
    <!-- END NAV -->
    <div class="owl-carousel" id="owl-example">
        <div class="item">
            <img src="http://placehold.it/500x300" alt="The Last of us">
        </div>
        <div class="item">
            <img src="http://placehold.it/500x300" alt="The Last of us">
        </div>
        <div class="item">
            <img src="http://placehold.it/500x300" alt="The Last of us">
        </div>
    </div>
</section>

CSS:

  #jm-Section-CARU {

      position: relative;

      margin: 0;

      text-align: center;

      width:500px;

      height:300px;

  }

  .next, .prev {

      display: none;

      position: absolute;

      top: calc(50% - 18px);

      z-index: 3;

      height: 36px;

      width: 36px;

      background: rgba(255, 255, 255, 0.74);

  }

  .next:hover, .prev:hover {

      background: rgba(255, 255, 255, 0.94);

  }

  .next {

      right: 0;

  }

  .prev {

      left: 0;

  }

  .prev a {

      display: inherit;

      -ms-transform: rotate(270deg);

      -webkit-transform: rotate(270deg);

      transform: rotate(270deg);

      background: url("http://cdn.flaticon.com/img/avatar/5.jpg") center no-repeat;

      width: 32px;

      height: 34px;

  }

  .next a {

      display: inherit;

      -ms-transform: rotate(90deg);

      -webkit-transform: rotate(90deg);

      transform: rotate(90deg);

      background: url("http://cdn.flaticon.com/img/avatar/5.jpg") center no-repeat;

      width: 32px;

      height: 40px;

      float: right;

  }

  .owl-theme .owl-controls {

      position: absolute;

      margin: 0;

      width: 100%;

      bottom: -9%;

  }

  .owl-theme .owl-dots .owl-dot span {

      background-color: rgba(170, 170, 170, 0.88);

      height: 8px;

      width: 8px;

  }

  .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot.active:hover span {

      background-color: rgba(0, 0, 0, 0.88);

  }

  .owl-theme .owl-dots .owl-dot:hover span {

      background-color: rgba(51, 51, 51, 0.88);

  }

  .owl-item {

      z-index:1;

      /* Fix for OwlCarousel2 Issue #772 (loop flicker) */

  }

JS:

function showNav(e) {
    if ($(".next").css("float") == "right") {
        $(".next").fadeIn();
        $(".prev").fadeIn();
    }
}

function hideNav(e) {
    $(".next").fadeOut();
    $(".prev").fadeOut();
}
$("#jm-Section-CARU").hover(showNav, hideNav);
$('.customNextBtn').click(function (e) {
    e.preventDefault();
    $("#owl-example").trigger('next.owl.carousel');
});
$('.customPrevBtn').click(function (e) {
    e.preventDefault();
    $("#owl-example").trigger('prev.owl.carousel');
});
$("#owl-example").owlCarousel({
    items: 1
});

But in Action next and prev icon not show in section hover and not work.

how do fix this problem?

DEMO HERE