javascript - 如何使用 jquery 禁用或隐藏轮播下一个/上一个图标
问题描述
我使用 bootstrap4 轮播,我在表格中使用轮播。我只是使用轮播下一个/上一个图标创建表格分页。现在,当我们在轮播的第一页并仅显示下一个图标时,我很难创建隐藏上一个图标,然后当我们转到第二页时,上一个图标想要显示。
同样,当我们转到最后一页时,下一个图标想要隐藏并仅显示上一个图标。
任何新的方法或建议请告诉我..
这是我尝试过的代码..
$(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>
小提琴:尝试过代码小提琴
解决方案
这是我的另一个答案,因为您需要完全由 jQuery 自定义,并且您可以定义在data-showperpage="4"
中显示的每页记录。
我希望下面的代码片段对您有很大帮助。
$( 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>
推荐阅读
- visual-studio-code - 完成时如何将光标放在自定义位置?
- javascript - 使用 asyncStorage 对日常日志和图表做出本机反应
- python - 将字母序列传递给 CNN - Keras
- nginx - 使用 nginx 将子子域代理到 ip
- jquery - 使用 JQuery 替换 div 中的内容
- jquery - 在 jQuery 的表单中查找 UL 和 LI 中复选框的输入选择器
- php - 如何从 curl 请求中删除谷歌验证码?
- cmake - 如何在 cmake 中设置 rpath 原点?
- javascript - 无法使用 chrome 扩展中的内容脚本触发活动网页上的事件
- php - 如何在 PhpStorm 中导航到 PHP 关键字源代码?