carousel icon hide issue no -20

by Joe

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>



<div class="modal-body predefineModal">
  <div class="bs-example">
    <div id="myCarousel" class="carousel slide">
      <!-- Wrapper for carousel items -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead class="party_head">
                <tr>
                  <th>#</th>
                  <th>S.No</th>
                  <th>Trans.Type</th>
                  <th>Voucher Date</th>
                  <th>To A/c Name</th>
                  <th>Narration</th>
                  <th>Debit</th>
                  <th>Credit</th>
                </tr>
              </thead>
              <tbody>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>1</td>
                  <td>CP</td>
                  <td>DD-MM-YYYY</td>
                  <td>JOE</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td>
                    <input type="checkbox" id="indeterminate-checkbox" />
                  </td>
                  <td>2</td>
                  <td>BP</td>
                  <td>DD-MM-YYYY</td>
                  <td>PLUMZ</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input...

CSS

#preModal .viewing {
      -webkit-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
      top: 50%;
      margin: 0 auto;
    }

    input[type=checkbox] {
      /* left: 23px; */
      width: 15px;
    }

    .carousel-control-prev {
      height: fit-content;
      width: fit-content;
      top: 40%;
      left: 10px;
    }

    .carousel-control-next {
      right: 10px;
      height: fit-content;
      width: fit-content;
      top: 40%;
    }

    .contd {
      /* width: 160%;
            right: 30%; */
      width: 132%;
      right: 16%;
    }

    .predefineModal {
      padding-bottom: 0px;
      padding-top: 0px;
    }

    .current,
    .carousel_li,
    .carousel_a {
      display: none;
    }

    /* .contd:hover .carousel-control-next-icon {
        display: block;
    }
    
    .contd:hover .carousel-control-prev-icon {
        display: block;
    } */

    .second {
      position: relative;
      right: 6%;
    }

    .modal-footer {
      max-width: 86%;
    }

    .indexBtn {
      color: #fff;
      background-color: #680f79;
      border-color: #680f79;
      box-shadow: none;
      display: inline-block;
      font-weight: 400;
      border: 1px solid transparent;
      padding: 3px .75rem;
      font-size: 1rem;
      border-radius: .25rem;
    }

    .indexBtn:hover {
      background-color: #c178cf;
    }

    .diss {
      color: #5f5e5e;
      background-color: #cecece;
      border-color: #cecece;
    }

    .btn {
      padding: 3px .75rem !important;
    }

    .periodTime {
      padding: 15px;
      padding-bottom: 0px;
    }

    .carousel {
      /* background: #2f4357; */
      margin-top: 20px;
    }

    .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
     ...

JavaScript

$(document).ready(function() {
  $("#myCarousel").carousel({
    interval: false
  });
});

pageSize = 3
incremSlide = 4
startPage = 0;
numberPage = 0;

var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);

for (var i = 0; i < pageCount; i++) {
  $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
  if (i > pageSize) {
    $("#pagin li").eq(i).hide();
  }
}

var prev = $("<li/>").addClass("<").html(">").click(function() {
  startPage -= 3
  incremSlide -= 3
  slide();
});

prev.hide();

var next = $("<li/>").addClass("<").html(">").click(function() {
  startPage += 3;
  incremSlide += 3;
  slide();
});

$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens) {
  $("#pagin li").hide();

  for (t = startPage; t < incremSlide; t++) {
    $("#pagin li").eq(t + 1).show();
  }
  if (startPage == 0) {
    next.show();
    prev.hide();
  } else if (numberPage == totalSlidepPage) {
    next.hide();
    prev.show();
  } else {
    next.show();
    prev.show();
  }
}

showPage = function(page) {
  $(".line-content").hide();
  $(".line-content").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  });
}

showPage(1);
$("#pagin li a").eq(0).addClass("current");

$("#pagin li a").click(function() {
  $("#pagin li a").removeClass("current");
  $(this).addClass("current");
  showPage(parseInt($(this).text()));
});
$('.carousel-control-prev').click(function(e) {
  var currentPage = parseInt($("#pagin li a.current").text());
  var prevPage = currentPage - 1;
  if (prevPage < pageSize) {
    showPage(prevPage);
    var currentObj = $("#pagin li a.current");
    $("#pagin li a.current").parent().prev().find('a').addClass('current');
    currentObj[0].className = "";

  } else {
    e.preventDefault();
  }
});
$('.carousel-control-next').click(function(e) {
  var currentPage = parseInt($("#pagin li...