Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to disable or hide carousel next/prev icons using jquery

Tags:

javascript

html

jquery

css

Im using bootstrap4 carousel and i using carousel inside table.. i just create table pagination using carousel next/prev icon. now i struggle to create hide previous icon when we are in first page in carousel and show only next icon, then when we go to second page the prev icon wants to show.

same as well when we go last page the next icon wants to hide and show only prev icon.

any new approaches or suggestions please tell me..

here is my tried 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 < 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 a.current").text());
  var nextPage = currentPage + 1;
  if (nextPage < pageSize) {
    showPage(nextPage);
    $("#pagin li a.current").parent().next().find('a').addClass('current');
    var currentObj = $("#pagin li a.current");
    currentObj[0].className = "";
  } else {
    e.preventDefault();
  }
});

// tried another way

function carouselPage() {
  var checkitem = function() {
    var $this;
    $this = $("#myCarousel");
    if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) {
      $this.children(".left").hide();
      $this.children(".right").show();
    } else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) {
      $this.children(".right").hide();
      $this.children(".left").show();
    } else {
      $this.children(".carousel-control").show();
    }
  };

  checkitem();

  $("#myCarousel").on("slid.bs.carousel", "", checkitem);
};
#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;
  position: relative;
  right: 37px;
}

.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;
  left: 37px;
}

ul#pagin {
  display: none;
}


/* .carousel-control-next,
    .carousel-control-prev {
        filter: invert(100%);
    } */


/* .carousel-control-prev-icon,
    .carousel-control-next-icon {
        position: relative;
        right: 2%;
        height: fit-content;
        width: fit-content;
        outline: black;
        background-size: 100%, 100%;
        border-radius: 50%;
        border: 1px solid black;
        background-image: none;
    }
    
    .carousel-control-next-icon:after {
        content: '>';
        font-size: 35px;
        color: #680f79;
        font-weight: 800;
    }
    
    .carousel-control-prev-icon:after {
        content: '<';
        font-size: 35px;
        color: #680f79;
        font-weight: 800;
    } */

.carousel-item {
  min-height: 180px;
  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;
}

.ui-widget.ui-widget-content {
  right: 0px !important;
  width: 100%;
  padding: 17px;
}
<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 id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>3</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>4</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input type="checkbox" id="indeterminate-checkbox" /></td>
                  <td>5</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
    <!-- Carousel controls -->
    <ul id="pagin"></ul>
    <a class="left carousel-control-prev" href="#" role="button" data-slide="prev" onload="carouselPage()">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <!-- <span class="sr-only">Previous</span> -->
    </a>
    <a class="right carousel-control-next" href="#" role="button" data-slide="next" onload="carouselPage()">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <!-- <span class="sr-only">Next</span> -->
    </a>
  </div>
</div>

Fiddle: tried code fiddle

like image 622
Joe Avatar asked Nov 19 '25 12:11

Joe

1 Answers


This is my another answer as you need with fully customize by jQuery and you can define per page records show in data-showperpage="4".

I hope this below snippet help you lot.

$( document ).ready(function(){
  var counting = 0;
  var slideCounter = 0;
  var slidePerpage = Number($("#records").attr("data-showperpage"));
  var countSlides = $('#records tbody tr').length;
  var totalSlideCount = Math.ceil(countSlides/slidePerpage);
  if (countSlides>1) {
    $('.carousel-control-prev').hide();
    for (var i = 1; slidePerpage>=i; i++) {
  		$('#records tbody tr:nth-child('+i+')').addClass('active');
  	}
  }
  else if (countSlides==1) {
    $('.carousel-control-prev,.carousel-control-next').hide();
  }
  

  //Prev Functionality
  $('.carousel-control-prev').on('click', function(){
  	slideCounter = slideCounter-slidePerpage; 
  	$('#records tbody tr').removeClass('active');
  	for(i = slideCounter+1; (slideCounter+slidePerpage)>=i; i++){
  		//console.log(i); // (4,5,6) // (7,8,9) //....
  		$('#records tbody tr:nth-child('+i+')').addClass('active');
  	}
  	counting = counting-1;
  	if (counting==0) {
      $('.carousel-control-prev').hide();
    }
    else{
      $('.carousel-control-prev,.carousel-control-next').show();
    }
  });


  //Next Functionality
  $('.carousel-control-next').on('click', function(){
  	slideCounter = slideCounter+slidePerpage;  //3,6,9,12....
  	$('#records tbody tr').removeClass('active');
  	for(i = slideCounter+1; (slideCounter+slidePerpage)>=i; i++){
  		// console.log(i); // (4,5,6) // (7,8,9) //....
  		$('#records tbody tr:nth-child('+i+')').addClass('active');
  	}
  	counting = counting+1;
  	if (totalSlideCount==counting+1) {
      $('.carousel-control-next').hide();
    }
    else{
      $('.carousel-control-prev,.carousel-control-next').show();
    }
  });
  
});
.carousel-control-prev,.carousel-control-next{
  width: 40px!important;
  height: 40px!important;
  position: absolute;
  top: 0%;
  margin-top: 5px;
  border: 2px solid #888;
  border-radius: 50px;
  background: rgba(255,255,255,0.95);
  opacity: 1;
  cursor: pointer;
}
.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;
}
.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;
}
.table-pagination tbody tr{
	display: none;
}
.table-pagination tbody tr.active{
	display: table-row;
}	
<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="container p-3 my-1">
  <div class="row">
    <div class="col-sm-12 position-relative">
      <div class="table-responsive">
        <table class="table table-bordered table-pagination" id="records" data-showperpage="4">
          <thead>
            <tr>
              <th>#</th>
              <th>S.No</th>
              <th>Table #1</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>1</td>
              <td>CP</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="indeterminate-checkbox" />
              </td>
              <td>2</td>
              <td>BP</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>3</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>4</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="indeterminate-checkbox" /></td>
              <td>5</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>6</td>
              <td>CP</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="indeterminate-checkbox" />
              </td>
              <td>7</td>
              <td>BP</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>8</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>9</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="indeterminate-checkbox" /></td>
              <td>10</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>11</td>
              <td>CP</td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="indeterminate-checkbox" />
              </td>
              <td>12</td>
              <td>BP</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>13</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input id="indeterminate-checkbox" type="checkbox" /></td>
              <td>14</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="indeterminate-checkbox" /></td>
              <td>15</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="indeterminate-checkbox" /></td>
              <td>16</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="indeterminate-checkbox" /></td>
              <td>17</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="indeterminate-checkbox" /></td>
              <td>18</td>
              <td>CR</td>
            </tr>
            <tr>
              <td><input type="checkbox" id="indeterminate-checkbox" /></td>
              <td>19</td>
              <td>CR</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="left carousel-control-prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      </div>
      <div class="right carousel-control-next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</div>
like image 90
Raeesh Alam Avatar answered Nov 22 '25 00:11

Raeesh Alam
Sign in to Comment

Related questions

Issue with svg animation while loading
Trigger RXJS Stream only on certain condition
Angular - Test service subscribe on submit
Bootstrap radio button isn't working in flask
Javascript Delivery Show Based On Time
How can I show and hide a div based on what's clicked in another div in Vue js?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!