title: How to create pagination in carousel table?
body: <p>How to create carosal table pagination.. i need to the pagination looks like only "&lt;" and ">" carosal arrow.. </p>
  
  <p>Example: i have 8 rows in table and i want to show only 4 rows remaining go to next page in carosal so i click to ">" arrow then only that remaining 4 rows want to show.</p>
  
  <blockquote>
    <p>Note: The pagination should apply only carosal arrow </p>
  </blockquote>
  
  <p>here is my fiddle..</p>
  
  <p><strong><a href="https://jsfiddle.net/joelshah/mcra5p3s/" rel="nofollow noreferrer">FIDDLE HERE</a></strong></p>
  
  <p>here is my code..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 &lt; pageCount; i++) {
    $("#pagin").append('&lt;li&gt;&lt;a href="#"&gt;' + (i + 1) + '&lt;/a&gt;&lt;/li&gt; ');
    if (i &gt; pageSize) {
      $("#pagin li").eq(i).hide();
    }
  }
  
  var prev = $("&lt;li/&gt;").addClass("&lt;").html("&gt;").click(function() {
    startPage -= 3
    incremSlide -= 3
    slide();
  });
  
  prev.hide();
  
  var next = $("&lt;li/&gt;").addClass("&lt;").html("&gt;").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 &lt; 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 &gt;= pageSize * (page - 1) &amp;&amp; n &lt; 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()));
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }
  
  .carousel-control-next {
    right: -20px;
    height: fit-content;
    width: fit-content;
  }
  
  .contd {
    /* width: 160%;
              right: 30%; */
    width: 132%;
    right: 16%;
  }
  
  .predefineModal {
    padding-bottom: 0px;
    padding-top: 0px;
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    display: none;
  }
  
  .contd:hover .carousel-control-next-icon {
    display: block;
  }
  
  .contd:hover .carousel-control-prev-icon {
    display: block;
  }
  
  .second {
    position: relative;
    right: 6%;
  }
  
  .skip {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: none;
    display: inline-block;
    font-weight: 400;
    border: 1px solid transparent;
    padding: 3px .75rem;
    font-size: 1rem;
    border-radius: .25rem;
  }
  
  .skip:hover {
    background-color: #77b2f1;
  }
  
  .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;
    position: relative;
    right: 2%;
  }
  
  .carousel-control-next-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='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    position: relative;
  }
  
  .carousel-item {
    min-height: 280px;
    filter: blur(.0px) !important;
    /* transform: translateZ(0) !important; */
    backface-visibility: hidden !important;
    /* Prevent carousel from being distorted if for some reason image doesn't load */
  }
  
  .bs-example {
    margin: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
  }
  
  .carousel-indicators li {
    background-color: #9C27B0 !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
  
  
  
  &lt;div class="modal-body predefineModal"&gt;
    &lt;div class="bs-example"&gt;
      &lt;div id="myCarousel" class="carousel slide"&gt;
        &lt;!-- Carousel indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;!-- Wrapper for carousel items --&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active"&gt;
            &lt;div class="table-responsive"&gt;
              &lt;table class="table table-bordered"&gt;
                &lt;thead class="party_head"&gt;
                  &lt;tr&gt;
                    &lt;th&gt;#&lt;/th&gt;
                    &lt;th&gt;S.No&lt;/th&gt;
                    &lt;th&gt;Trans.Type&lt;/th&gt;
                    &lt;th&gt;Voucher Date&lt;/th&gt;
                    &lt;th&gt;To A/c Name&lt;/th&gt;
                    &lt;th&gt;Narration&lt;/th&gt;
                    &lt;th&gt;Debit&lt;/th&gt;
                    &lt;th&gt;Credit&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr class="line-content"&gt;
                    &lt;td&gt;&lt;input id="indeterminate-checkbox" type="checkbox" /&gt;&lt;/td&gt;
                    &lt;td&gt;1&lt;/td&gt;
                    &lt;td&gt;CP&lt;/td&gt;
                    &lt;td&gt;DD-MM-YYYY&lt;/td&gt;
                    &lt;td&gt;JOE&lt;/td&gt;
                    &lt;td&gt;Narration&lt;/td&gt;
                    &lt;td&gt;Debit&lt;/td&gt;
                    &lt;td&gt;Credit&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="line-content"&gt;
                    &lt;td&gt;
                      &lt;input type="checkbox" id="indeterminate-checkbox" /&gt;
                    &lt;/td&gt;
                    &lt;td&gt;2&lt;/td&gt;
                    &lt;td&gt;BP&lt;/td&gt;
                    &lt;td&gt;DD-MM-YYYY&lt;/td&gt;
                    &lt;td&gt;PLUMZ&lt;/td&gt;
                    &lt;td&gt;Narration&lt;/td&gt;
                    &lt;td&gt;Debit&lt;/td&gt;
                    &lt;td&gt;Credit&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="line-content"&gt;
                    &lt;td&gt;&lt;input id="indeterminate-checkbox" type="checkbox" /&gt;&lt;/td&gt;
                    &lt;td&gt;3&lt;/td&gt;
                    &lt;td&gt;CR&lt;/td&gt;
                    &lt;td&gt;DD-MM-YYYY&lt;/td&gt;
                    &lt;td&gt;text&lt;/td&gt;
                    &lt;td&gt;Narration&lt;/td&gt;
                    &lt;td&gt;Debit&lt;/td&gt;
                    &lt;td&gt;Credit&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="line-content"&gt;
                    &lt;td&gt;&lt;input id="indeterminate-checkbox" type="checkbox" /&gt;&lt;/td&gt;
                    &lt;td&gt;4&lt;/td&gt;
                    &lt;td&gt;CR&lt;/td&gt;
                    &lt;td&gt;DD-MM-YYYY&lt;/td&gt;
                    &lt;td&gt;text&lt;/td&gt;
                    &lt;td&gt;Narration&lt;/td&gt;
                    &lt;td&gt;Debit&lt;/td&gt;
                    &lt;td&gt;Credit&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="line-content"&gt;
                    &lt;td&gt;&lt;input id="indeterminate-checkbox" type="checkbox" /&gt;&lt;/td&gt;
                    &lt;td&gt;5&lt;/td&gt;
                    &lt;td&gt;CR&lt;/td&gt;
                    &lt;td&gt;DD-MM-YYYY&lt;/td&gt;
                    &lt;td&gt;text&lt;/td&gt;
                    &lt;td&gt;Narration&lt;/td&gt;
                    &lt;td&gt;Debit&lt;/td&gt;
                    &lt;td&gt;Credit&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr class="line-content"&gt;
                    &lt;td&gt;&lt;input id="indeterminate-checkbox" type="checkbox" /&gt;&lt;/td&gt;
                    &lt;td&gt;6&lt;/td&gt;
                    &lt;td&gt;CR&lt;/td&gt;
                    &lt;td&gt;DD-MM-YYYY&lt;/td&gt;
                    &lt;td&gt;text&lt;/td&gt;
                    &lt;td&gt;Narration&lt;/td&gt;
                    &lt;td&gt;Debit&lt;/td&gt;
                    &lt;td&gt;Credit&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Carousel controls --&gt;
        &lt;ul id="pagin"&gt;
          &lt;a class="carousel-control-prev" data-slide="prev"&gt;
            &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control-next" data-slide="next"&gt;
            &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>